DramLog UI Overhaul: Rebranding, Navigation Improvements, and Scan Workflow Fixes
- Renamed app to DramLog and updated branding to Gold (#C89D46) - Implemented new BottomNavigation with Floating Scan Button - Fixed 'black screen' race condition in ScanAndTasteFlow - Refactored TastingEditor and StatsDashboard for a cleaner editorial look - Standardized colors and typography across the application
This commit is contained in:
@@ -140,18 +140,18 @@ export default function SessionList() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-3xl p-6 border border-zinc-200 dark:border-zinc-800 shadow-xl transition-all duration-300">
|
||||
<div className="bg-[#1A1B21] rounded-3xl p-6 border border-white/5 shadow-xl transition-all duration-300">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h3 className="text-xl font-bold flex items-center gap-2 text-zinc-800 dark:text-zinc-100 italic">
|
||||
<Calendar size={24} className="text-amber-600" />
|
||||
<h3 className="text-sm font-sans font-bold uppercase tracking-[0.2em] flex items-center gap-2 text-[#8F9096]">
|
||||
<Calendar size={18} className="text-[#C89D46]" />
|
||||
{t('session.title')}
|
||||
{!isCollapsed && sessions.length > 0 && (
|
||||
<span className="text-sm font-normal text-zinc-400 not-italic ml-2">({sessions.length})</span>
|
||||
<span className="text-[10px] font-sans font-bold opacity-50 ml-2">({sessions.length})</span>
|
||||
)}
|
||||
</h3>
|
||||
<button
|
||||
onClick={handleToggleCollapse}
|
||||
className="p-2 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-xl transition-colors text-zinc-400 hover:text-amber-600"
|
||||
className="p-2 hover:bg-white/5 rounded-xl transition-colors text-[#8F9096] hover:text-[#C89D46]"
|
||||
title={isCollapsed ? 'Aufklappen' : 'Einklappen'}
|
||||
>
|
||||
{isCollapsed ? <ChevronDown size={20} /> : <ChevronUp size={20} />}
|
||||
@@ -166,23 +166,23 @@ export default function SessionList() {
|
||||
value={newName}
|
||||
onChange={(e) => setNewName(e.target.value)}
|
||||
placeholder={t('session.sessionName')}
|
||||
className="flex-1 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-amber-500/50"
|
||||
className="flex-1 bg-white/5 border border-white/10 rounded-xl px-4 py-2 text-sm text-white placeholder:text-[#8F9096] focus:outline-none focus:border-[#C89D46] transition-colors"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isCreating || !newName.trim()}
|
||||
className="bg-amber-600 hover:bg-amber-700 text-white p-2 rounded-xl transition-all disabled:opacity-50"
|
||||
className="bg-[#C89D46] hover:bg-[#A67D2E] text-[#0F1014] p-2 rounded-xl transition-all disabled:opacity-50"
|
||||
>
|
||||
{isCreating ? <Loader2 size={20} className="animate-spin" /> : <Plus size={20} />}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="flex justify-center py-8 text-zinc-400">
|
||||
<div className="flex justify-center py-8 text-[#8F9096]">
|
||||
<Loader2 size={24} className="animate-spin" />
|
||||
</div>
|
||||
) : sessions.length === 0 ? (
|
||||
<div className="text-center py-8 text-zinc-500 text-sm">
|
||||
<div className="text-center py-8 text-[#8F9096] text-xs font-sans">
|
||||
{t('session.noSessions')}
|
||||
</div>
|
||||
) : (
|
||||
@@ -190,19 +190,19 @@ export default function SessionList() {
|
||||
{sessions.map((session) => (
|
||||
<div
|
||||
key={session.id}
|
||||
className={`flex items-center justify-between p-4 rounded-2xl border group transition-all ${activeSession?.id === session.id
|
||||
? 'bg-amber-600 border-amber-600 shadow-lg shadow-amber-600/20'
|
||||
: 'bg-zinc-50 dark:bg-zinc-800/50 border-zinc-100 dark:border-zinc-800 hover:border-amber-500/30'
|
||||
className={`flex items-center justify-between p-4 rounded-2xl border transition-all ${activeSession?.id === session.id
|
||||
? 'bg-[#C89D46] border-[#C89D46] shadow-lg shadow-[#C89D46]/20'
|
||||
: 'bg-white/5 border-white/5 hover:border-white/10'
|
||||
}`}
|
||||
>
|
||||
<Link href={`/sessions/${session.id}`} className="flex-1 space-y-1 min-w-0">
|
||||
<div className={`font-bold truncate flex items-center gap-2 ${activeSession?.id === session.id ? 'text-white' : 'text-zinc-800 dark:text-zinc-100'}`}>
|
||||
<div className={`font-display font-bold text-lg truncate flex items-center gap-2 ${activeSession?.id === session.id ? 'text-[#0F1014]' : 'text-white'}`}>
|
||||
{session.name}
|
||||
{session.ended_at && (
|
||||
<span className={`text-[8px] font-black uppercase px-1.5 py-0.5 rounded border ${activeSession?.id === session.id ? 'bg-white/20 border-white/30 text-white' : 'bg-zinc-100 dark:bg-zinc-800 border-zinc-200 dark:border-zinc-700 text-zinc-400'}`}>Closed</span>
|
||||
<span className={`text-[8px] font-sans font-black uppercase px-1.5 py-0.5 rounded border ${activeSession?.id === session.id ? 'bg-black/10 border-black/20 text-[#0F1014]' : 'bg-white/10 border-white/20 text-[#8F9096]'}`}>Closed</span>
|
||||
)}
|
||||
</div>
|
||||
<div className={`flex items-center gap-4 text-[10px] font-black uppercase tracking-widest ${activeSession?.id === session.id ? 'text-white/80' : 'text-zinc-400'}`}>
|
||||
<div className={`flex items-center gap-4 text-[10px] font-sans font-bold uppercase tracking-widest ${activeSession?.id === session.id ? 'text-[#0F1014]/60' : 'text-[#8F9096]'}`}>
|
||||
<span className="flex items-center gap-1">
|
||||
<Calendar size={12} />
|
||||
{new Date(session.scheduled_at).toLocaleDateString(locale === 'de' ? 'de-DE' : 'en-US')}
|
||||
@@ -215,7 +215,7 @@ export default function SessionList() {
|
||||
)}
|
||||
</div>
|
||||
{session.participants && session.participants.length > 0 && (
|
||||
<div className="pt-1">
|
||||
<div className="pt-2">
|
||||
<AvatarStack names={session.participants} limit={5} />
|
||||
</div>
|
||||
)}
|
||||
@@ -225,28 +225,28 @@ export default function SessionList() {
|
||||
!session.ended_at ? (
|
||||
<button
|
||||
onClick={() => setActiveSession({ id: session.id, name: session.name })}
|
||||
className="p-2 bg-white dark:bg-zinc-700 text-amber-600 rounded-xl shadow-sm border border-zinc-200 dark:border-zinc-600 hover:scale-110 transition-transform"
|
||||
className="p-2 bg-white/10 text-white rounded-xl hover:bg-[#C89D46] hover:text-[#0F1014] transition-all"
|
||||
title="Start Session"
|
||||
>
|
||||
<GlassWater size={18} />
|
||||
</button>
|
||||
) : (
|
||||
<div className="p-2 bg-zinc-100 dark:bg-zinc-800/50 text-zinc-400 rounded-xl border border-zinc-200 dark:border-zinc-700 opacity-50">
|
||||
<div className="p-2 bg-white/5 text-[#8F9096] rounded-xl border border-white/5 opacity-50">
|
||||
<Check size={18} />
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<div className="p-2 bg-white/20 text-white rounded-xl">
|
||||
<div className="p-2 bg-black/10 text-[#0F1014] rounded-xl">
|
||||
<Check size={18} />
|
||||
</div>
|
||||
)}
|
||||
<ChevronRight size={20} className={activeSession?.id === session.id ? 'text-white/50' : 'text-zinc-300'} />
|
||||
<ChevronRight size={20} className={activeSession?.id === session.id ? 'text-[#0F1014]/40' : 'text-white/20'} />
|
||||
<button
|
||||
onClick={(e) => handleDeleteSession(e, session.id)}
|
||||
disabled={!!isDeleting}
|
||||
className={`p-2 rounded-xl transition-all ${activeSession?.id === session.id
|
||||
? 'text-white/40 hover:text-white hover:bg-white/10'
|
||||
: 'text-zinc-300 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/10'
|
||||
? 'text-[#0F1014]/40 hover:text-[#0F1014]'
|
||||
: 'text-[#8F9096] hover:text-red-400'
|
||||
}`}
|
||||
title="Session löschen"
|
||||
>
|
||||
@@ -268,17 +268,17 @@ export default function SessionList() {
|
||||
<div className="flex items-center gap-2 animate-in fade-in slide-in-from-top-1">
|
||||
<div className="flex -space-x-1.5 overflow-hidden">
|
||||
{sessions.slice(0, 3).map((s, i) => (
|
||||
<div key={s.id} className="w-7 h-7 rounded-lg bg-amber-50 dark:bg-amber-900/20 border border-amber-200/50 dark:border-amber-800/50 flex items-center justify-center text-[10px] font-black text-amber-600 dark:text-amber-500 shadow-sm">
|
||||
<div key={s.id} className="w-7 h-7 rounded-lg bg-white/5 border border-white/10 flex items-center justify-center text-[10px] font-display font-bold text-[#C89D46] shadow-sm">
|
||||
{s.name[0].toUpperCase()}
|
||||
</div>
|
||||
))}
|
||||
{sessions.length > 3 && (
|
||||
<div className="w-7 h-7 rounded-lg bg-zinc-100 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 flex items-center justify-center text-[8px] font-black text-zinc-500 shadow-sm">
|
||||
<div className="w-7 h-7 rounded-lg bg-white/5 border border-white/10 flex items-center justify-center text-[8px] font-sans font-bold text-[#8F9096] shadow-sm">
|
||||
+{sessions.length - 3}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<span className="text-[10px] text-zinc-400 font-black uppercase tracking-widest ml-1">{sessions.length} Sessions</span>
|
||||
<span className="text-[10px] text-[#8F9096] font-sans font-bold uppercase tracking-widest ml-1">{sessions.length} Sessions</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user