feat(design): centralize design system with CSS variables and semantic classes in index.css
MindSift CI & Docker Release / Build, Test in Container & Push (push) Successful in 52s
MindSift CI & Docker Release / Build, Test in Container & Push (push) Successful in 52s
This commit is contained in:
sandrodach committed
1 parent
94123c9424
commit
ec9ba8fd9f
9 files changed
+428
-304
No files matched your search
+19
-57
@@ -148,9 +148,9 @@ export const App: React.FC = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#16171a] text-white flex flex-col font-sans selection:bg-[#1d8cf8]/30">
|
||||
<div className="min-h-screen bg-canvas text-white flex flex-col font-sans selection:bg-accent/30">
|
||||
{/* Top Header Bar */}
|
||||
<header className="sticky top-0 z-30 bg-[#16171a]/95 backdrop-blur-md border-b border-white/[0.08]">
|
||||
<header className="sticky top-0 z-30 bg-panel/95 backdrop-blur-md border-b border-border">
|
||||
<div className="max-w-6xl mx-auto px-3 sm:px-4 h-12 flex items-center justify-between gap-4">
|
||||
{/* Logo & Headline */}
|
||||
<div
|
||||
@@ -160,7 +160,7 @@ export const App: React.FC = () => {
|
||||
}}
|
||||
className="flex items-center gap-2.5 cursor-pointer group select-none"
|
||||
>
|
||||
<div className="w-7 h-7 bg-[#1d8cf8] text-white flex items-center justify-center">
|
||||
<div className="w-7 h-7 bg-accent text-white flex items-center justify-center">
|
||||
<Brain className="w-4 h-4" />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
@@ -180,10 +180,10 @@ export const App: React.FC = () => {
|
||||
triggerHaptic(10);
|
||||
setShowProfileModal(true);
|
||||
}}
|
||||
className="h-8 pl-1 pr-3 rounded-full bg-[#222428] hover:bg-[#282a2f] border border-white/[0.08] text-xs font-medium text-white flex items-center gap-2 transition-colors"
|
||||
className="h-8 pl-1 pr-3 rounded-full bg-panel hover:bg-panel-elevated border border-border text-xs font-medium text-white flex items-center gap-2 transition-colors"
|
||||
title="Profil & Einstellungen"
|
||||
>
|
||||
<div className="w-6 h-6 rounded-full bg-[#1d8cf8] text-white text-[10px] font-bold flex items-center justify-center">
|
||||
<div className="w-6 h-6 rounded-full bg-accent text-white text-[10px] font-bold flex items-center justify-center">
|
||||
{user?.displayName ? user.displayName.slice(0, 1).toUpperCase() : 'U'}
|
||||
</div>
|
||||
<span className="max-w-[120px] truncate">{user?.displayName || 'Konto'}</span>
|
||||
@@ -192,29 +192,19 @@ export const App: React.FC = () => {
|
||||
</div>
|
||||
|
||||
{/* Monochrome square tabs attached to header */}
|
||||
<nav className="max-w-6xl mx-auto px-1 sm:px-2 overflow-x-auto no-scrollbar border-t border-white/[0.06]">
|
||||
<nav className="max-w-6xl mx-auto px-1 sm:px-2 overflow-x-auto no-scrollbar border-t border-border">
|
||||
<div className="flex items-stretch">
|
||||
<button
|
||||
onClick={() => {
|
||||
triggerHaptic(10);
|
||||
setActiveTab('triage');
|
||||
}}
|
||||
className={`h-9 px-3.5 text-xs sm:text-sm font-medium flex items-center gap-1.5 flex-shrink-0 transition-colors select-none border-b-2 ${
|
||||
activeTab === 'triage'
|
||||
? 'border-[#1d8cf8] text-white bg-white/[0.04]'
|
||||
: 'border-transparent text-zinc-400 hover:text-white hover:bg-white/[0.02]'
|
||||
}`}
|
||||
className={`tab-btn ${activeTab === 'triage' ? 'tab-btn-active' : ''}`}
|
||||
>
|
||||
<Layers className={`w-4 h-4 transition-colors ${activeTab === 'triage' ? 'text-[#1d8cf8]' : 'text-zinc-400'}`} />
|
||||
<Layers className="w-4 h-4" />
|
||||
<span>Triage</span>
|
||||
{stats.inboxCount > 0 && (
|
||||
<span
|
||||
className={`px-1.5 py-0.2 text-[10px] font-semibold transition-colors ${
|
||||
activeTab === 'triage'
|
||||
? 'bg-[#1d8cf8]/20 text-[#1d8cf8]'
|
||||
: 'bg-[#16171a] text-zinc-400 border border-white/[0.06]'
|
||||
}`}
|
||||
>
|
||||
<span className={activeTab === 'triage' ? 'badge-accent' : 'px-1.5 py-0.5 text-[10px] bg-canvas text-zinc-400 border border-border'}>
|
||||
{stats.inboxCount}
|
||||
</span>
|
||||
)}
|
||||
@@ -225,22 +215,12 @@ export const App: React.FC = () => {
|
||||
triggerHaptic(10);
|
||||
setActiveTab('tasks');
|
||||
}}
|
||||
className={`h-9 px-3.5 text-xs sm:text-sm font-medium flex items-center gap-1.5 flex-shrink-0 transition-colors select-none border-b-2 ${
|
||||
activeTab === 'tasks'
|
||||
? 'border-[#1d8cf8] text-white bg-white/[0.04]'
|
||||
: 'border-transparent text-zinc-400 hover:text-white hover:bg-white/[0.02]'
|
||||
}`}
|
||||
className={`tab-btn ${activeTab === 'tasks' ? 'tab-btn-active' : ''}`}
|
||||
>
|
||||
<CheckSquare className={`w-4 h-4 transition-colors ${activeTab === 'tasks' ? 'text-[#1d8cf8]' : 'text-zinc-400'}`} />
|
||||
<CheckSquare className="w-4 h-4" />
|
||||
<span>Aufgaben</span>
|
||||
{stats.tasksOpenCount > 0 && (
|
||||
<span
|
||||
className={`px-1.5 py-0.2 text-[10px] font-semibold transition-colors ${
|
||||
activeTab === 'tasks'
|
||||
? 'bg-[#1d8cf8]/20 text-[#1d8cf8]'
|
||||
: 'bg-[#16171a] text-zinc-400 border border-white/[0.06]'
|
||||
}`}
|
||||
>
|
||||
<span className={activeTab === 'tasks' ? 'badge-accent' : 'px-1.5 py-0.5 text-[10px] bg-canvas text-zinc-400 border border-border'}>
|
||||
{stats.tasksOpenCount}
|
||||
</span>
|
||||
)}
|
||||
@@ -251,21 +231,11 @@ export const App: React.FC = () => {
|
||||
triggerHaptic(10);
|
||||
setActiveTab('workspace');
|
||||
}}
|
||||
className={`h-9 px-3.5 text-xs sm:text-sm font-medium flex items-center gap-1.5 flex-shrink-0 transition-colors select-none border-b-2 ${
|
||||
activeTab === 'workspace'
|
||||
? 'border-[#1d8cf8] text-white bg-white/[0.04]'
|
||||
: 'border-transparent text-zinc-400 hover:text-white hover:bg-white/[0.02]'
|
||||
}`}
|
||||
className={`tab-btn ${activeTab === 'workspace' ? 'tab-btn-active' : ''}`}
|
||||
>
|
||||
<FileText className={`w-4 h-4 transition-colors ${activeTab === 'workspace' ? 'text-[#1d8cf8]' : 'text-zinc-400'}`} />
|
||||
<FileText className="w-4 h-4" />
|
||||
<span>Workspace</span>
|
||||
<span
|
||||
className={`px-1.5 py-0.2 text-[10px] font-semibold transition-colors ${
|
||||
activeTab === 'workspace'
|
||||
? 'bg-[#1d8cf8]/20 text-[#1d8cf8]'
|
||||
: 'bg-[#16171a] text-zinc-400 border border-white/[0.06]'
|
||||
}`}
|
||||
>
|
||||
<span className={activeTab === 'workspace' ? 'badge-accent' : 'px-1.5 py-0.5 text-[10px] bg-canvas text-zinc-400 border border-border'}>
|
||||
{stats.docsCount}
|
||||
</span>
|
||||
</button>
|
||||
@@ -275,13 +245,9 @@ export const App: React.FC = () => {
|
||||
triggerHaptic(10);
|
||||
setActiveTab('lists');
|
||||
}}
|
||||
className={`h-9 px-3.5 text-xs sm:text-sm font-medium flex items-center gap-1.5 flex-shrink-0 transition-colors select-none border-b-2 ${
|
||||
activeTab === 'lists'
|
||||
? 'border-[#1d8cf8] text-white bg-white/[0.04]'
|
||||
: 'border-transparent text-zinc-400 hover:text-white hover:bg-white/[0.02]'
|
||||
}`}
|
||||
className={`tab-btn ${activeTab === 'lists' ? 'tab-btn-active' : ''}`}
|
||||
>
|
||||
<ShoppingCart className={`w-4 h-4 transition-colors ${activeTab === 'lists' ? 'text-[#1d8cf8]' : 'text-zinc-400'}`} />
|
||||
<ShoppingCart className="w-4 h-4" />
|
||||
<span>Geteilte Listen</span>
|
||||
</button>
|
||||
|
||||
@@ -290,13 +256,9 @@ export const App: React.FC = () => {
|
||||
triggerHaptic(10);
|
||||
setActiveTab('ecosystem');
|
||||
}}
|
||||
className={`h-9 px-3.5 text-xs sm:text-sm font-medium flex items-center gap-1.5 flex-shrink-0 transition-colors select-none border-b-2 ${
|
||||
activeTab === 'ecosystem'
|
||||
? 'border-[#1d8cf8] text-white bg-white/[0.04]'
|
||||
: 'border-transparent text-zinc-400 hover:text-white hover:bg-white/[0.03]'
|
||||
}`}
|
||||
className={`tab-btn ${activeTab === 'ecosystem' ? 'tab-btn-active' : ''}`}
|
||||
>
|
||||
<Webhook className={`w-4 h-4 transition-colors ${activeTab === 'ecosystem' ? 'text-[#1d8cf8]' : 'text-zinc-400'}`} />
|
||||
<Webhook className="w-4 h-4" />
|
||||
<span>Webhooks & Export</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user