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 8** — Fix: `components/Scanner.tsx` + `components/AIOnboarding.tsx`
- [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 12** — Final build verification + visual smoke check

12
frontend/components/CategoryCreationModal.tsx
View File

@@ -62,7 +62,7 @@ export default function CategoryCreationModal({
<button
onClick={onClose}
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"
>
<X size={20} />
@@ -71,7 +71,7 @@ export default function CategoryCreationModal({
<form onSubmit={handleSubmit} className="p-6 space-y-4">
<div>
<label className="text-sm font-black text-slate-300">Name</label>
<label className="text-sm font-black text-secondary">Name</label>
<input
type="text"
value={name}
@@ -80,20 +80,20 @@ export default function CategoryCreationModal({
setError(null);
}}
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}
autoFocus
/>
</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
type="text"
value={description}
onChange={(e) => setDescription(e.target.value)}
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}
/>
</div>
@@ -109,7 +109,7 @@ export default function CategoryCreationModal({
type="button"
onClick={onClose}
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
</button>

8
frontend/components/ConfirmationModal.tsx
View File

@@ -67,7 +67,7 @@ export default function ConfirmationModal({
<button
onClick={onCancel}
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"
>
<X size={20} />
@@ -77,7 +77,7 @@ export default function ConfirmationModal({
{/* Content */}
<div className="p-6 space-y-4">
{/* Description */}
<p className="text-sm text-slate-300">{description}</p>
<p className="text-sm text-secondary">{description}</p>
{/* Item Name (if provided) */}
{itemName && (
@@ -118,7 +118,7 @@ export default function ConfirmationModal({
setError(null);
}}
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}
onKeyDown={(e) => {
if (e.key === 'Enter' && canConfirm && !loading) {
@@ -138,7 +138,7 @@ export default function ConfirmationModal({
<button
onClick={onCancel}
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
</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>
<button
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"
>
<X size={20} />
@@ -88,7 +88,7 @@ export default function CreateUserModal({ show, onClose, onUserCreated }: Create
<form onSubmit={handleSubmit} className="p-6 space-y-4">
{/* Username Field */}
<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
</label>
<input
@@ -101,7 +101,7 @@ export default function CreateUserModal({ show, onClose, onUserCreated }: Create
if (errors.username) setErrors({ ...errors, username: undefined });
}}
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'
}`}
disabled={loading}
@@ -113,7 +113,7 @@ export default function CreateUserModal({ show, onClose, onUserCreated }: Create
{/* Password Field */}
<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
</label>
<input
@@ -126,7 +126,7 @@ export default function CreateUserModal({ show, onClose, onUserCreated }: Create
if (errors.password) setErrors({ ...errors, password: undefined });
}}
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'
}`}
disabled={loading}
@@ -142,7 +142,7 @@ export default function CreateUserModal({ show, onClose, onUserCreated }: Create
type="button"
onClick={onClose}
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
</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'
}`}
>
<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'}`}>
{existing}
</div>
@@ -86,7 +86,7 @@ export default function ItemComparisonModal({
{!hasChanges && (
<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>
)}
@@ -96,7 +96,7 @@ export default function ItemComparisonModal({
onClick={onSkip}
disabled={loading}
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
</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>
</div>
<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}`}
</span>
</div>