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

refactor(frontend): eliminate backdrop-blur throughout codebase

Browse Source 
Remove all instances of backdrop-blur effect (14+ occurrences) to simplify visual design
and eliminate signature 2023-2024 AI aesthetic tell. Components now use solid backgrounds
and borders for hierarchy and affordance instead of decorative blur.

Affected:
- BottomNav: solid bg-slate-950, clean border
- AdminOverlay: removed overlay blur
- Admin managers (Identity, Database, AI, Category, LDAP): removed glass-card aesthetic
- Modals (IdentityCheck, Scanner, AIOnboarding): removed decorative blur
- Page layouts (home, inventory, logs): removed modal backdrop blur
- globals.css: removed glass-card utility

Build: passes with zero errors. Bundle sizes unchanged.

Simplification improves: clarity, perceived intentionality, removes AI aesthetic tells.
This commit is contained in:
Daniel Bedeleanu
2026-04-17 10:26:39 +03:00
parent 89a69a3ec9
commit b6a48f1249
17 changed files with 88 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/app/globals.css
View File

@@ -36,13 +36,9 @@ body {
background: #334155; /* slate-700 */
}
/* Modern Utility for Premium Glassmorphism */
/* Removed: glass-card utility (eliminated glassmorphism aesthetic) */
@layer utilities {
.glass-card {
@apply bg-slate-900/40 backdrop-blur-xl border border-slate-800/50 shadow-2xl;
background-image: linear-gradient(135deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0) 100%);
}
.text-fluid-lg {
font-size: clamp(1.125rem, 3cqi, 1.5rem);
}

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

