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

style: step 10 - uniform text tokens in modals

Browse Source
This commit is contained in:
Daniel Bedeleanu
2026-04-19 12:07:15 +03:00
parent 922d9e431e
commit 1850fea170
6 changed files with 21 additions and 21 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

@@ -56,7 +56,7 @@ Mark each step `[x]` when complete. Commit the file with the step.
- [x] **Step 7** — Fix: `components/IdentityCheckOverlay.tsx` text tokens - [x] **Step 7** — Fix: `components/IdentityCheckOverlay.tsx` text tokens
- [x] **Step 8** — Fix: `components/Scanner.tsx` + `components/AIOnboarding.tsx` - [x] **Step 8** — Fix: `components/Scanner.tsx` + `components/AIOnboarding.tsx`
- [x] **Step 9** — Fix: `components/admin/` (all 5 files) - [x] **Step 9** — Fix: `components/admin/` (all 5 files)
- [ ] **Step 10** — Fix: Modals (`CreateUserModal`, `ConfirmationModal`, `CategoryCreationModal`, `ItemComparisonModal`) - [x] **Step 10** — Fix: Modals (`CreateUserModal`, `ConfirmationModal`, `CategoryCreationModal`, `ItemComparisonModal`)
- [ ] **Step 11** — Fix: `lib/` and remaining components - [ ] **Step 11** — Fix: `lib/` and remaining components
- [ ] **Step 12** — Final build verification + visual smoke check - [ ] **Step 12** — Final build verification + visual smoke check

12
frontend/components/CategoryCreationModal.tsx
View File

