bede/tfm_ainventory
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: step 8 - uniform text tokens in Scanner and AIOnboarding

Browse Source
This commit is contained in:
Daniel Bedeleanu
2026-04-19 12:02:35 +03:00
parent 7d4e60699d
commit acf9155ce2
3 changed files with 18 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/superpowers/plans/2026-04-19-ui-uniformity.md
View File

@@ -54,7 +54,7 @@ Mark each step `[x]` when complete. Commit the file with the step.
- [x] **Step 5** — Fix: `app/admin/page.tsx` + `app/logs/page.tsx` text tokens - [x] **Step 5** — Fix: `app/admin/page.tsx` + `app/logs/page.tsx` text tokens
- [x] **Step 6** — Fix: `components/AdminOverlay.tsx` text tokens - [x] **Step 6** — Fix: `components/AdminOverlay.tsx` text tokens
- [x] **Step 7** — Fix: `components/IdentityCheckOverlay.tsx` text tokens - [x] **Step 7** — Fix: `components/IdentityCheckOverlay.tsx` text tokens
- [ ] **Step 8** — Fix: `components/Scanner.tsx` + `components/AIOnboarding.tsx` - [x] **Step 8** — Fix: `components/Scanner.tsx` + `components/AIOnboarding.tsx`
- [ ] **Step 9** — Fix: `components/admin/` (all 5 files) - [ ] **Step 9** — Fix: `components/admin/` (all 5 files)
- [ ] **Step 10** — Fix: Modals (`CreateUserModal`, `ConfirmationModal`, `CategoryCreationModal`, `ItemComparisonModal`) - [ ] **Step 10** — Fix: Modals (`CreateUserModal`, `ConfirmationModal`, `CategoryCreationModal`, `ItemComparisonModal`)
- [ ] **Step 11** — Fix: `lib/` and remaining components - [ ] **Step 11** — Fix: `lib/` and remaining components

28
frontend/components/AIOnboarding.tsx
View File

