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

42
src/app/page.tsx
View File

@@ -151,13 +151,13 @@ export default function Home() {
if (!user) {
return (
<main className="flex min-h-screen flex-col items-center justify-center p-6 bg-[#0F1014]">
<main className="flex min-h-screen flex-col items-center justify-center p-6 bg-zinc-950">
<div className="mb-12 text-center animate-in fade-in zoom-in duration-1000">
<h1 className="text-6xl font-display font-bold text-white tracking-tighter mb-4">
DRAM<span className="text-[#C89D46]">LOG</span>
<h1 className="text-6xl font-bold text-zinc-50 tracking-tighter mb-4">
DRAM<span className="text-orange-600">LOG</span>
</h1>
<p className="text-[#8F9096] max-w-sm mx-auto font-sans tracking-wide">
Premium Digitaler Tasting Begleiter für Genießer.
<p className="text-zinc-500 max-w-sm mx-auto font-bold tracking-wide">
Modern Minimalist Tasting Tool.
</p>
<div className="mt-8">
<LanguageSwitcher />
@@ -169,20 +169,20 @@ export default function Home() {
}
return (
<main className="flex min-h-screen flex-col items-center gap-6 md:gap-12 p-4 md:p-24 bg-[#0F1014] pb-32">
<main className="flex min-h-screen flex-col items-center gap-6 md:gap-12 p-4 md:p-24 bg-zinc-950 pb-32">
<div className="z-10 max-w-5xl w-full flex flex-col items-center gap-12">
<header className="w-full flex flex-col sm:flex-row justify-between items-center gap-4 sm:gap-0">
<div className="flex flex-col items-center sm:items-start group">
<h1 className="text-4xl font-display font-bold text-white tracking-tighter">
DRAM<span className="text-[#C89D46]">LOG</span>
<h1 className="text-4xl font-bold text-zinc-50 tracking-tighter">
DRAM<span className="text-orange-600">LOG</span>
</h1>
{activeSession && (
<div className="flex items-center gap-2 mt-1 animate-in fade-in slide-in-from-left-2 duration-700">
<div className="relative flex h-2 w-2">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#C89D46] opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-[#C89D46]"></span>
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-orange-600 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-orange-600"></span>
</div>
<span className="text-[9px] font-sans font-bold uppercase tracking-widest text-[#C89D46] flex items-center gap-1">
<span className="text-[9px] font-bold uppercase tracking-widest text-orange-600 flex items-center gap-1">
<Sparkles size={10} className="animate-pulse" />
Live: {activeSession.name}
</span>
@@ -195,7 +195,7 @@ export default function Home() {
<DramOfTheDay bottles={bottles} />
<button
onClick={handleLogout}
className="text-xs font-sans font-bold uppercase tracking-widest text-[#8F9096] hover:text-white transition-colors"
className="text-[10px] font-bold uppercase tracking-widest text-zinc-500 hover:text-white transition-colors"
>
{t('home.logout')}
</button>
@@ -206,7 +206,7 @@ export default function Home() {
<StatsDashboard bottles={bottles} />
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 w-full max-w-5xl">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 w-full max-w-5xl">
<div className="flex flex-col gap-8">
<SessionList />
</div>
@@ -215,27 +215,27 @@ export default function Home() {
</div>
</div>
<div className="w-full mt-4">
<div className="w-full mt-4" id="collection">
<div className="flex items-end justify-between mb-8">
<h2 className="text-3xl font-display font-bold text-white">
<h2 className="text-3xl font-bold text-zinc-50 uppercase tracking-tight">
Collection
</h2>
<span className="text-xs font-sans font-bold text-[#8F9096] uppercase tracking-widest pb-1">
<span className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest pb-1">
{bottles.length} Bottles
</span>
</div>
{isLoading ? (
<div className="flex justify-center py-20">
<div className="animate-spin rounded-full h-10 w-10 border-b-2 border-[#C89D46]"></div>
<div className="animate-spin rounded-full h-10 w-10 border-b-2 border-orange-600"></div>
</div>
) : fetchError ? (
<div className="p-12 bg-[#1A1B20] border border-white/10 rounded-3xl text-center">
<p className="text-white font-display text-xl mb-4">{t('common.error')}</p>
<p className="text-[#8F9096] text-sm italic mb-8 mx-auto max-w-xs">{fetchError}</p>
<div className="p-12 bg-zinc-900 border border-zinc-800 rounded-3xl text-center">
<p className="text-zinc-50 font-bold text-xl mb-2">{t('common.error')}</p>
<p className="text-zinc-500 text-xs italic mb-8 mx-auto max-w-xs">{fetchError}</p>
<button
onClick={fetchCollection}
className="px-10 py-4 bg-[#C89D46] hover:bg-[#E0B456] text-[#0F1014] rounded-full text-xs font-sans font-bold uppercase tracking-widest transition-all"
className="px-10 py-4 bg-orange-600 hover:bg-orange-700 text-white rounded-2xl text-[10px] font-bold uppercase tracking-widest transition-all shadow-lg shadow-orange-950/20"
>
{t('home.reTry')}
</button>