style(fusion_plating_shopfloor): polish the scan button pair

Matched, intentional look for the two scan controls:
- Scan QR (camera, primary sticker-scan) — accent-filled blue, fa-qrcode.
- Enter Code (manual / scanner-gun) — accent-tinted secondary, fa-keyboard-o.
Both now use Font Awesome icons (no emoji), inline-flex aligned icon+label.
Enter Code's class restructured so scan-alt persists alongside the active
state when the drawer is open.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
gsinghpal
2026-06-02 01:07:44 -04:00
parent 8a1a09b150
commit b59ad6b21e
2 changed files with 25 additions and 3 deletions

View File

@@ -72,6 +72,8 @@
}
}
.toolbar-btn {
display: inline-flex;
align-items: center;
padding: 8px 14px;
font-size: 14px;
font-weight: 500;
@@ -81,8 +83,10 @@
cursor: pointer;
color: $plant-text;
font-family: inherit;
white-space: nowrap;
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
transition: transform 0.1s ease, box-shadow 0.1s ease;
i { font-size: 15px; line-height: 1; }
&:hover {
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0,0,0,0.08);
@@ -93,6 +97,24 @@
color: #5e4400;
font-weight: 700;
}
// Scan pair — matched look. "Scan QR" (camera, the primary way to
// scan a printed job sticker) is accent-filled so it stands out;
// "Enter Code" (manual / hardware scanner-gun) is the accent-tinted
// secondary. Matched FA icons (fa-qrcode / fa-keyboard-o), no emoji.
&.o_fp_qr_btn {
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
border-color: #1d4ed8;
color: #fff;
font-weight: 600;
i { color: #fff; }
&:hover { box-shadow: 0 3px 8px rgba(29, 78, 216, 0.32); }
}
&.scan-alt {
background: linear-gradient(135deg, $plant-mine-bg 0%, $plant-card-bg 100%);
border-color: $plant-mine-border;
font-weight: 600;
i { color: #1d4ed8; }
}
}
// 8 tiles — Work Orders, At My Station, Bakes Due, On Hold,

View File

@@ -32,9 +32,9 @@
gun text drawer (a wedge gun types the code;
no camera). -->
<QrScanner cssClass="'toolbar-btn'" label="'Scan QR'"/>
<button class="toolbar-btn"
t-att-class="state.showScan ? 'toolbar-btn active' : 'toolbar-btn'"
t-on-click="toggleScan">⌨️ Enter Code</button>
<button class="toolbar-btn scan-alt"
t-att-class="state.showScan ? 'active' : ''"
t-on-click="toggleScan"><i class="fa fa-keyboard-o me-1"/>Enter Code</button>
<button class="toolbar-btn handoff" t-on-click="onHandOff">🔓 Hand Off</button>
</div>
</div>