@@ -62,7 +62,7 @@ export default function CategoryCreationModal({
<button <button
onClick={onClose} onClick={onClose}
disabled={loading} disabled={loading}
className="p-1 text-muted hover:text-slate-300 rounded focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none disabled:opacity-50" className="p-1 text-muted hover:text-secondary rounded focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none disabled:opacity-50"
aria-label="Close" aria-label="Close"
> >
<X size={20} /> <X size={20} />
@@ -71,7 +71,7 @@ export default function CategoryCreationModal({
<form onSubmit={handleSubmit} className="p-6 space-y-4"> <form onSubmit={handleSubmit} className="p-6 space-y-4">
<div> <div>
<label className="text-sm font-black text-slate-300">Name</label> <label className="text-sm font-black text-secondary">Name</label>
<input <input
type="text" type="text"
value={name} value={name}
@@ -80,20 +80,20 @@ export default function CategoryCreationModal({
setError(null); setError(null);
}} }}
placeholder="e.g., Electronics" placeholder="e.g., Electronics"
className="w-full mt-2 px-3 py-2.5 bg-slate-800 border border-slate-700 rounded text-white placeholder-slate-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary" className="w-full mt-2 px-3 py-2.5 bg-slate-800 border border-slate-700 rounded text-white placeholder:text-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"
disabled={loading} disabled={loading}
autoFocus autoFocus
/> />
</div> </div>
<div> <div>
<label className="text-sm font-black text-slate-300">Description (optional)</label> <label className="text-sm font-black text-secondary">Description (optional)</label>
<input <input
type="text" type="text"
value={description} value={description}
onChange={(e) => setDescription(e.target.value)} onChange={(e) => setDescription(e.target.value)}
placeholder="Brief category description" placeholder="Brief category description"
className="w-full mt-2 px-3 py-2.5 bg-slate-800 border border-slate-700 rounded text-white placeholder-slate-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary" className="w-full mt-2 px-3 py-2.5 bg-slate-800 border border-slate-700 rounded text-white placeholder:text-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"
disabled={loading} disabled={loading}
/> />
</div> </div>
@@ -109,7 +109,7 @@ export default function CategoryCreationModal({
type="button" type="button"
onClick={onClose} onClick={onClose}
disabled={loading} disabled={loading}
className="flex-1 px-4 py-2.5 text-slate-300 bg-slate-800 border border-slate-700 rounded font-semibold hover:bg-slate-700 transition-colors disabled:opacity-50 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none" className="flex-1 px-4 py-2.5 text-secondary bg-slate-800 border border-slate-700 rounded font-semibold hover:bg-slate-700 transition-colors disabled:opacity-50 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
> >
Cancel Cancel
</button> </button>

8
frontend/components/ConfirmationModal.tsx
View File

@@ -67,7 +67,7 @@ export default function ConfirmationModal({
<button <button
onClick={onCancel} onClick={onCancel}
disabled={loading} disabled={loading}
className="p-1 text-muted hover:text-slate-300 rounded cursor-pointer focus:ring-2 focus:ring-primary focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed" className="p-1 text-muted hover:text-secondary rounded cursor-pointer focus:ring-2 focus:ring-primary focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
aria-label="Close modal" aria-label="Close modal"
> >
<X size={20} /> <X size={20} />
@@ -77,7 +77,7 @@ export default function ConfirmationModal({
{/* Content */} {/* Content */}
<div className="p-6 space-y-4"> <div className="p-6 space-y-4">
{/* Description */} {/* Description */}
<p className="text-sm text-slate-300">{description}</p> <p className="text-sm text-secondary">{description}</p>
{/* Item Name (if provided) */} {/* Item Name (if provided) */}
{itemName && ( {itemName && (
@@ -118,7 +118,7 @@ export default function ConfirmationModal({
setError(null); setError(null);
}} }}
placeholder="Type DELETE" placeholder="Type DELETE"
className="w-full px-3 py-2.5 bg-slate-800 border border-slate-700 rounded text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-primary disabled:opacity-50" className="w-full px-3 py-2.5 bg-slate-800 border border-slate-700 rounded text-white placeholder:text-muted focus:outline-none focus:ring-2 focus:ring-primary disabled:opacity-50"
disabled={loading} disabled={loading}
onKeyDown={(e) => { onKeyDown={(e) => {
if (e.key === 'Enter' && canConfirm && !loading) { if (e.key === 'Enter' && canConfirm && !loading) {
@@ -138,7 +138,7 @@ export default function ConfirmationModal({
<button <button
onClick={onCancel} onClick={onCancel}
disabled={loading} disabled={loading}
className="flex-1 px-4 py-2.5 text-slate-300 bg-slate-800 border border-slate-700 rounded font-semibold hover:bg-slate-700 cursor-pointer transition-colors disabled:opacity-50 disabled:cursor-not-allowed focus:ring-2 focus:ring-primary focus:outline-none" className="flex-1 px-4 py-2.5 text-secondary bg-slate-800 border border-slate-700 rounded font-semibold hover:bg-slate-700 cursor-pointer transition-colors disabled:opacity-50 disabled:cursor-not-allowed focus:ring-2 focus:ring-primary focus:outline-none"
> >
Cancel Cancel
</button> </button>

12
frontend/components/CreateUserModal.tsx
View File

@@ -77,7 +77,7 @@ export default function CreateUserModal({ show, onClose, onUserCreated }: Create
<h2 className="text-lg font-black text-white">Create User</h2> <h2 className="text-lg font-black text-white">Create User</h2>
<button <button
onClick={onClose} onClick={onClose}
className="p-1 text-muted hover:text-slate-300 rounded focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none" className="p-1 text-muted hover:text-secondary rounded focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
aria-label="Close" aria-label="Close"
> >
<X size={20} /> <X size={20} />
@@ -88,7 +88,7 @@ export default function CreateUserModal({ show, onClose, onUserCreated }: Create
<form onSubmit={handleSubmit} className="p-6 space-y-4"> <form onSubmit={handleSubmit} className="p-6 space-y-4">
{/* Username Field */} {/* Username Field */}
<div> <div>
<label htmlFor="username" className="block text-sm font-semibold text-slate-300 mb-2"> <label htmlFor="username" className="block text-sm font-semibold text-secondary mb-2">
Username Username
</label> </label>
<input <input
@@ -101,7 +101,7 @@ export default function CreateUserModal({ show, onClose, onUserCreated }: Create
if (errors.username) setErrors({ ...errors, username: undefined }); if (errors.username) setErrors({ ...errors, username: undefined });
}} }}
placeholder="Enter username" placeholder="Enter username"
className={`w-full px-3 py-2.5 bg-slate-800 border rounded text-white placeholder-slate-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary ${ className={`w-full px-3 py-2.5 bg-slate-800 border rounded text-white placeholder:text-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-primary ${
errors.username ? 'border-red-500' : 'border-slate-700' errors.username ? 'border-red-500' : 'border-slate-700'
}`} }`}
disabled={loading} disabled={loading}
@@ -113,7 +113,7 @@ export default function CreateUserModal({ show, onClose, onUserCreated }: Create
{/* Password Field */} {/* Password Field */}
<div> <div>
<label htmlFor="password" className="block text-sm font-semibold text-slate-300 mb-2"> <label htmlFor="password" className="block text-sm font-semibold text-secondary mb-2">
Password Password
</label> </label>
<input <input
@@ -126,7 +126,7 @@ export default function CreateUserModal({ show, onClose, onUserCreated }: Create
if (errors.password) setErrors({ ...errors, password: undefined }); if (errors.password) setErrors({ ...errors, password: undefined });
}} }}
placeholder="Enter password" placeholder="Enter password"
className={`w-full px-3 py-2.5 bg-slate-800 border rounded text-white placeholder-slate-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary ${ className={`w-full px-3 py-2.5 bg-slate-800 border rounded text-white placeholder:text-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-primary ${
errors.password ? 'border-red-500' : 'border-slate-700' errors.password ? 'border-red-500' : 'border-slate-700'
}`} }`}
disabled={loading} disabled={loading}
@@ -142,7 +142,7 @@ export default function CreateUserModal({ show, onClose, onUserCreated }: Create
type="button" type="button"
onClick={onClose} onClick={onClose}
disabled={loading} disabled={loading}
className="flex-1 px-4 py-2.5 text-slate-300 bg-slate-800 border border-slate-700 rounded font-semibold hover:bg-slate-700 transition-colors disabled:opacity-50 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none" className="flex-1 px-4 py-2.5 text-secondary bg-slate-800 border border-slate-700 rounded font-semibold hover:bg-slate-700 transition-colors disabled:opacity-50 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
> >
Cancel Cancel
</button> </button>

6
frontend/components/ItemComparisonModal.tsx
View File

@@ -72,7 +72,7 @@ export default function ItemComparisonModal({
different ? 'bg-amber-500/10 border border-amber-500/20' : 'bg-slate-800/30' different ? 'bg-amber-500/10 border border-amber-500/20' : 'bg-slate-800/30'
}`} }`}
> >
<div className="text-sm font-bold text-slate-300">{field.label}</div> <div className="text-sm font-bold text-secondary">{field.label}</div>
<div className={`text-sm font-mono ${different ? 'text-amber-200' : 'text-secondary'}`}> <div className={`text-sm font-mono ${different ? 'text-amber-200' : 'text-secondary'}`}>
{existing} {existing}
</div> </div>
@@ -86,7 +86,7 @@ export default function ItemComparisonModal({
{!hasChanges && ( {!hasChanges && (
<div className="p-4 bg-slate-800/50 rounded-xl mb-6 border border-slate-700"> <div className="p-4 bg-slate-800/50 rounded-xl mb-6 border border-slate-700">
<p className="text-sm text-slate-300">✓ Items are identical. No update needed.</p> <p className="text-sm text-secondary">✓ Items are identical. No update needed.</p>
</div> </div>
)} )}
@@ -96,7 +96,7 @@ export default function ItemComparisonModal({
onClick={onSkip} onClick={onSkip}
disabled={loading} disabled={loading}
aria-label="Skip this item comparison" aria-label="Skip this item comparison"
className="flex-1 flex items-center justify-center gap-2 py-4 bg-slate-800 hover:bg-slate-700 text-slate-200 rounded-2xl text-sm font-black cursor-pointer transition-all active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed border border-slate-700 focus:ring-2 focus:ring-blue-500 focus:outline-none" className="flex-1 flex items-center justify-center gap-2 py-4 bg-slate-800 hover:bg-slate-700 text-secondary rounded-2xl text-sm font-black cursor-pointer transition-all active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed border border-slate-700 focus:ring-2 focus:ring-blue-500 focus:outline-none"
> >
<SkipForward size={16} /> Skip <SkipForward size={16} /> Skip
</button> </button>

2
frontend/components/LogsOverlay.tsx
View File

@@ -48,7 +48,7 @@ export default function LogsOverlay({ show, onClose, logs, inventory }: LogsOver
<span className="text-xs font-black text-secondary">{log.username || 'System'}</span> <span className="text-xs font-black text-secondary">{log.username || 'System'}</span>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="text-sm font-bold text-slate-200"> <span className="text-sm font-bold text-secondary">
{inventory.find(i => i.id === log.target_item_id)?.name || `Item #${log.target_item_id}`} {inventory.find(i => i.id === log.target_item_id)?.name || `Item #${log.target_item_id}`}
</span> </span>
</div> </div>