@@ -385,7 +385,7 @@ export default function InventoryPage() {
{/* Stock Adjustment / Edit Item Overlay */}
{selectedItem && (
<div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-0 sm:p-4 bg-slate-950/80 backdrop-blur-sm animate-in fade-in duration-200">
<div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-0 sm:p-4 bg-slate-950/80 animate-in fade-in duration-200">
<div className="w-full max-w-lg bg-slate-900 border-x border-t sm:border border-slate-800 rounded-t-[2.5rem] sm:rounded-[2.5rem] shadow-2xl p-5 sm:p-8 overflow-hidden animate-in slide-in-from-bottom-10 duration-300">
<div className="flex justify-between items-center mb-6">
<h3 className="text-xl font-black tracking-tight flex items-center gap-2">
@@ -631,7 +631,7 @@ export default function InventoryPage() {
{/* Category Edit Overlay */}
{editingCategory && (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/90 backdrop-blur-xl animate-in fade-in duration-300">
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/90 animate-in fade-in duration-300">
<div className="bg-slate-900 border border-slate-800 rounded-3xl p-8 max-w-sm w-full shadow-2xl space-y-6 animate-in zoom-in-95 duration-200">
<div className="flex justify-between items-center">
<h2 className="text-xl font-black">Edit Category</h2>
@@ -680,7 +680,7 @@ export default function InventoryPage() {
{/* Box Manager Modal */}
{showBoxManager && (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/90 backdrop-blur-md animate-in fade-in duration-300">
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/90 animate-in fade-in duration-300">
<div className="w-full max-w-2xl bg-slate-900 border border-slate-800 rounded-[2.5rem] shadow-2xl overflow-hidden flex flex-col max-h-[90vh]">
<div className="p-8 pb-4 flex flex-col gap-6 shrink-0 bg-slate-900/50">
<div className="flex justify-between items-center">

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

@@ -142,7 +142,7 @@ export default function LogsPage() {
placeholder="Filter by user, action or asset..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="w-full bg-slate-900/40 backdrop-blur-xl border border-slate-800 rounded-2xl py-3.5 pr-4 pl-12 text-sm focus:border-primary outline-none transition-all placeholder:text-slate-600 shadow-2xl"
className="w-full bg-slate-900/40 border border-slate-800 rounded-2xl py-3.5 pr-4 pl-12 text-sm focus:border-primary outline-none transition-all placeholder:text-slate-600 shadow-2xl"
/>
<div className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-600 transition-colors group-focus-within:text-primary">
<Search size={18} />
@@ -200,7 +200,7 @@ export default function LogsPage() {
<button
key={log.id}
onClick={() => setSelectedLog(log)}
className="w-full text-left bg-slate-900/40 backdrop-blur-md border border-slate-800/30 p-3 px-4 rounded-2xl flex items-center justify-between gap-4 hover:bg-slate-800/40 hover:border-primary/30 transition-all group active:scale-[0.99] relative overflow-hidden shadow-sm"
className="w-full text-left bg-slate-900/40 border border-slate-800/30 p-3 px-4 rounded-2xl flex items-center justify-between gap-4 hover:bg-slate-800/40 hover:border-primary/30 transition-all group active:scale-[0.99] relative overflow-hidden shadow-sm"
>
<div className="flex-1 min-w-0 z-10 flex items-center gap-4">
{/* Compact Action Badge */}
@@ -245,7 +245,7 @@ export default function LogsPage() {
{/* Selected Log Modal */}
{selectedLog && (
<div className="fixed inset-0 z-[100] flex items-end sm:items-center justify-center p-0 sm:p-4 bg-slate-950/90 backdrop-blur-xl animate-in fade-in duration-300">
<div className="fixed inset-0 z-[100] flex items-end sm:items-center justify-center p-0 sm:p-4 bg-slate-950/90 animate-in fade-in duration-300">
<div className="bg-slate-900 border-t sm:border border-slate-800 rounded-t-[2.5rem] sm:rounded-[3rem] p-6 sm:p-10 max-w-lg w-full shadow-2xl space-y-8 animate-in slide-in-from-bottom-10 duration-300 overflow-hidden">
<div className="flex justify-between items-start">
<div className="space-y-1 pr-4">

6
frontend/app/page.tsx
View File

@@ -470,7 +470,7 @@ export default function Home() {
<div className="w-full px-1 space-y-6">
{/* Mode Switcher */}
<div className="flex p-1.5 bg-slate-900/80 backdrop-blur-md rounded-2xl shadow-inner w-full gap-1">
<div className="flex p-1.5 bg-slate-900/80 rounded-2xl shadow-inner w-full gap-1">
{[
{ id: 'CHECK_IN', label: 'Check In', icon: ArrowDownCircle },
{ id: 'CHECK_OUT', label: 'Check Out', icon: ArrowUpCircle },
@@ -545,7 +545,7 @@ export default function Home() {
{/* Stock Adjustment Overlay */}
{selectedItem && (
<div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-4 bg-slate-950/80 backdrop-blur-sm animate-in fade-in duration-200">
<div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-4 bg-slate-950/80 animate-in fade-in duration-200">
<div className="w-full max-w-lg bg-slate-900 border border-slate-800 rounded-[2.5rem] shadow-2xl p-6 overflow-hidden animate-in slide-in-from-bottom-10 duration-300">
<div className="flex justify-between items-center mb-6">
<h3 className="text-xl font-black tracking-tight flex items-center gap-2">
@@ -806,7 +806,7 @@ export default function Home() {
{/* Box Contents Selection Modal */}
{boxMatches.length > 0 && !selectedItem && (
<div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-4 bg-slate-950/80 backdrop-blur-sm animate-in fade-in duration-200">
<div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-4 bg-slate-950/80 animate-in fade-in duration-200">
<div className="w-full max-w-lg bg-slate-900 border border-slate-800 rounded-[2.5rem] shadow-2xl p-6 overflow-hidden animate-in slide-in-from-bottom-10 duration-300 flex flex-col max-h-[85vh]">
<div className="flex justify-between items-center mb-6 shrink-0">
<div>

4
frontend/components/AIOnboarding.tsx
View File

@@ -320,7 +320,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
</div>
</div>
<div className="absolute top-6 left-1/2 -translate-x-1/2 bg-black/60 backdrop-blur-md px-4 py-1.5 rounded-full border border-white/10">
<div className="absolute top-6 left-1/2 -translate-x-1/2 bg-black/60 px-4 py-1.5 rounded-full border border-white/10">
<span className="text-xs font-black text-white flex items-center gap-2">
<div className="w-1.5 h-1.5 rounded-full bg-red-500 animate-pulse" />
Live Viewfinder
@@ -353,7 +353,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
<div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent pointer-events-none" />
{uploading && (
<div className="absolute inset-0 bg-slate-950/60 backdrop-blur-sm flex flex-col items-center justify-center gap-4 z-10 transition-all">
<div className="absolute inset-0 bg-slate-950/60 flex flex-col items-center justify-center gap-4 z-10 transition-all">
<div className="relative">
<RefreshCw className="w-12 h-12 text-primary animate-spin" />
<Sparkles className="absolute -top-2 -right-2 text-amber-400 w-6 h-6 animate-pulse" />

2
frontend/components/BottomNav.tsx
View File

@@ -25,7 +25,7 @@ export default function BottomNav({
const isAdmin = pathname === '/admin';
return (
<footer className="fixed bottom-0 left-0 right-0 py-3 px-2 pb-safe bg-slate-950/80 backdrop-blur-lg border-t border-slate-900/50 z-40 transition-all duration-300">
<footer className="fixed bottom-0 left-0 right-0 py-3 px-2 pb-safe bg-slate-950 border-t border-slate-900 z-40 transition-all duration-300">
<div className="max-w-xl mx-auto flex justify-around items-center text-slate-400">
<button

2
frontend/components/IdentityCheckOverlay.tsx
View File

@@ -60,7 +60,7 @@ const IdentityCheckOverlay = memo(({ show, users, onAuthenticated }: IdentityChe
};
return (
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-950/90 backdrop-blur-2xl animate-in fade-in duration-500">
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-950/90 animate-in fade-in duration-500">
<div className="bg-slate-900/80 border border-slate-800 rounded-[2.5rem] p-8 sm:p-10 max-w-sm w-full shadow-2xl space-y-8 animate-in zoom-in-95 duration-300 relative overflow-hidden">
{/* Subtle accent light */}
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-40 h-1 bg-gradient-to-r from-transparent via-primary/50 to-transparent blur-sm" />

4
frontend/components/Scanner.tsx
View File

@@ -254,7 +254,7 @@ export default function Scanner({ onScanSuccess, onOCRMatch, paused }: ScannerPr
</div>
</div>
</div>
<div className="p-6 bg-slate-900/90 backdrop-blur-xl border-t border-slate-800 flex flex-col gap-4">
<div className="p-6 bg-slate-900/90 border-t border-slate-800 flex flex-col gap-4">
<div className="flex flex-col items-center gap-1">
<p className="text-sm font-black text-white italic text-center">Protocol Detected</p>
<p className="text-xs text-slate-500 font-black text-center">Select identity from label matrix</p>
@@ -294,7 +294,7 @@ export default function Scanner({ onScanSuccess, onOCRMatch, paused }: ScannerPr
</div>
{/* External Controls Area */}
<div className="flex flex-col gap-4 bg-slate-900/40 backdrop-blur-md p-5 rounded-[2.5rem] border border-slate-800/50 shadow-2xl">
<div className="flex flex-col gap-4 bg-slate-900/40 p-5 rounded-[2.5rem] border border-slate-800/50 shadow-2xl">
<div className="flex items-center gap-3 w-full">
{hasZoom && (
<button

2
frontend/components/admin/AiManager.tsx
View File

@@ -32,7 +32,7 @@ export default function AiManager({
onUpdatePrompt
}: AiManagerProps) {
return (
<section className="bg-slate-900/40 backdrop-blur-xl border border-slate-800/50 rounded-[2.5rem] p-5 md:p-8 shadow-2xl space-y-6 transition-all group/ai">
<section className="bg-slate-900/40 border border-slate-800/50 rounded-[2.5rem] p-5 md:p-8 shadow-2xl space-y-6 transition-all group/ai">
<div className="flex items-center justify-between mb-2">
<div className="flex items-center gap-4">
<div className="w-10 h-10 rounded-xl bg-indigo-500/10 flex items-center justify-center text-indigo-400 border border-indigo-500/20">

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

@@ -23,7 +23,7 @@ export default function CategoryManager({
onUpdateCategorySubmit
}: CategoryManagerProps) {
return (
<section className="bg-slate-900/40 backdrop-blur-xl border border-slate-800/50 rounded-[2.5rem] p-5 md:p-8 shadow-2xl space-y-6 transition-all group/categories">
<section className="bg-slate-900/40 border border-slate-800/50 rounded-[2.5rem] p-5 md:p-8 shadow-2xl space-y-6 transition-all group/categories">
<div className="flex items-center justify-between px-2">
<div className="flex items-center gap-4">
<div className="w-10 h-10 rounded-xl bg-indigo-500/10 flex items-center justify-center text-indigo-400 border border-indigo-500/20">
@@ -69,7 +69,7 @@ export default function CategoryManager({
{/* Edit Category Modal */}
{editingCategory && (
<div className="fixed inset-0 z-[100] flex items-end sm:items-center justify-center p-0 sm:p-4 bg-slate-950/90 backdrop-blur-xl animate-in fade-in duration-300">
<div className="fixed inset-0 z-[100] flex items-end sm:items-center justify-center p-0 sm:p-4 bg-slate-950/90 animate-in fade-in duration-300">
<div className="w-full max-w-lg bg-slate-900 border-x border-t sm:border border-slate-800 rounded-t-[2.5rem] sm:rounded-3xl p-6 sm:p-10 shadow-2xl space-y-8 overflow-hidden animate-in slide-in-from-bottom-10">
<div className="flex justify-between items-center">
<div className="flex items-center gap-4">

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

@@ -35,7 +35,7 @@ export default function DatabaseManager({
return (
<div className="space-y-6 md:space-y-8 h-full">
<div className="bg-slate-900/40 backdrop-blur-xl border border-slate-800/50 rounded-[2.5rem] p-5 md:p-8 shadow-2xl overflow-hidden relative group transition-all">
<div className="bg-slate-900/40 border border-slate-800/50 rounded-[2.5rem] p-5 md:p-8 shadow-2xl overflow-hidden relative group transition-all">
<div className="flex items-center gap-4 mb-6">
<div className="w-10 h-10 rounded-xl bg-indigo-500/10 flex items-center justify-center text-indigo-400 border border-indigo-500/20">
<Database size={20} />
@@ -68,7 +68,7 @@ export default function DatabaseManager({
</div>
</div>
<div className="bg-slate-900/40 backdrop-blur-xl border border-slate-800/50 rounded-[2.5rem] p-5 md:p-8 shadow-2xl space-y-8">
<div className="bg-slate-900/40 border border-slate-800/50 rounded-[2.5rem] p-5 md:p-8 shadow-2xl space-y-8">
<div className="space-y-6">
<div className="flex items-center gap-4">
<div className="w-10 h-10 rounded-xl bg-indigo-500/10 flex items-center justify-center text-indigo-400 border border-indigo-500/20">

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

@@ -24,7 +24,7 @@ export default function IdentityManager({
onUpdateUserSubmit
}: IdentityManagerProps) {
return (
<div className="bg-slate-900/40 backdrop-blur-xl border border-slate-800/50 rounded-[2.5rem] p-5 md:p-8 flex flex-col shadow-2xl transition-all group/identity h-full">
<div className="bg-slate-900/40 border border-slate-800/50 rounded-[2.5rem] p-5 md:p-8 flex flex-col shadow-2xl transition-all group/identity h-full">
<div className="flex items-center justify-between mb-6">
<div className="flex items-center gap-4">
<div className="w-10 h-10 rounded-xl bg-indigo-500/10 flex items-center justify-center text-indigo-400 border border-indigo-500/20">
@@ -80,7 +80,7 @@ export default function IdentityManager({
{/* Edit User Modal */}
{editingUser && (
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-sm animate-in fade-in duration-200">
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-950/80 animate-in fade-in duration-200">
<div className="bg-slate-900 border border-slate-800 rounded-[2.5rem] p-8 w-full max-w-md shadow-2xl">
<div className="flex justify-between items-center mb-6">
<h3 className="text-xl font-black text-white tracking-tight">Edit Identity</h3>

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

@@ -18,7 +18,7 @@ export default function LdapManager({
onUpdateLdap
}: LdapManagerProps) {
return (
<div className="bg-slate-900/40 backdrop-blur-xl border border-slate-800/50 rounded-[2.5rem] p-5 md:p-8 shadow-2xl space-y-6 transition-all group/ldap">
<div className="bg-slate-900/40 border border-slate-800/50 rounded-[2.5rem] p-5 md:p-8 shadow-2xl space-y-6 transition-all group/ldap">
<div className="flex items-center justify-between mb-2">
<div className="flex items-center gap-4">
<div className="w-10 h-10 rounded-xl bg-indigo-500/10 flex items-center justify-center text-indigo-400 border border-indigo-500/20">

2
frontend/public/sw.js
View File

File diff suppressed because one or more lines are too long