robin/Dramlog-Prod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Industrial Dark UI Overhaul: Updated colors, typography, navigation, and component styling across the application

Browse Source
This commit is contained in:
robin
2025-12-22 00:05:31 +01:00
parent cf491d83b6
commit f0588418c8
28 changed files with 582 additions and 613 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
src/components/BottomNavigation.tsx
View File

@@ -31,7 +31,7 @@ export const BottomNavigation = ({ onHome, onShelf, onSearch, onProfile, onScan
};
return (
<div className="fixed bottom-0 left-0 w-full z-50 pointer-events-none">
<div className="fixed bottom-6 left-1/2 -translate-x-1/2 w-[90%] max-w-sm z-50 pointer-events-none">
{/* Hidden Input for Scanning */}
<input
type="file"
@@ -41,67 +41,49 @@ export const BottomNavigation = ({ onHome, onShelf, onSearch, onProfile, onScan
className="hidden"
/>
{/* Background Container mit Glassmorphism */}
<div className="relative bg-[#0F1014]/90 backdrop-blur-xl border-t border-white/10 pb-safe pt-2 pointer-events-auto shadow-[0_-10px_40px_rgba(0,0,0,0.5)]">
<div className="flex items-center justify-between px-2 py-2 bg-zinc-900/90 backdrop-blur-lg border border-zinc-800 rounded-full shadow-2xl pointer-events-auto">
{/* Left Items */}
<button
onClick={onHome}
className="p-3 text-zinc-400 hover:text-white transition-colors active:scale-90"
aria-label="Home"
>
<Home size={22} strokeWidth={2.5} />
</button>
<div className="flex justify-between items-end px-6 h-16">
{/* Left Actions */}
<button
onClick={onHome}
className="flex flex-col items-center gap-1 text-[#C89D46] w-12 transition-all active:scale-90"
>
<Home size={24} />
<span className="text-[10px] font-medium font-sans uppercase tracking-widest opacity-80">Home</span>
</button>
<button
onClick={onShelf}
className="p-3 text-zinc-400 hover:text-white transition-colors active:scale-90"
aria-label="Shelf"
>
<Grid size={22} strokeWidth={2.5} />
</button>
<button
onClick={onShelf}
className="flex flex-col items-center gap-1 text-[#8F9096] hover:text-white w-12 transition-all active:scale-90"
>
<Grid size={24} />
<span className="text-[10px] font-medium font-sans uppercase tracking-widest opacity-80">Shelf</span>
</button>
{/* PRIMARY ACTION - The "Industrial Button" */}
<button
onClick={handleScanClick}
className="flex items-center justify-center w-14 h-14 rounded-full bg-orange-600 text-white hover:bg-orange-500 active:scale-95 transition-all mx-2 shadow-lg shadow-orange-950/40"
aria-label="Scan Bottle"
>
<Scan size={26} strokeWidth={2.5} />
</button>
{/* Spacer für den Center Button */}
<div className="w-16" />
{/* Right Actions */}
<button
onClick={onSearch}
className="flex flex-col items-center gap-1 text-[#8F9096] hover:text-white w-12 transition-all active:scale-90"
>
<Search size={24} />
<span className="text-[10px] font-medium font-sans uppercase tracking-widest opacity-80">Search</span>
</button>
<button
onClick={onProfile}
className="flex flex-col items-center gap-1 text-[#8F9096] hover:text-white w-12 transition-all active:scale-90"
>
<User size={24} />
<span className="text-[10px] font-medium font-sans uppercase tracking-widest opacity-80">Admin</span>
</button>
</div>
{/* THE FLOATING MAGIC BUTTON */}
<div className="absolute -top-10 left-1/2 -translate-x-1/2 pointer-events-auto">
<button
onClick={handleScanClick}
className="flex items-center justify-center w-20 h-20 rounded-full
bg-gradient-to-tr from-[#C89D46] to-[#E0B456]
shadow-[0_0_30px_rgba(200,157,70,0.4)]
border-[6px] border-[#0F1014]
active:scale-95 transition-transform duration-200"
aria-label="Scan Bottle"
>
<div className="bg-[#0F1014] p-3 rounded-full">
<Scan color="#C89D46" size={32} strokeWidth={2.5} />
</div>
</button>
{/* Visual Gold Glow */}
<div className="absolute inset-0 rounded-full bg-[#C89D46]/20 blur-2xl -z-10 animate-pulse" />
</div>
{/* Right Items */}
<button
onClick={onSearch}
className="p-3 text-zinc-400 hover:text-white transition-colors active:scale-90"
aria-label="Search"
>
<Search size={22} strokeWidth={2.5} />
</button>
<button
onClick={onProfile}
className="p-3 text-zinc-400 hover:text-white transition-colors active:scale-90"
aria-label="Profile"
>
<User size={22} strokeWidth={2.5} />
</button>
</div>
</div>
);