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

remove: eliminate all uppercase text-transform classes for readability

Browse Source 
- Removed 74 instances of 'uppercase' Tailwind class
- Removed uppercase from card-subtitle utility in globals.css
- All UI text now displays in natural sentence/mixed case
- Maintains letter-spacing (tracking-widest) for hierarchy

This improves readability and accessibility.
This commit is contained in:
Daniel Bedeleanu
2026-04-17 13:20:11 +03:00
parent 9611b991b6
commit 57ca8b353b
4 changed files with 32 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/app/globals.css
View File

@@ -61,7 +61,7 @@ h1, h2, h3, h4, h5, h6 {
} }
.card-subtitle { .card-subtitle {
@apply text-[10px] font-bold text-slate-500 uppercase tracking-[0.08em] mt-0.5; @apply text-[10px] font-bold text-slate-500 tracking-[0.08em] mt-0.5;
} }
} }

36
frontend/app/inventory/page.tsx
View File

@@ -254,7 +254,7 @@ export default function InventoryPage() {
</div> </div>
<div> <div>
<h1 className="text-2xl md:text-3xl font-black tracking-tight text-white leading-tight">Inventory Catalog</h1> <h1 className="text-2xl md:text-3xl font-black tracking-tight text-white leading-tight">Inventory Catalog</h1>
<p className="text-xs md:text-sm text-secondary font-bold mt-1 uppercase tracking-widest">Enterprise Stock Overview</p> <p className="text-xs md:text-sm text-secondary font-bold mt-1 tracking-widest">Enterprise Stock Overview</p>
</div> </div>
<button <button
onClick={() => setShowBoxManager(true)} onClick={() => setShowBoxManager(true)}
@@ -365,7 +365,7 @@ export default function InventoryPage() {
)}> )}>
{item.quantity} {item.quantity}
</span> </span>
<p className="text-sm text-muted font-bold uppercase tracking-tight">Stock</p> <p className="text-sm text-muted font-bold tracking-tight">Stock</p>
</div> </div>
</div> </div>
))} ))}
@@ -391,7 +391,7 @@ export default function InventoryPage() {
<h3 className="text-xl font-black tracking-tight flex items-center gap-2"> <h3 className="text-xl font-black tracking-tight flex items-center gap-2">
{isEditing ? "Edit Item" : selectedItem.name} {isEditing ? "Edit Item" : selectedItem.name}
{!isEditing && ( {!isEditing && (
<span className="text-xs bg-slate-800 text-slate-300 px-3 py-1 rounded-lg font-bold uppercase tracking-tight"> <span className="text-xs bg-slate-800 text-slate-300 px-3 py-1 rounded-lg font-bold tracking-tight">
In Stock: {selectedItem.quantity} In Stock: {selectedItem.quantity}
</span> </span>
)} )}
@@ -432,7 +432,7 @@ export default function InventoryPage() {
{isEditing ? ( {isEditing ? (
<div className="max-h-[60vh] overflow-y-auto pr-2 space-y-4 mb-6 scrollbar-hide"> <div className="max-h-[60vh] overflow-y-auto pr-2 space-y-4 mb-6 scrollbar-hide">
<div> <div>
<label className="text-sm font-bold text-secondary ml-1 uppercase tracking-tight">Item Name</label> <label className="text-sm font-bold text-secondary ml-1 tracking-tight">Item Name</label>
<input <input
type="text" type="text"
value={editedItem.name || ''} value={editedItem.name || ''}
@@ -441,17 +441,17 @@ export default function InventoryPage() {
/> />
</div> </div>
<div> <div>
<label className="text-sm font-bold text-secondary ml-1 uppercase tracking-tight">Part Number</label> <label className="text-sm font-bold text-secondary ml-1 tracking-tight">Part Number</label>
<input <input
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-bold outline-none text-slate-100 placeholder:text-slate-700 uppercase" className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm font-bold outline-none text-slate-100 placeholder:text-slate-700"
/> />
</div> </div>
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<div> <div>
<label className="text-sm font-bold text-secondary ml-1 uppercase tracking-tight">Category</label> <label className="text-sm font-bold text-secondary ml-1 tracking-tight">Category</label>
<input <input
type="text" type="text"
list="existing-categories" list="existing-categories"
@@ -467,7 +467,7 @@ export default function InventoryPage() {
</datalist> </datalist>
</div> </div>
<div> <div>
<label className="text-sm font-bold text-secondary ml-1 uppercase tracking-tight">Item Type</label> <label className="text-sm font-bold text-secondary ml-1 tracking-tight">Item Type</label>
<input <input
type="text" type="text"
list="existing-types" list="existing-types"
@@ -477,7 +477,7 @@ export default function InventoryPage() {
/> />
</div> </div>
<div> <div>
<label className="text-sm font-bold text-secondary ml-1 uppercase tracking-tight">Connector</label> <label className="text-sm font-bold text-secondary ml-1 tracking-tight">Connector</label>
<input <input
type="text" type="text"
value={editedItem.connector || ''} value={editedItem.connector || ''}
@@ -487,7 +487,7 @@ export default function InventoryPage() {
/> />
</div> </div>
<div> <div>
<label className="text-sm font-bold text-secondary ml-1 uppercase tracking-tight">Size / Length</label> <label className="text-sm font-bold text-secondary ml-1 tracking-tight">Size / Length</label>
<input <input
type="text" type="text"
value={editedItem.size || ''} value={editedItem.size || ''}
@@ -497,7 +497,7 @@ export default function InventoryPage() {
/> />
</div> </div>
<div className="col-span-2"> <div className="col-span-2">
<label className="text-sm font-bold text-secondary ml-1 uppercase tracking-tight">Item Color</label> <label className="text-sm font-bold text-secondary ml-1 tracking-tight">Item Color</label>
<input <input
type="text" type="text"
value={editedItem.color || ''} value={editedItem.color || ''}
@@ -507,7 +507,7 @@ export default function InventoryPage() {
/> />
</div> </div>
<div className="col-span-2"> <div className="col-span-2">
<label className="text-sm font-bold text-secondary ml-1 uppercase tracking-tight">Box / Container Label</label> <label className="text-sm font-bold text-secondary ml-1 tracking-tight">Box / Container Label</label>
<div className="relative flex items-center"> <div className="relative flex items-center">
<input <input
type="text" type="text"
@@ -535,7 +535,7 @@ export default function InventoryPage() {
</div> </div>
</div> </div>
<div> <div>
<label className="text-sm font-bold text-secondary ml-1 uppercase tracking-tight">Specs / Comments</label> <label className="text-sm font-bold text-secondary ml-1 tracking-tight">Specs / Comments</label>
<textarea <textarea
value={editedItem.specs || ''} value={editedItem.specs || ''}
onChange={e => setEditedItem({...editedItem, specs: e.target.value})} onChange={e => setEditedItem({...editedItem, specs: e.target.value})}
@@ -543,7 +543,7 @@ export default function InventoryPage() {
/> />
</div> </div>
<div> <div>
<label className="text-sm font-bold text-secondary ml-1 uppercase tracking-tight">OCR Matching Key</label> <label className="text-sm font-bold text-secondary ml-1 tracking-tight">OCR Matching Key</label>
<textarea <textarea
value={editedItem.ocr_text || ''} value={editedItem.ocr_text || ''}
onChange={e => setEditedItem({...editedItem, ocr_text: e.target.value})} onChange={e => setEditedItem({...editedItem, ocr_text: e.target.value})}
@@ -568,7 +568,7 @@ export default function InventoryPage() {
)} )}
> >
<t.icon size={20} className={adjustType === t.id ? t.color : ""} /> <t.icon size={20} className={adjustType === t.id ? t.color : ""} />
<span className="text-sm font-bold mt-1.5 uppercase tracking-tight">{t.label}</span> <span className="text-sm font-bold mt-1.5 tracking-tight">{t.label}</span>
</button> </button>
))} ))}
</div> </div>
@@ -642,7 +642,7 @@ export default function InventoryPage() {
<div className="space-y-4"> <div className="space-y-4">
<div> <div>
<label className="text-sm font-bold text-secondary ml-1 uppercase tracking-tight">Name</label> <label className="text-sm font-bold text-secondary ml-1 tracking-tight">Name</label>
<input <input
type="text" type="text"
value={catEditedName} value={catEditedName}
@@ -651,7 +651,7 @@ export default function InventoryPage() {
/> />
</div> </div>
<div> <div>
<label className="text-sm font-bold text-secondary ml-1 uppercase tracking-tight">Description</label> <label className="text-sm font-bold text-secondary ml-1 tracking-tight">Description</label>
<textarea <textarea
value={catEditedDesc} value={catEditedDesc}
onChange={e => setCatEditedDesc(e.target.value)} onChange={e => setCatEditedDesc(e.target.value)}
@@ -770,7 +770,7 @@ export default function InventoryPage() {
<div className="w-full max-w-md flex flex-col gap-6"> <div className="w-full max-w-md flex flex-col gap-6">
<div id="print-label-area" className="w-full bg-white p-8 rounded-lg shadow-2xl flex flex-col items-center gap-6"> <div id="print-label-area" className="w-full bg-white p-8 rounded-lg shadow-2xl flex flex-col items-center gap-6">
<h2 className="text-2xl font-black text-black tracking-tighter text-center uppercase"> <h2 className="text-2xl font-black text-black tracking-tighter text-center">
{selectedBoxLabel} {selectedBoxLabel}
</h2> </h2>

24
frontend/app/logs/page.tsx
View File

@@ -95,7 +95,7 @@ export default function LogsPage() {
</div> </div>
<div> <div>
<h1 className="text-2xl md:text-3xl font-black tracking-tight text-white leading-tight">Operations Audit</h1> <h1 className="text-2xl md:text-3xl font-black tracking-tight text-white leading-tight">Operations Audit</h1>
<p className="text-xs md:text-sm text-secondary font-bold uppercase tracking-widest mt-0.5">Real-time Intervention Tracking</p> <p className="text-xs md:text-sm text-secondary font-bold tracking-widest mt-0.5">Real-time Intervention Tracking</p>
</div> </div>
</div> </div>
@@ -153,7 +153,7 @@ export default function LogsPage() {
<button <button
onClick={() => setFilterAction('ALL')} onClick={() => setFilterAction('ALL')}
className={cn( className={cn(
"px-5 py-2 rounded-full text-xs font-bold transition-all whitespace-nowrap border uppercase tracking-widest", "px-5 py-2 rounded-full text-xs font-bold transition-all whitespace-nowrap border tracking-widest",
filterAction === 'ALL' filterAction === 'ALL'
? "bg-white text-slate-950 border-white shadow-xl shadow-white/10" ? "bg-white text-slate-950 border-white shadow-xl shadow-white/10"
: "bg-surface/70 text-secondary border-slate-800 hover:border-slate-700" : "bg-surface/70 text-secondary border-slate-800 hover:border-slate-700"
@@ -166,7 +166,7 @@ export default function LogsPage() {
key={f} key={f}
onClick={() => setFilterAction(f)} onClick={() => setFilterAction(f)}
className={cn( className={cn(
"px-5 py-2 rounded-full text-xs font-bold transition-all whitespace-nowrap border uppercase tracking-widest", "px-5 py-2 rounded-full text-xs font-bold transition-all whitespace-nowrap border tracking-widest",
filterAction === f filterAction === f
? "bg-primary text-white border-primary shadow-xl shadow-primary/10" ? "bg-primary text-white border-primary shadow-xl shadow-primary/10"
: "bg-surface/70 text-secondary border-slate-800 hover:border-slate-700" : "bg-surface/70 text-secondary border-slate-800 hover:border-slate-700"
@@ -182,7 +182,7 @@ export default function LogsPage() {
{loading ? ( {loading ? (
<div className="flex flex-col items-center justify-center py-32 text-secondary gap-4 animate-pulse"> <div className="flex flex-col items-center justify-center py-32 text-secondary gap-4 animate-pulse">
<div className="w-10 h-10 border-4 border-primary/20 border-t-primary rounded-full animate-spin" /> <div className="w-10 h-10 border-4 border-primary/20 border-t-primary rounded-full animate-spin" />
<p className="text-xs font-black tracking-widest uppercase italic">Securing Audit Stream...</p> <p className="text-xs font-black tracking-widest italic">Securing Audit Stream...</p>
</div> </div>
) : filteredLogs.length === 0 ? ( ) : filteredLogs.length === 0 ? (
<div className="bg-surface/20 border border-slate-800/50 border-dashed rounded-[2.5rem] py-20 flex flex-col items-center justify-center text-center gap-6"> <div className="bg-surface/20 border border-slate-800/50 border-dashed rounded-[2.5rem] py-20 flex flex-col items-center justify-center text-center gap-6">
@@ -205,7 +205,7 @@ export default function LogsPage() {
<div className="flex-1 min-w-0 z-10 flex items-center gap-4"> <div className="flex-1 min-w-0 z-10 flex items-center gap-4">
{/* Compact Action Badge */} {/* Compact Action Badge */}
<div className={cn( <div className={cn(
"text-[10px] font-black px-3 py-1.5 rounded-lg border min-w-[85px] text-center uppercase tracking-tight", "text-[10px] font-black px-3 py-1.5 rounded-lg border min-w-[85px] text-center tracking-tight",
log.action.includes('CHECK_IN') ? "bg-green-500/10 text-green-500 border-green-500/20" : log.action.includes('CHECK_IN') ? "bg-green-500/10 text-green-500 border-green-500/20" :
(log.action.includes('TRASH') ? "bg-rose-500/10 text-rose-500 border-rose-500/20" : (log.action.includes('TRASH') ? "bg-rose-500/10 text-rose-500 border-rose-500/20" :
(log.action.includes('DB') ? "bg-sky-500/10 text-sky-400 border-sky-500/20" : (log.action.includes('DB') ? "bg-sky-500/10 text-sky-400 border-sky-500/20" :
@@ -250,7 +250,7 @@ export default function LogsPage() {
<div className="flex justify-between items-start"> <div className="flex justify-between items-start">
<div className="space-y-1 pr-4"> <div className="space-y-1 pr-4">
<div className={cn( <div className={cn(
"text-xs font-bold px-4 py-1.5 rounded-full border inline-block uppercase tracking-widest", "text-xs font-bold px-4 py-1.5 rounded-full border inline-block tracking-widest",
selectedLog.action.includes('CHECK_IN') ? "bg-green-500/10 text-green-500 border-green-500/30" : selectedLog.action.includes('CHECK_IN') ? "bg-green-500/10 text-green-500 border-green-500/30" :
(selectedLog.action.includes('TRASH') ? "bg-rose-500/10 text-rose-500 border-rose-500/30" : "bg-primary/10 text-primary border-primary/30") (selectedLog.action.includes('TRASH') ? "bg-rose-500/10 text-rose-500 border-rose-500/30" : "bg-primary/10 text-primary border-primary/30")
)}> )}>
@@ -267,11 +267,11 @@ export default function LogsPage() {
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<div className="space-y-1 bg-background/50 p-4 rounded-2xl border border-slate-800/50"> <div className="space-y-1 bg-background/50 p-4 rounded-2xl border border-slate-800/50">
<p className="text-[11px] font-bold text-muted uppercase tracking-widest">Protocol Operator</p> <p className="text-[11px] font-bold text-muted tracking-widest">Protocol Operator</p>
<p className="text-sm font-black text-slate-200">{selectedLog.username || 'Automated Process'}</p> <p className="text-sm font-black text-slate-200">{selectedLog.username || 'Automated Process'}</p>
</div> </div>
<div className="space-y-1 bg-background/50 p-4 rounded-2xl border border-slate-800/50"> <div className="space-y-1 bg-background/50 p-4 rounded-2xl border border-slate-800/50">
<p className="text-[11px] font-bold text-muted uppercase tracking-widest">Quantity Delta</p> <p className="text-[11px] font-bold text-muted tracking-widest">Quantity Delta</p>
<p className={cn( <p className={cn(
"text-xl font-black tabular-nums", "text-xl font-black tabular-nums",
(selectedLog.quantity_change || 0) > 0 ? "text-green-500" : "text-rose-500" (selectedLog.quantity_change || 0) > 0 ? "text-green-500" : "text-rose-500"
@@ -285,7 +285,7 @@ export default function LogsPage() {
<div className="space-y-5"> <div className="space-y-5">
<div className="space-y-1"> <div className="space-y-1">
<p className="text-[11px] font-bold text-muted uppercase tracking-widest ml-1">Universal Timestamp</p> <p className="text-[11px] font-bold text-muted tracking-widest ml-1">Universal Timestamp</p>
<p className="text-xs font-bold text-secondary bg-background/30 p-4 rounded-2xl border border-slate-800/30 tabular-nums"> <p className="text-xs font-bold text-secondary bg-background/30 p-4 rounded-2xl border border-slate-800/30 tabular-nums">
{new Date(selectedLog.timestamp).toLocaleString(undefined, { dateStyle: 'full', timeStyle: 'medium' })} {new Date(selectedLog.timestamp).toLocaleString(undefined, { dateStyle: 'full', timeStyle: 'medium' })}
</p> </p>
@@ -298,14 +298,14 @@ export default function LogsPage() {
<div className="space-y-4 pt-2"> <div className="space-y-4 pt-2">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="h-px flex-1 bg-slate-800/50" /> <div className="h-px flex-1 bg-slate-800/50" />
<p className="text-[8px] font-black text-slate-700 uppercase tracking-[0.2em]">Snapshot Record</p> <p className="text-[8px] font-black text-slate-700 tracking-[0.2em]">Snapshot Record</p>
<div className="h-px flex-1 bg-slate-800/50" /> <div className="h-px flex-1 bg-slate-800/50" />
</div> </div>
<div className="grid grid-cols-2 gap-2.5"> <div className="grid grid-cols-2 gap-2.5">
{Object.entries(snap).map(([key, val]) => ( {Object.entries(snap).map(([key, val]) => (
(val && key !== 'image_url' && key !== 'id') ? ( (val && key !== 'image_url' && key !== 'id') ? (
<div key={key} className="bg-background/20 p-3 rounded-xl border border-slate-800/20"> <div key={key} className="bg-background/20 p-3 rounded-xl border border-slate-800/20">
<p className="text-[10px] font-bold text-muted uppercase mb-1 tracking-tight opacity-70">{key.replace('_', ' ')}</p> <p className="text-[10px] font-bold text-muted mb-1 tracking-tight opacity-70">{key.replace('_', ' ')}</p>
<p className="text-xs font-bold text-slate-300 truncate" title={String(val)}>{String(val)}</p> <p className="text-xs font-bold text-slate-300 truncate" title={String(val)}>{String(val)}</p>
</div> </div>
) : null ) : null
@@ -318,7 +318,7 @@ export default function LogsPage() {
{selectedLog.details && ( {selectedLog.details && (
<div className="space-y-1.5"> <div className="space-y-1.5">
<p className="text-[11px] font-bold text-muted uppercase tracking-widest ml-1">Intervention Details</p> <p className="text-[11px] font-bold text-muted tracking-widest ml-1">Intervention Details</p>
<div className="bg-primary/5 text-primary/80 p-5 rounded-3xl border border-primary/10 text-sm font-medium leading-relaxed italic shadow-inner"> <div className="bg-primary/5 text-primary/80 p-5 rounded-3xl border border-primary/10 text-sm font-medium leading-relaxed italic shadow-inner">
"{selectedLog.details}" "{selectedLog.details}"
</div> </div>

2
frontend/public/sw.js
View File

File diff suppressed because one or more lines are too long