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

style: step 2-3 - uniform text tokens in login+main page, fix tsconfig build exclusions

Browse Source
This commit is contained in:
Daniel Bedeleanu
2026-04-19 11:46:44 +03:00
parent 80ec2dc2b0
commit ffb56c030d
4 changed files with 17 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -48,8 +48,8 @@ The design tokens already exist in `frontend/tailwind.config.ts`. Use these and
Mark each step `[x]` when complete. Commit the file with the step. Mark each step `[x]` when complete. Commit the file with the step.
- [x] **Step 1** — Audit & document all violations (no code changes) - [x] **Step 1** — Audit & document all violations (no code changes)
- [ ] **Step 2** — Fix: `app/login/page.tsx` text tokens - [x] **Step 2** — Fix: `app/login/page.tsx` text tokens (no violations found — already clean)
- [ ] **Step 3** — Fix: `app/page.tsx` text tokens (scanner/main page) - [x] **Step 3** — Fix: `app/page.tsx` text tokens (scanner/main page)
- [ ] **Step 4** — Fix: `app/inventory/page.tsx` text tokens - [ ] **Step 4** — Fix: `app/inventory/page.tsx` text tokens
- [ ] **Step 5** — Fix: `app/admin/page.tsx` + `app/logs/page.tsx` text tokens - [ ] **Step 5** — Fix: `app/admin/page.tsx` + `app/logs/page.tsx` text tokens
- [ ] **Step 6** — Fix: `components/AdminOverlay.tsx` text tokens - [ ] **Step 6** — Fix: `components/AdminOverlay.tsx` text tokens

22
frontend/app/page.tsx
View File

