style: overhaul design to authentic Google Gemini Material 3 Dark theme
This commit is contained in:
sandrodach committed
1 parent
10323867e9
commit
31aa43c460
11 files changed
+413
-444
No files matched your search
+61
-86
@@ -8,7 +8,6 @@ import {
|
||||
Brain,
|
||||
LogOut,
|
||||
User as UserIcon,
|
||||
Sparkles,
|
||||
} from 'lucide-react';
|
||||
import { DashboardStats, SharedList, Thought, User } from './lib/types';
|
||||
import { api, clearToken, getToken } from './lib/api';
|
||||
@@ -128,12 +127,9 @@ export const App: React.FC = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#0b0f19] text-[#e3e3e3] flex flex-col">
|
||||
{/* Ambient Top Gemini Glow */}
|
||||
<div className="pointer-events-none fixed top-0 left-1/2 -translate-x-1/2 w-[560px] h-[180px] bg-gradient-to-r from-[#8ab4f8]/10 via-[#c58af9]/10 to-[#81c995]/10 blur-3xl -z-10" />
|
||||
|
||||
<div className="min-h-screen bg-[#131314] text-[#e3e3e3] flex flex-col font-sans">
|
||||
{/* Header Bar */}
|
||||
<header className="sticky top-0 z-30 backdrop-blur-xl bg-[#0b0f19]/85 border-b border-white/[0.06]">
|
||||
<header className="sticky top-0 z-30 bg-[#131314]/95 backdrop-blur-md border-b border-white/[0.08]">
|
||||
<div className="max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between gap-4">
|
||||
{/* Brand Logo */}
|
||||
<div
|
||||
@@ -141,17 +137,17 @@ export const App: React.FC = () => {
|
||||
setActiveTab('triage');
|
||||
setCaptureFocusCount((c) => c + 1);
|
||||
}}
|
||||
className="flex items-center gap-2.5 cursor-pointer group"
|
||||
className="flex items-center gap-2.5 cursor-pointer group select-none"
|
||||
>
|
||||
<div className="w-9 h-9 rounded-full bg-[#1e1f20] gemini-border flex items-center justify-center group-hover:border-[#8ab4f8]/50 transition-colors">
|
||||
<Brain className="w-5 h-5 text-[#8ab4f8]" />
|
||||
<div className="w-8 h-8 rounded-full bg-[#1e1f20] border border-white/[0.08] flex items-center justify-center group-hover:border-[#a8c7fa]/50 transition-colors">
|
||||
<Brain className="w-4 h-4 text-[#a8c7fa]" />
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-bold text-lg tracking-tight gemini-gradient-text">
|
||||
<div className="flex items-baseline gap-2">
|
||||
<span className="font-semibold text-base sm:text-lg text-[#e3e3e3] tracking-tight">
|
||||
MindSift
|
||||
</span>
|
||||
<span className="hidden md:inline-block ml-2.5 text-xs text-[#9aa0a6]">
|
||||
Der Kopf frei in drei Sekunden.
|
||||
<span className="hidden md:inline-block text-xs text-[#8e918f]">
|
||||
Der Kopf frei in drei Sekunden
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -160,10 +156,10 @@ export const App: React.FC = () => {
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => setShowAuthModal(true)}
|
||||
className="h-9 px-3.5 rounded-full bg-[#1e1f20] hover:bg-[#282a2c] gemini-border text-xs font-medium text-[#e3e3e3] flex items-center gap-2 transition-colors"
|
||||
title="Benutzer wechseln oder Familienmitglied registrieren"
|
||||
className="h-8 px-3 rounded-full bg-[#1e1f20] hover:bg-[#282a2c] border border-white/[0.08] text-xs font-normal text-[#c4c7c5] hover:text-[#e3e3e3] flex items-center gap-2 transition-colors"
|
||||
title="Benutzer wechseln oder Profil anpassen"
|
||||
>
|
||||
<UserIcon className="w-3.5 h-3.5 text-[#8ab4f8]" />
|
||||
<UserIcon className="w-3.5 h-3.5 text-[#a8c7fa]" />
|
||||
<span>{user?.displayName || 'Lokal'}</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -171,35 +167,29 @@ export const App: React.FC = () => {
|
||||
</header>
|
||||
|
||||
{/* Main Content Container */}
|
||||
<main className="flex-1 max-w-6xl w-full mx-auto px-4 sm:px-6 pt-6 pb-24">
|
||||
{/* Global Instant Capture Section (Always Ready at Top) */}
|
||||
<section className="mb-7">
|
||||
<main className="flex-1 max-w-6xl w-full mx-auto px-4 sm:px-6 pt-6 pb-20">
|
||||
{/* Global Instant Capture Section */}
|
||||
<section className="mb-6">
|
||||
<InstantCaptureBar
|
||||
onCaptured={handleCaptured}
|
||||
autoFocusTrigger={captureFocusCount}
|
||||
/>
|
||||
</section>
|
||||
|
||||
{/* Pill Navigation Tabs */}
|
||||
<nav className="flex items-center justify-start sm:justify-center gap-2 overflow-x-auto pb-2 mb-8 no-scrollbar">
|
||||
{/* Google Material 3 Navigation Chips */}
|
||||
<nav className="flex items-center justify-start sm:justify-center gap-1.5 overflow-x-auto pb-2 mb-8 no-scrollbar">
|
||||
<button
|
||||
onClick={() => setActiveTab('triage')}
|
||||
className={`h-11 px-5 rounded-full text-xs sm:text-sm font-medium flex items-center gap-2 flex-shrink-0 transition-all ${
|
||||
className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-colors ${
|
||||
activeTab === 'triage'
|
||||
? 'bg-[#8ab4f8] text-[#0b0f19] font-semibold shadow-sm'
|
||||
: 'bg-[#131314] hover:bg-[#1e1f20] text-[#9aa0a6] hover:text-[#e3e3e3] gemini-border'
|
||||
? 'bg-[#282a2c] text-[#e3e3e3] font-medium border border-white/[0.12]'
|
||||
: 'text-[#c4c7c5] hover:text-[#e3e3e3] hover:bg-[#1e1f20]'
|
||||
}`}
|
||||
>
|
||||
<Layers className="w-4 h-4" />
|
||||
<Layers className="w-4 h-4 text-[#a8c7fa]" />
|
||||
<span>Triage-Deck</span>
|
||||
{stats.inboxCount > 0 && (
|
||||
<span
|
||||
className={`px-2 py-0.5 rounded-full text-xs font-bold ${
|
||||
activeTab === 'triage'
|
||||
? 'bg-[#0b0f19] text-[#8ab4f8]'
|
||||
: 'bg-[#8ab4f8]/20 text-[#8ab4f8]'
|
||||
}`}
|
||||
>
|
||||
<span className="px-1.5 py-0.2 rounded-full text-[11px] bg-[#1e1f20] text-[#a8c7fa] border border-white/[0.06]">
|
||||
{stats.inboxCount}
|
||||
</span>
|
||||
)}
|
||||
@@ -207,22 +197,16 @@ export const App: React.FC = () => {
|
||||
|
||||
<button
|
||||
onClick={() => setActiveTab('tasks')}
|
||||
className={`h-11 px-5 rounded-full text-xs sm:text-sm font-medium flex items-center gap-2 flex-shrink-0 transition-all ${
|
||||
className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-colors ${
|
||||
activeTab === 'tasks'
|
||||
? 'bg-[#8ab4f8] text-[#0b0f19] font-semibold shadow-sm'
|
||||
: 'bg-[#131314] hover:bg-[#1e1f20] text-[#9aa0a6] hover:text-[#e3e3e3] gemini-border'
|
||||
? 'bg-[#282a2c] text-[#e3e3e3] font-medium border border-white/[0.12]'
|
||||
: 'text-[#c4c7c5] hover:text-[#e3e3e3] hover:bg-[#1e1f20]'
|
||||
}`}
|
||||
>
|
||||
<CheckSquare className="w-4 h-4" />
|
||||
<CheckSquare className="w-4 h-4 text-[#a8dab5]" />
|
||||
<span>Aufgaben</span>
|
||||
{stats.tasksOpenCount > 0 && (
|
||||
<span
|
||||
className={`px-2 py-0.5 rounded-full text-xs font-bold ${
|
||||
activeTab === 'tasks'
|
||||
? 'bg-[#0b0f19] text-[#8ab4f8]'
|
||||
: 'bg-[#81c995]/20 text-[#81c995]'
|
||||
}`}
|
||||
>
|
||||
<span className="px-1.5 py-0.2 rounded-full text-[11px] bg-[#1e1f20] text-[#a8dab5] border border-white/[0.06]">
|
||||
{stats.tasksOpenCount}
|
||||
</span>
|
||||
)}
|
||||
@@ -230,46 +214,40 @@ export const App: React.FC = () => {
|
||||
|
||||
<button
|
||||
onClick={() => setActiveTab('workspace')}
|
||||
className={`h-11 px-5 rounded-full text-xs sm:text-sm font-medium flex items-center gap-2 flex-shrink-0 transition-all ${
|
||||
className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-colors ${
|
||||
activeTab === 'workspace'
|
||||
? 'bg-[#8ab4f8] text-[#0b0f19] font-semibold shadow-sm'
|
||||
: 'bg-[#131314] hover:bg-[#1e1f20] text-[#9aa0a6] hover:text-[#e3e3e3] gemini-border'
|
||||
? 'bg-[#282a2c] text-[#e3e3e3] font-medium border border-white/[0.12]'
|
||||
: 'text-[#c4c7c5] hover:text-[#e3e3e3] hover:bg-[#1e1f20]'
|
||||
}`}
|
||||
>
|
||||
<FileText className="w-4 h-4" />
|
||||
<FileText className="w-4 h-4 text-[#a8c7fa]" />
|
||||
<span>Workspace</span>
|
||||
<span
|
||||
className={`px-2 py-0.5 rounded-full text-xs ${
|
||||
activeTab === 'workspace'
|
||||
? 'bg-[#0b0f19] text-[#8ab4f8]'
|
||||
: 'bg-[#1e1f20] text-[#9aa0a6]'
|
||||
}`}
|
||||
>
|
||||
<span className="px-1.5 py-0.2 rounded-full text-[11px] bg-[#1e1f20] text-[#8e918f] border border-white/[0.06]">
|
||||
{stats.docsCount}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => setActiveTab('lists')}
|
||||
className={`h-11 px-5 rounded-full text-xs sm:text-sm font-medium flex items-center gap-2 flex-shrink-0 transition-all ${
|
||||
className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-colors ${
|
||||
activeTab === 'lists'
|
||||
? 'bg-[#8ab4f8] text-[#0b0f19] font-semibold shadow-sm'
|
||||
: 'bg-[#131314] hover:bg-[#1e1f20] text-[#9aa0a6] hover:text-[#e3e3e3] gemini-border'
|
||||
? 'bg-[#282a2c] text-[#e3e3e3] font-medium border border-white/[0.12]'
|
||||
: 'text-[#c4c7c5] hover:text-[#e3e3e3] hover:bg-[#1e1f20]'
|
||||
}`}
|
||||
>
|
||||
<ShoppingCart className="w-4 h-4" />
|
||||
<ShoppingCart className="w-4 h-4 text-[#a8dab5]" />
|
||||
<span>Geteilte Listen</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => setActiveTab('ecosystem')}
|
||||
className={`h-11 px-5 rounded-full text-xs sm:text-sm font-medium flex items-center gap-2 flex-shrink-0 transition-all ${
|
||||
className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-colors ${
|
||||
activeTab === 'ecosystem'
|
||||
? 'bg-[#8ab4f8] text-[#0b0f19] font-semibold shadow-sm'
|
||||
: 'bg-[#131314] hover:bg-[#1e1f20] text-[#9aa0a6] hover:text-[#e3e3e3] gemini-border'
|
||||
? 'bg-[#282a2c] text-[#e3e3e3] font-medium border border-white/[0.12]'
|
||||
: 'text-[#c4c7c5] hover:text-[#e3e3e3] hover:bg-[#1e1f20]'
|
||||
}`}
|
||||
>
|
||||
<Webhook className="w-4 h-4" />
|
||||
<Webhook className="w-4 h-4 text-[#fdd663]" />
|
||||
<span>Webhooks & Export</span>
|
||||
</button>
|
||||
</nav>
|
||||
@@ -312,29 +290,26 @@ export const App: React.FC = () => {
|
||||
|
||||
{/* Account Switcher / Registration Modal */}
|
||||
{showAuthModal && (
|
||||
<div className="fixed inset-0 z-50 bg-black/70 backdrop-blur-sm flex items-center justify-center p-4">
|
||||
<div className="w-full max-w-md p-6 sm:p-8 rounded-3xl bg-[#1e1f20] gemini-border shadow-card-depth">
|
||||
<div className="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4">
|
||||
<div className="w-full max-w-md p-6 rounded-3xl bg-[#1e1f20] border border-[#3c4043] shadow-card">
|
||||
<div className="flex items-center justify-between mb-5">
|
||||
<div className="flex items-center gap-2">
|
||||
<Sparkles className="w-5 h-5 text-[#8ab4f8]" />
|
||||
<h3 className="text-lg font-bold text-[#e3e3e3]">
|
||||
{authMode === 'login' ? 'Konto wechseln' : 'Neues Familien-Konto anlegen'}
|
||||
</h3>
|
||||
</div>
|
||||
<h3 className="text-base font-semibold text-[#e3e3e3]">
|
||||
{authMode === 'login' ? 'Konto wechseln' : 'Neues Familien-Konto anlegen'}
|
||||
</h3>
|
||||
<button
|
||||
onClick={() => setShowAuthModal(false)}
|
||||
className="px-3 py-1 rounded-full bg-[#282a2c] text-xs text-[#9aa0a6] hover:text-[#e3e3e3]"
|
||||
className="px-2.5 py-1 rounded-full bg-[#282a2c] text-xs text-[#c4c7c5] hover:text-[#e3e3e3]"
|
||||
>
|
||||
Schließen
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{user && (
|
||||
<div className="mb-5 p-3.5 rounded-2xl bg-[#131314] gemini-border flex items-center justify-between">
|
||||
<div className="mb-4 p-3 rounded-2xl bg-[#131314] border border-white/[0.08] flex items-center justify-between">
|
||||
<div className="text-xs">
|
||||
<span className="text-[#9aa0a6]">Aktuell aktiv: </span>
|
||||
<span className="text-[#8e918f]">Aktiv: </span>
|
||||
<strong className="text-[#e3e3e3]">{user.displayName}</strong>
|
||||
<span className="text-[#5f6368] ml-1">({user.email})</span>
|
||||
<span className="text-[#8e918f] ml-1">({user.email})</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
@@ -344,7 +319,7 @@ export const App: React.FC = () => {
|
||||
await refreshAll();
|
||||
setShowAuthModal(false);
|
||||
}}
|
||||
className="text-xs text-[#8ab4f8] hover:underline flex items-center gap-1"
|
||||
className="text-xs text-[#a8c7fa] hover:underline flex items-center gap-1"
|
||||
>
|
||||
<LogOut className="w-3 h-3" /> Standard
|
||||
</button>
|
||||
@@ -355,10 +330,10 @@ export const App: React.FC = () => {
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setAuthMode('login')}
|
||||
className={`flex-1 h-9 rounded-full text-xs font-semibold ${
|
||||
className={`flex-1 h-8 rounded-full text-xs font-medium ${
|
||||
authMode === 'login'
|
||||
? 'bg-[#8ab4f8] text-[#0b0f19]'
|
||||
: 'bg-[#131314] text-[#9aa0a6]'
|
||||
? 'bg-[#282a2c] text-[#e3e3e3] border border-white/[0.12]'
|
||||
: 'text-[#8e918f] hover:text-[#e3e3e3]'
|
||||
}`}
|
||||
>
|
||||
Anmelden
|
||||
@@ -366,10 +341,10 @@ export const App: React.FC = () => {
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setAuthMode('register')}
|
||||
className={`flex-1 h-9 rounded-full text-xs font-semibold ${
|
||||
className={`flex-1 h-8 rounded-full text-xs font-medium ${
|
||||
authMode === 'register'
|
||||
? 'bg-[#8ab4f8] text-[#0b0f19]'
|
||||
: 'bg-[#131314] text-[#9aa0a6]'
|
||||
? 'bg-[#282a2c] text-[#e3e3e3] border border-white/[0.12]'
|
||||
: 'text-[#8e918f] hover:text-[#e3e3e3]'
|
||||
}`}
|
||||
>
|
||||
Registrieren
|
||||
@@ -383,7 +358,7 @@ export const App: React.FC = () => {
|
||||
value={displayName}
|
||||
onChange={(e) => setDisplayName(e.target.value)}
|
||||
placeholder="Anzeigename (z. B. Lisa)"
|
||||
className="w-full h-11 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] gemini-border focus:outline-none"
|
||||
className="w-full h-10 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] placeholder-[#8e918f] border border-[#3c4043] focus:border-[#a8c7fa] focus:outline-none"
|
||||
required
|
||||
/>
|
||||
)}
|
||||
@@ -392,7 +367,7 @@ export const App: React.FC = () => {
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="E-Mail-Adresse"
|
||||
className="w-full h-11 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] gemini-border focus:outline-none"
|
||||
className="w-full h-10 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] placeholder-[#8e918f] border border-[#3c4043] focus:border-[#a8c7fa] focus:outline-none"
|
||||
required
|
||||
/>
|
||||
<input
|
||||
@@ -400,7 +375,7 @@ export const App: React.FC = () => {
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="Passwort (mind. 4 Zeichen)"
|
||||
className="w-full h-11 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] gemini-border focus:outline-none"
|
||||
className="w-full h-10 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] placeholder-[#8e918f] border border-[#3c4043] focus:border-[#a8c7fa] focus:outline-none"
|
||||
required
|
||||
/>
|
||||
|
||||
@@ -408,9 +383,9 @@ export const App: React.FC = () => {
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full h-11 rounded-full bg-[#8ab4f8] text-[#0b0f19] font-semibold text-sm hover:bg-[#a1c2fa] transition-colors"
|
||||
className="w-full h-10 rounded-full bg-[#a8c7fa] text-[#041e49] font-medium text-sm hover:bg-[#b8d4ff] transition-colors"
|
||||
>
|
||||
{authMode === 'login' ? 'Einloggen' : 'Konto erstellen & starten'}
|
||||
{authMode === 'login' ? 'Einloggen' : 'Konto erstellen'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user