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

feat(ui): unify card typography across application

Browse Source
This commit is contained in:
Daniel Bedeleanu
2026-04-17 09:45:20 +03:00
parent 572422b677
commit ff86ec953e
6 changed files with 25 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/app/globals.css
View File

@@ -50,6 +50,14 @@ body {
.text-fluid-xl {
font-size: clamp(1.5rem, 5cqi, 2.25rem);
}
.card-title {
@apply text-base font-black text-slate-100 tracking-tight;
}
.card-subtitle {
@apply text-[10px] font-bold text-slate-500 uppercase tracking-[0.08em] mt-0.5;
}
}
/* Safe Area Insets for Modern Mobile Devices (iOS Notch/Home Bar) */

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

@@ -312,8 +312,8 @@ export default function InventoryPage() {
<Layers size={20} />
</div>
<div className="text-left">
<h3 className="font-bold text-lg">{cat}</h3>
<p className="text-xs font-bold text-slate-400 mt-1 uppercase tracking-tight">
<h3 className="card-title text-base sm:text-lg">{cat}</h3>
<p className="card-subtitle tracking-tight">
{inventory.filter(i => i.category === cat).length} Item types in stock
</p>
</div>
@@ -354,8 +354,8 @@ export default function InventoryPage() {
<Package size={14} />
</div>
<div className="truncate">
<h4 className="font-bold text-slate-200 truncate">{item.name}</h4>
<p className="text-xs text-slate-400 truncate mt-1">{item.specs}</p>
<h4 className="card-title truncate">{item.name}</h4>
<p className="card-subtitle mt-0 lowercase opacity-80 truncate">{item.specs}</p>
</div>
</div>
<div className="text-right shrink-0">

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

@@ -216,13 +216,13 @@ export default function LogsPage() {
</div>
<div className="flex-1 min-w-0">
<h3 className="text-base font-bold text-slate-100 group-hover:text-primary transition-colors truncate">
<h3 className="card-title group-hover:text-primary transition-colors truncate">
{log.resolved_name}
</h3>
<div className="flex items-center gap-2 mt-0.5">
<span className="text-[11px] font-bold text-slate-400 uppercase tracking-tight shrink-0">{log.username || 'System'}</span>
<span className="w-1 h-1 rounded-full bg-slate-800 shrink-0" />
<span className="text-[11px] text-slate-400 font-medium tabular-nums truncate">
<div className="flex items-center gap-2">
<span className="card-subtitle mt-0 shrink-0">{log.username || 'System'}</span>
<span className="w-1 h-1 rounded-full bg-slate-800 shrink-0 mt-1" />
<span className="card-subtitle mt-0 lowercase opacity-80 truncate">
{new Date(log.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} · {new Date(log.timestamp).toLocaleDateString()}
</span>
</div>

4
frontend/components/admin/CategoryManager.tsx
View File

@@ -43,8 +43,8 @@ export default function CategoryManager({
{categories.map(cat => (
<div key={cat.id} className="p-4 bg-slate-950/40 border border-slate-800/50 rounded-2xl flex items-center justify-between group hover:border-primary/40 transition-all">
<div className="min-w-0 pr-4">
<p className="text-sm font-bold text-slate-200 group-hover:text-primary transition-colors">{cat.name}</p>
<p className="text-xs text-slate-500 font-medium mt-0.5">{cat.description || 'General storage'}</p>
<p className="card-title group-hover:text-primary transition-colors">{cat.name}</p>
<p className="card-subtitle">{cat.description || 'General storage'}</p>
</div>
<div className="flex gap-1 shrink-0">
<button

4
frontend/components/admin/IdentityManager.tsx
View File

@@ -51,8 +51,8 @@ export default function IdentityManager({
{user.role === 'admin' ? <Shield size={16} /> : <User size={16} />}
</div>
<div className="min-w-0">
<p className="text-sm font-bold text-slate-200 truncate">{user.username}</p>
<p className="text-[11px] text-slate-400 font-bold tracking-tight capitalize">{user.role}</p>
<p className="card-title truncate">{user.username}</p>
<p className="card-subtitle">{user.role}</p>
</div>
</div>
<div className="flex items-center gap-1.5 ml-2">

8
frontend/components/admin/LdapManager.tsx
View File

@@ -37,8 +37,8 @@ export default function LdapManager({
<Power size={14} />
</div>
<div>
<p className="text-xs font-bold text-slate-200 tracking-tight leading-none">Ldap Authorization</p>
<p className={cn("text-[11px] font-bold mt-1.5", ldapConfig.ldap_enabled ? "text-green-500/80" : "text-slate-500")}>
<p className="card-title leading-none">Ldap Authorization</p>
<p className={cn("card-subtitle mt-1", ldapConfig.ldap_enabled ? "text-green-500/80" : "text-slate-500")}>
{ldapConfig.ldap_enabled ? "External Directory Active" : "Internal Authentication Only"}
</p>
</div>
@@ -124,8 +124,8 @@ export default function LdapManager({
<Lock size={14} />
</div>
<div>
<p className="text-xs font-bold text-slate-200 tracking-tight leading-none">Use Tls</p>
<p className={cn("text-[11px] font-bold mt-1.5", ldapConfig.use_tls ? "text-indigo-400/80" : "text-slate-500")}>
<p className="card-title leading-none">Use Tls</p>
<p className={cn("card-subtitle mt-1", ldapConfig.use_tls ? "text-indigo-400/80" : "text-slate-500")}>
{ldapConfig.use_tls ? "Encrypted Channel" : "Standard Link"}
</p>
</div>