@@ -255,7 +255,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
<button <button
onClick={() => setMode('item')} onClick={() => setMode('item')}
aria-label="Select Discovery Mode" aria-label="Select Discovery Mode"
className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-xl font-bold cursor-pointer transition-all focus:ring-2 focus:ring-primary focus:outline-none ${mode === 'item' ? 'bg-primary text-white shadow-lg' : 'text-muted hover:text-slate-300'}`} className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-xl font-bold cursor-pointer transition-all focus:ring-2 focus:ring-primary focus:outline-none ${mode === 'item' ? 'bg-primary text-white shadow-lg' : 'text-muted hover:text-secondary'}`}
> >
<Package size={18} /> <Package size={18} />
<span className="text-xs">Discovery Mode</span> <span className="text-xs">Discovery Mode</span>
@@ -263,7 +263,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
<button <button
onClick={() => setMode('box')} onClick={() => setMode('box')}
aria-label="Select Box Lookup mode" aria-label="Select Box Lookup mode"
className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-xl font-bold cursor-pointer transition-all focus:ring-2 focus:ring-primary focus:outline-none ${mode === 'box' ? 'bg-primary text-white shadow-lg' : 'text-muted hover:text-slate-300'}`} className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-xl font-bold cursor-pointer transition-all focus:ring-2 focus:ring-primary focus:outline-none ${mode === 'box' ? 'bg-primary text-white shadow-lg' : 'text-muted hover:text-secondary'}`}
> >
<Layers size={18} /> <Layers size={18} />
<span className="text-xs">Box Lookup</span> <span className="text-xs">Box Lookup</span>
@@ -274,7 +274,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
<div className="w-20 h-20 bg-surface rounded-3xl flex items-center justify-center mb-6 shadow-inner text-primary"> <div className="w-20 h-20 bg-surface rounded-3xl flex items-center justify-center mb-6 shadow-inner text-primary">
<Camera size={32} /> <Camera size={32} />
</div> </div>
<p className="text-slate-300 mb-2 text-center font-bold"> <p className="text-secondary mb-2 text-center font-bold">
{mode === 'box' ? 'Deep Box Analysis' : 'Multi-Item Extraction'} {mode === 'box' ? 'Deep Box Analysis' : 'Multi-Item Extraction'}
</p> </p>
<p className="text-xs text-muted px-8 text-center leading-relaxed font-bold"> <p className="text-xs text-muted px-8 text-center leading-relaxed font-bold">
@@ -297,7 +297,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
onClick={() => fileInputRef.current?.click()} onClick={() => fileInputRef.current?.click()}
data-testid="manual-entry-tab" data-testid="manual-entry-tab"
aria-label="Upload photo from device" aria-label="Upload photo from device"
className="flex flex-col items-center justify-center gap-2 bg-surface text-slate-200 border border-slate-800 rounded-3xl font-bold cursor-pointer active:scale-95 transition-all focus:ring-2 focus:ring-blue-500 focus:outline-none" className="flex flex-col items-center justify-center gap-2 bg-surface text-secondary border border-slate-800 rounded-3xl font-bold cursor-pointer active:scale-95 transition-all focus:ring-2 focus:ring-blue-500 focus:outline-none"
> >
<ImageIcon size={24} /> <ImageIcon size={24} />
<span className="text-sm">Upload Photo</span> <span className="text-sm">Upload Photo</span>
@@ -415,7 +415,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
<textarea <textarea
value={extractedItems[editingIndex].Item || extractedItems[editingIndex].name || ''} value={extractedItems[editingIndex].Item || extractedItems[editingIndex].name || ''}
onChange={(e) => updateEditingItem({ Item: e.target.value })} onChange={(e) => updateEditingItem({ Item: e.target.value })}
className="bg-transparent w-full text-lg font-bold outline-none text-white placeholder:text-slate-700 resize-none h-8 leading-tight selection:bg-primary/30 py-0" className="bg-transparent w-full text-lg font-bold outline-none text-white placeholder:text-muted resize-none h-8 leading-tight selection:bg-primary/30 py-0"
placeholder="SSD, SFP, Cable..." placeholder="SSD, SFP, Cable..."
/> />
</div> </div>
@@ -428,7 +428,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
list="onboarding-categories" list="onboarding-categories"
value={extractedItems[editingIndex].Category || extractedItems[editingIndex].category || ''} value={extractedItems[editingIndex].Category || extractedItems[editingIndex].category || ''}
onChange={(e) => updateEditingItem({ Category: e.target.value })} onChange={(e) => updateEditingItem({ Category: e.target.value })}
className="bg-transparent w-full font-bold outline-none text-slate-200" className="bg-transparent w-full font-bold outline-none text-secondary"
placeholder="e.g. storage" placeholder="e.g. storage"
/> />
<datalist id="onboarding-categories"> <datalist id="onboarding-categories">
@@ -443,7 +443,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
value={extractedItems[editingIndex].Type || extractedItems[editingIndex].type || ''} value={extractedItems[editingIndex].Type || extractedItems[editingIndex].type || ''}
list="onboarding-types" list="onboarding-types"
onChange={(e) => updateEditingItem({ Type: e.target.value })} onChange={(e) => updateEditingItem({ Type: e.target.value })}
className="bg-transparent w-full text-sm font-bold outline-none text-slate-200" className="bg-transparent w-full text-sm font-bold outline-none text-secondary"
placeholder="e.g. spare parts" placeholder="e.g. spare parts"
/> />
<datalist id="onboarding-types"> <datalist id="onboarding-types">
@@ -458,7 +458,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
<input <input
value={extractedItems[editingIndex].Color || extractedItems[editingIndex].color || ''} value={extractedItems[editingIndex].Color || extractedItems[editingIndex].color || ''}
onChange={(e) => updateEditingItem({ Color: e.target.value })} onChange={(e) => updateEditingItem({ Color: e.target.value })}
className="bg-transparent w-full font-bold outline-none text-slate-200" className="bg-transparent w-full font-bold outline-none text-secondary"
placeholder="e.g. Aqua" placeholder="e.g. Aqua"
/> />
</div> </div>
@@ -482,7 +482,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
<textarea <textarea
value={extractedItems[editingIndex].Description || extractedItems[editingIndex].description || ''} value={extractedItems[editingIndex].Description || extractedItems[editingIndex].description || ''}
onChange={(e) => updateEditingItem({ Description: e.target.value })} onChange={(e) => updateEditingItem({ Description: e.target.value })}
className="bg-transparent w-full text-sm leading-tight outline-none resize-none h-8 text-slate-300 py-0" className="bg-transparent w-full text-sm leading-tight outline-none resize-none h-8 text-secondary py-0"
placeholder="Product description..." placeholder="Product description..."
/> />
</div> </div>
@@ -493,7 +493,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
<input <input
value={extractedItems[editingIndex].Connector || extractedItems[editingIndex].connector || ''} value={extractedItems[editingIndex].Connector || extractedItems[editingIndex].connector || ''}
onChange={(e) => updateEditingItem({ Connector: e.target.value })} onChange={(e) => updateEditingItem({ Connector: e.target.value })}
className="bg-transparent w-full font-bold outline-none text-slate-200" className="bg-transparent w-full font-bold outline-none text-secondary"
placeholder="e.g. LC/UPC" placeholder="e.g. LC/UPC"
/> />
</div> </div>
@@ -502,7 +502,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
<input <input
value={extractedItems[editingIndex].Size || extractedItems[editingIndex].size || ''} value={extractedItems[editingIndex].Size || extractedItems[editingIndex].size || ''}
onChange={(e) => updateEditingItem({ Size: e.target.value })} onChange={(e) => updateEditingItem({ Size: e.target.value })}
className="bg-transparent w-full text-sm font-bold outline-none text-slate-200" className="bg-transparent w-full text-sm font-bold outline-none text-secondary"
placeholder="e.g. 5m / 10G" placeholder="e.g. 5m / 10G"
/> />
</div> </div>
@@ -524,7 +524,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
<input <input
value={extractedItems[editingIndex].PartNr || extractedItems[editingIndex].part_number || ''} value={extractedItems[editingIndex].PartNr || extractedItems[editingIndex].part_number || ''}
onChange={(e) => updateEditingItem({ PartNr: e.target.value })} onChange={(e) => updateEditingItem({ PartNr: e.target.value })}
className="bg-transparent w-full font-mono text-sm font-bold outline-none text-slate-200" className="bg-transparent w-full font-mono text-sm font-bold outline-none text-secondary"
placeholder="ID code..." placeholder="ID code..."
/> />
</div> </div>
@@ -534,7 +534,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
type="number" type="number"
value={extractedItems[editingIndex].quantity || 1} value={extractedItems[editingIndex].quantity || 1}
onChange={(e) => updateEditingItem({ quantity: parseFloat(e.target.value) })} onChange={(e) => updateEditingItem({ quantity: parseFloat(e.target.value) })}
className="bg-transparent w-full font-black text-base outline-none text-slate-200" className="bg-transparent w-full font-black text-base outline-none text-secondary"
/> />
</div> </div>
</div> </div>
@@ -584,7 +584,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
<div className="w-8 h-8 rounded-xl bg-primary/10 flex items-center justify-center text-primary"> <div className="w-8 h-8 rounded-xl bg-primary/10 flex items-center justify-center text-primary">
<Package size={16} /> <Package size={16} />
</div> </div>
<h4 className="font-black text-slate-100 truncate">{item.Item || item.name || "Unknown Item"}</h4> <h4 className="font-black text-secondary truncate">{item.Item || item.name || "Unknown Item"}</h4>
</div> </div>
<div className="flex gap-2"> <div className="flex gap-2">
<span className="text-xs font-black px-2 py-0.5 bg-slate-800 text-secondary rounded-md"> <span className="text-xs font-black px-2 py-0.5 bg-slate-800 text-secondary rounded-md">