@@ -596,7 +596,7 @@ export default function Home() {
onClick={() => setMode(m.id as any)} onClick={() => setMode(m.id as any)}
className={cn( className={cn(
"flex-1 py-3.5 rounded-xl text-xs sm:text-sm font-black transition-all flex items-center justify-center gap-3", "flex-1 py-3.5 rounded-xl text-xs sm:text-sm font-black transition-all flex items-center justify-center gap-3",
mode === m.id ? "bg-slate-800 text-primary shadow-lg ring-1 ring-primary/20" : "text-muted hover:text-slate-300" mode === m.id ? "bg-slate-800 text-primary shadow-lg ring-1 ring-primary/20" : "text-muted hover:text-secondary"
)} )}
> >
<m.icon size={18} className={mode === m.id ? "scale-110 transition-transform" : ""} /> <m.icon size={18} className={mode === m.id ? "scale-110 transition-transform" : ""} />
@@ -722,7 +722,7 @@ export default function Home() {
<textarea <textarea
value={editedItem.name || ''} value={editedItem.name || ''}
onChange={(e) => setEditedItem({ ...editedItem, name: e.target.value })} onChange={(e) => setEditedItem({ ...editedItem, name: 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>
@@ -733,7 +733,7 @@ export default function Home() {
type="text" type="text"
value={editedItem.part_number || ''} value={editedItem.part_number || ''}
onChange={e => setEditedItem({ ...editedItem, part_number: e.target.value })} onChange={e => setEditedItem({ ...editedItem, part_number: e.target.value })}
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm font-mono outline-none text-slate-100" className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm font-mono outline-none text-secondary"
placeholder="e.g. PN-12345" placeholder="e.g. PN-12345"
/> />
</div> </div>
@@ -745,7 +745,7 @@ export default function Home() {
list="existing-categories" list="existing-categories"
value={editedItem.category || ''} value={editedItem.category || ''}
onChange={e => setEditedItem({ ...editedItem, category: e.target.value })} onChange={e => setEditedItem({ ...editedItem, category: e.target.value })}
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-slate-100 placeholder:text-slate-700" className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-secondary placeholder:text-muted"
placeholder="e.g. storage" placeholder="e.g. storage"
/> />
<datalist id="existing-categories"> <datalist id="existing-categories">
@@ -761,7 +761,7 @@ export default function Home() {
list="existing-types" list="existing-types"
value={editedItem.type || ''} value={editedItem.type || ''}
onChange={e => setEditedItem({...editedItem, type: e.target.value})} onChange={e => setEditedItem({...editedItem, type: e.target.value})}
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-slate-100" className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-secondary"
placeholder="e.g. spare parts" placeholder="e.g. spare parts"
/> />
</div> </div>
@@ -773,7 +773,7 @@ export default function Home() {
list="existing-boxes" list="existing-boxes"
value={editedItem.box_label || ''} value={editedItem.box_label || ''}
onChange={e => setEditedItem({...editedItem, box_label: e.target.value})} onChange={e => setEditedItem({...editedItem, box_label: e.target.value})}
className="w-full bg-background border border-slate-800 rounded-xl py-3 pl-4 pr-12 text-sm outline-none text-slate-100 placeholder:text-slate-700 focus:border-primary transition-colors" className="w-full bg-background border border-slate-800 rounded-xl py-3 pl-4 pr-12 text-sm outline-none text-secondary placeholder:text-muted focus:border-primary transition-colors"
placeholder="e.g. SFPs 40G Cisco" placeholder="e.g. SFPs 40G Cisco"
/> />
<button <button
@@ -798,7 +798,7 @@ export default function Home() {
type="text" type="text"
value={editedItem.connector || ''} value={editedItem.connector || ''}
onChange={e => setEditedItem({...editedItem, connector: e.target.value})} onChange={e => setEditedItem({...editedItem, connector: e.target.value})}
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-slate-100" className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-secondary"
placeholder="e.g. LC/UPC" placeholder="e.g. LC/UPC"
/> />
</div> </div>
@@ -808,7 +808,7 @@ export default function Home() {
type="text" type="text"
value={editedItem.size || ''} value={editedItem.size || ''}
onChange={e => setEditedItem({...editedItem, size: e.target.value})} onChange={e => setEditedItem({...editedItem, size: e.target.value})}
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-slate-100" className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-secondary"
placeholder="e.g. 5m / 1600GB" placeholder="e.g. 5m / 1600GB"
/> />
</div> </div>
@@ -818,7 +818,7 @@ export default function Home() {
type="text" type="text"
value={editedItem.color || ''} value={editedItem.color || ''}
onChange={e => setEditedItem({...editedItem, color: e.target.value})} onChange={e => setEditedItem({...editedItem, color: e.target.value})}
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-slate-100" className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-secondary"
placeholder="e.g. Black" placeholder="e.g. Black"
/> />
</div> </div>
@@ -827,7 +827,7 @@ export default function Home() {
<textarea <textarea
value={editedItem.description || ''} value={editedItem.description || ''}
onChange={e => setEditedItem({ ...editedItem, description: e.target.value })} onChange={e => setEditedItem({ ...editedItem, description: e.target.value })}
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-slate-100 resize-none h-20" className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-secondary resize-none h-20"
placeholder="Item description..." placeholder="Item description..."
/> />
</div> </div>
@@ -894,7 +894,7 @@ export default function Home() {
<select <select
value={trashReason} value={trashReason}
onChange={(e) => setTrashReason(e.target.value)} onChange={(e) => setTrashReason(e.target.value)}
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-slate-300" className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-secondary"
> >
<option>Damaged</option> <option>Damaged</option>
<option>Expired</option> <option>Expired</option>

6
frontend/e2e/utils/helpers.ts
View File

@@ -72,7 +72,7 @@ export async function clickAndWait(
*/ */
export async function getText(page: Page, selector: string): Promise<string> { export async function getText(page: Page, selector: string): Promise<string> {
const locator = page.locator(selector); const locator = page.locator(selector);
return locator.textContent() || ''; return (await locator.textContent()) ?? '';
} }
/** /**
@@ -285,7 +285,7 @@ export async function getLocalStorage(page: Page, key: string): Promise<string |
* Set localStorage data * Set localStorage data
*/ */
export async function setLocalStorage(page: Page, key: string, value: string): Promise<void> { export async function setLocalStorage(page: Page, key: string, value: string): Promise<void> {
await page.evaluate((k, v) => localStorage.setItem(k, v), key, value); await page.evaluate(({ k, v }: { k: string; v: string }) => localStorage.setItem(k, v), { k: key, v: value });
} }
/** /**
@@ -331,7 +331,7 @@ export async function mockApiResponse(
route.continue(); route.continue();
}); });
await page.on('route', (route) => { page.on('route', (route) => {
if (route.request().url().match(urlPattern)) { if (route.request().url().match(urlPattern)) {
route.respond({ route.respond({
status, status,

2
frontend/tsconfig.json
View File

@@ -24,5 +24,5 @@
"types": ["node", "react", "react-dom"] "types": ["node", "react", "react-dom"]
}, },
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"] "exclude": ["node_modules", "e2e", "tests", "vitest.config.ts", "playwright.config.ts"]
} }