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

28
frontend/components/AIOnboarding.tsx
View File

@@ -255,7 +255,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
<button
onClick={() => setMode('item')}
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} />
<span className="text-xs">Discovery Mode</span>
@@ -263,7 +263,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
<button
onClick={() => setMode('box')}
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} />
<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">
<Camera size={32} />
</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'}
</p>
<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()}
data-testid="manual-entry-tab"
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} />
<span className="text-sm">Upload Photo</span>
@@ -415,7 +415,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
<textarea
value={extractedItems[editingIndex].Item || extractedItems[editingIndex].name || ''}
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..."
/>
</div>
@@ -428,7 +428,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
list="onboarding-categories"
value={extractedItems[editingIndex].Category || extractedItems[editingIndex].category || ''}
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"
/>
<datalist id="onboarding-categories">
@@ -443,7 +443,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
value={extractedItems[editingIndex].Type || extractedItems[editingIndex].type || ''}
list="onboarding-types"
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"
/>
<datalist id="onboarding-types">
@@ -458,7 +458,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
<input
value={extractedItems[editingIndex].Color || extractedItems[editingIndex].color || ''}
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"
/>
</div>
@@ -482,7 +482,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
<textarea
value={extractedItems[editingIndex].Description || extractedItems[editingIndex].description || ''}
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..."
/>
</div>
@@ -493,7 +493,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
<input
value={extractedItems[editingIndex].Connector || extractedItems[editingIndex].connector || ''}
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"
/>
</div>
@@ -502,7 +502,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
<input
value={extractedItems[editingIndex].Size || extractedItems[editingIndex].size || ''}
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"
/>
</div>
@@ -524,7 +524,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
<input
value={extractedItems[editingIndex].PartNr || extractedItems[editingIndex].part_number || ''}
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..."
/>
</div>
@@ -534,7 +534,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
type="number"
value={extractedItems[editingIndex].quantity || 1}
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>
@@ -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">
<Package size={16} />
</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 className="flex gap-2">
<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 && (
<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" />
<p className="text-sm font-medium">Initializing camera...</p>
</div>
)}
{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" />
<div>
<p className="font-bold text-white">Camera Error</p>
@@ -334,7 +334,7 @@ export default function Scanner({ onScanSuccess, onOCRMatch, paused }: ScannerPr
{ocrProcessing ? (
<>
<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>
</>
) : (
<>