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

78
src/components/BottleDetails.tsx
View File

@@ -24,7 +24,7 @@ export default function BottleDetails({ bottleId, sessionId, userId }: BottleDet
if (loading) {
return (
<div className="min-h-[60vh] flex flex-col items-center justify-center gap-4">
<Loader2 size={48} className="animate-spin text-amber-600" />
<Loader2 size={48} className="animate-spin text-orange-600" />
<p className="text-zinc-500 font-bold animate-pulse uppercase tracking-widest text-xs">{t('common.loading')}</p>
</div>
);
@@ -42,7 +42,7 @@ export default function BottleDetails({ bottleId, sessionId, userId }: BottleDet
Inhalte konnten nicht geladen werden. Bitte stelle eine Internetverbindung her, um diese Flasche zum ersten Mal zu laden.
</p>
</div>
<Link href="/" className="px-6 py-3 bg-amber-600 text-white rounded-2xl text-sm font-black uppercase tracking-widest shadow-xl shadow-amber-600/20">
<Link href="/" className="px-6 py-3 bg-orange-600 text-white rounded-2xl text-sm font-black uppercase tracking-widest shadow-xl shadow-orange-950/20">
Zurück zum Vault
</Link>
</div>
@@ -56,22 +56,22 @@ export default function BottleDetails({ bottleId, sessionId, userId }: BottleDet
{/* Back Button */}
<Link
href={`/${sessionId ? `?session_id=${sessionId}` : ''}`}
className="inline-flex items-center gap-2 text-zinc-500 hover:text-amber-600 transition-colors font-medium mb-4"
className="inline-flex items-center gap-2 text-zinc-500 hover:text-orange-600 transition-colors font-bold mb-4"
>
<ChevronLeft size={20} />
Zurück zur Sammlung
</Link>
{isOffline && (
<div className="bg-amber-600/10 border border-amber-600/20 p-3 rounded-2xl flex items-center gap-3 animate-in fade-in slide-in-from-top-2">
<WifiOff size={16} className="text-amber-600" />
<p className="text-[10px] font-black uppercase tracking-widest text-amber-700">Offline-Modus: Daten aus dem Cache</p>
<div className="bg-orange-600/10 border border-orange-600/20 p-3 rounded-2xl flex items-center gap-3 animate-in fade-in slide-in-from-top-2">
<WifiOff size={16} className="text-orange-600" />
<p className="text-[10px] font-bold uppercase tracking-widest text-orange-500">Offline-Modus: Daten aus dem Cache</p>
</div>
)}
{/* Hero Section */}
<section className="grid grid-cols-1 md:grid-cols-2 gap-8 items-start">
<div className="aspect-[4/5] rounded-3xl overflow-hidden shadow-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900">
<div className="aspect-[4/5] rounded-3xl overflow-hidden shadow-2xl border border-zinc-800 bg-zinc-900">
<img
src={getStorageUrl(bottle.image_url)}
alt={bottle.name}
@@ -81,10 +81,10 @@ export default function BottleDetails({ bottleId, sessionId, userId }: BottleDet
<div className="space-y-6">
<div>
<h1 className="text-2xl md:text-4xl font-black text-zinc-900 dark:text-white tracking-tighter leading-tight">
<h1 className="text-2xl md:text-4xl font-bold text-zinc-50 tracking-tighter leading-tight uppercase">
{bottle.name}
</h1>
<p className="text-sm md:text-xl text-amber-600 font-bold mt-1 uppercase tracking-widest">{bottle.distillery}</p>
<p className="text-sm md:text-xl text-orange-600 font-bold mt-1 uppercase tracking-widest">{bottle.distillery}</p>
{bottle.whiskybase_id && (
<div className="mt-4">
@@ -92,9 +92,9 @@ export default function BottleDetails({ bottleId, sessionId, userId }: BottleDet
href={`https://www.whiskybase.com/whiskies/whisky/${bottle.whiskybase_id}`}
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-2 px-4 py-2 bg-[#db0000] text-white rounded-xl text-sm font-bold shadow-lg shadow-red-600/20 hover:scale-[1.05] transition-transform"
className="inline-flex items-center gap-2 px-4 py-2 bg-zinc-900 text-zinc-400 border border-zinc-800 rounded-xl text-xs font-bold hover:text-orange-600 transition-colors"
>
<ExternalLink size={16} />
<ExternalLink size={14} />
Whiskybase ID: {bottle.whiskybase_id}
</a>
</div>
@@ -102,59 +102,59 @@ export default function BottleDetails({ bottleId, sessionId, userId }: BottleDet
</div>
<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
<div className="p-4 bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-100 dark:border-zinc-800 shadow-sm flex flex-col justify-between">
<div className="p-4 bg-zinc-900 rounded-2xl border border-zinc-800 shadow-sm flex flex-col justify-between">
<div>
<div className="flex items-center gap-2 text-zinc-400 text-[10px] font-black uppercase mb-1">
<div className="flex items-center gap-2 text-zinc-500 text-[10px] font-bold uppercase mb-1">
<Tag size={12} /> Kategorie
</div>
<div className="font-bold text-sm dark:text-zinc-200">{bottle.category || '-'}</div>
<div className="font-bold text-sm text-zinc-200">{bottle.category || '-'}</div>
</div>
</div>
<div className="p-4 bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-100 dark:border-zinc-800 shadow-sm">
<div className="flex items-center gap-2 text-zinc-400 text-[10px] font-black uppercase mb-1">
<div className="p-4 bg-zinc-900 rounded-2xl border border-zinc-800 shadow-sm">
<div className="flex items-center gap-2 text-zinc-500 text-[10px] font-bold uppercase mb-1">
<Droplets size={12} /> Alkoholgehalt
</div>
<div className="font-bold text-sm dark:text-zinc-200">{bottle.abv}% Vol.</div>
<div className="font-bold text-sm text-zinc-200">{bottle.abv}% Vol.</div>
</div>
<div className="p-4 bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-100 dark:border-zinc-800 shadow-sm">
<div className="flex items-center gap-2 text-zinc-400 text-[10px] font-black uppercase mb-1">
<div className="p-4 bg-zinc-900 rounded-2xl border border-zinc-800 shadow-sm">
<div className="flex items-center gap-2 text-zinc-500 text-[10px] font-bold uppercase mb-1">
<Award size={12} /> Alter
</div>
<div className="font-bold text-sm dark:text-zinc-200">{bottle.age ? `${bottle.age} J.` : '-'}</div>
<div className="font-bold text-sm text-zinc-200">{bottle.age ? `${bottle.age} J.` : '-'}</div>
</div>
{bottle.distilled_at && (
<div className="p-4 bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-100 dark:border-zinc-800 shadow-sm">
<div className="flex items-center gap-2 text-zinc-400 text-[10px] font-black uppercase mb-1">
<div className="p-4 bg-zinc-900 rounded-2xl border border-zinc-800 shadow-sm">
<div className="flex items-center gap-2 text-zinc-500 text-[10px] font-bold uppercase mb-1">
<Calendar size={12} /> Destilliert
</div>
<div className="font-bold text-sm dark:text-zinc-200">{bottle.distilled_at}</div>
<div className="font-bold text-sm text-zinc-200">{bottle.distilled_at}</div>
</div>
)}
{bottle.bottled_at && (
<div className="p-4 bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-100 dark:border-zinc-800 shadow-sm">
<div className="flex items-center gap-2 text-zinc-400 text-[10px] font-black uppercase mb-1">
<div className="p-4 bg-zinc-900 rounded-2xl border border-zinc-800 shadow-sm">
<div className="flex items-center gap-2 text-zinc-500 text-[10px] font-bold uppercase mb-1">
<Package size={12} /> Abgefüllt
</div>
<div className="font-bold text-sm dark:text-zinc-200">{bottle.bottled_at}</div>
<div className="font-bold text-sm text-zinc-200">{bottle.bottled_at}</div>
</div>
)}
{bottle.batch_info && (
<div className="p-4 bg-zinc-50 dark:bg-zinc-800/30 rounded-2xl border border-dashed border-zinc-200 dark:border-zinc-700/50 md:col-span-1">
<div className="flex items-center gap-2 text-zinc-400 text-[10px] font-black uppercase mb-1">
<div className="p-4 bg-zinc-800/30 rounded-2xl border border-dashed border-zinc-700/50 md:col-span-1">
<div className="flex items-center gap-2 text-zinc-500 text-[10px] font-bold uppercase mb-1">
<Info size={12} /> Batch / Code
</div>
<div className="font-mono text-xs dark:text-zinc-300 truncate" title={bottle.batch_info}>{bottle.batch_info}</div>
<div className="font-mono text-xs text-zinc-300 truncate" title={bottle.batch_info}>{bottle.batch_info}</div>
</div>
)}
<div className="p-4 bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-100 dark:border-zinc-800 shadow-sm">
<div className="flex items-center gap-2 text-zinc-400 text-[10px] font-black uppercase mb-1">
<div className="p-4 bg-zinc-900 rounded-2xl border border-zinc-800 shadow-sm">
<div className="flex items-center gap-2 text-zinc-500 text-[10px] font-bold uppercase mb-1">
<Calendar size={12} /> Letzter Dram
</div>
<div className="font-bold text-sm dark:text-zinc-200">
<div className="font-bold text-sm text-zinc-200">
{tastings && tastings.length > 0
? new Date(tastings[0].created_at).toLocaleDateString('de-DE')
: 'Noch nie'}
@@ -164,9 +164,9 @@ export default function BottleDetails({ bottleId, sessionId, userId }: BottleDet
<div className="pt-2 flex flex-wrap gap-4">
{isOffline ? (
<div className="w-full p-4 bg-zinc-100 dark:bg-zinc-800/50 border border-dashed border-zinc-200 dark:border-zinc-700 rounded-2xl flex items-center justify-center gap-2">
<Info size={14} className="text-zinc-400" />
<span className="text-[10px] font-black uppercase text-zinc-400 tracking-widest">Bearbeiten & Löschen nur online möglich</span>
<div className="w-full p-4 bg-zinc-900 border border-dashed border-zinc-800 rounded-2xl flex items-center justify-center gap-2">
<Info size={14} className="text-zinc-500" />
<span className="text-[10px] font-bold uppercase text-zinc-500 tracking-widest">Bearbeiten & Löschen nur online möglich</span>
</div>
) : (
<>
@@ -178,21 +178,21 @@ export default function BottleDetails({ bottleId, sessionId, userId }: BottleDet
</div>
</section>
<hr className="border-zinc-200 dark:border-zinc-800" />
<hr className="border-zinc-800" />
{/* Tasting Notes Section */}
<section className="space-y-8">
<div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-4">
<div>
<h2 className="text-3xl font-black text-zinc-900 dark:text-white tracking-tight">Tasting Notes</h2>
<h2 className="text-3xl font-bold text-zinc-50 tracking-tight uppercase">Tasting Notes</h2>
<p className="text-zinc-500 mt-1">Hier findest du deine bisherigen Eindrücke.</p>
</div>
</div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 md:gap-8 items-start">
{/* Form */}
<div className="lg:col-span-1 border border-zinc-200 dark:border-zinc-800 rounded-3xl p-6 bg-white dark:bg-zinc-900/50 md:sticky md:top-24">
<h3 className="text-lg font-bold mb-6 flex items-center gap-2 text-amber-600">
<div className="lg:col-span-1 border border-zinc-800 rounded-3xl p-6 bg-zinc-900/50 md:sticky md:top-24">
<h3 className="text-lg font-bold mb-6 flex items-center gap-2 text-orange-600 uppercase tracking-widest">
<Droplets size={20} /> Dram bewerten
</h3>
<TastingNoteForm bottleId={bottle.id} sessionId={sessionId} />