6
frontend/components/Scanner.tsx
View File

@@ -278,14 +278,14 @@ export default function Scanner({ onScanSuccess, onOCRMatch, paused }: ScannerPr
)} )}
{!isStarted && !error && ( {!isStarted && !error && (
<div className="absolute inset-0 z-20 flex flex-col items-center justify-center bg-surface text-slate-300 gap-4"> <div className="absolute inset-0 z-20 flex flex-col items-center justify-center bg-surface text-secondary gap-4">
<RefreshCw className="w-8 h-8 animate-spin text-primary" /> <RefreshCw className="w-8 h-8 animate-spin text-primary" />
<p className="text-sm font-medium">Initializing camera...</p> <p className="text-sm font-medium">Initializing camera...</p>
</div> </div>
)} )}
{error && ( {error && (
<div className="absolute inset-0 z-20 flex flex-col items-center justify-center bg-surface text-slate-300 px-8 text-center gap-4"> <div className="absolute inset-0 z-20 flex flex-col items-center justify-center bg-surface text-secondary px-8 text-center gap-4">
<XCircle className="w-10 h-10 text-red-500" /> <XCircle className="w-10 h-10 text-red-500" />
<div> <div>
<p className="font-bold text-white">Camera Error</p> <p className="font-bold text-white">Camera Error</p>
@@ -334,7 +334,7 @@ export default function Scanner({ onScanSuccess, onOCRMatch, paused }: ScannerPr
{ocrProcessing ? ( {ocrProcessing ? (
<> <>
<RefreshCw className="animate-spin text-primary" size={18} /> <RefreshCw className="animate-spin text-primary" size={18} />
<span className="text-xs font-black text-slate-200 leading-none">Analyzing</span> <span className="text-xs font-black text-secondary leading-none">Analyzing</span>
</> </>
) : ( ) : (
<> <>