sandrodach/MindSift
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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
Details

Browse Source
This commit is contained in:
sandrodach committed 2026-10-24 20:07:27 +02:00
1 parent 94123c9424
commit ec9ba8fd9f
9 files changed
+428 -304
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/features/capture/InstantCaptureBar.tsx
+14 -14
View File
@@ -135,13 +135,13 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
<form onSubmit={handleSubmit} className="relative">
{/* Capture Input Bar */}
<div
className={`flex items-center h-11 pl-2 pr-1.5 bg-[#222428] border rounded-full transition-colors duration-150 ${
className={`flex items-center h-11 pl-2 pr-1.5 bg-panel border rounded-full transition-colors duration-150 ${
isListening
? 'border-[#1d8cf8] bg-[#222428]'
: 'border-white/[0.08] focus-within:border-[#1d8cf8]'
? 'border-accent bg-panel'
: 'border-border focus-within:border-accent'
}`}
>
<div className="w-7 h-7 rounded-full bg-[#1d8cf8] text-white flex items-center justify-center mr-2 flex-shrink-0">
<div className="w-7 h-7 rounded-full bg-accent text-white flex items-center justify-center mr-2 flex-shrink-0">
<Sparkles className="w-3.5 h-3.5" />
</div>
@@ -167,8 +167,8 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
title="Priorität & Fälligkeit"
className={`h-7 px-2.5 rounded-full text-xs flex items-center gap-1.5 transition-colors ${
showOptions || priority !== 'normal' || dueDate
? 'bg-[#1d8cf8]/20 text-[#1d8cf8] border border-[#1d8cf8]/40'
: 'text-zinc-400 hover:text-white hover:bg-[#2b2d33]'
? 'bg-accent/20 text-accent border border-accent/40'
: 'text-zinc-400 hover:text-white hover:bg-panel-elevated'
}`}
>
<Calendar className="w-3.5 h-3.5" />
@@ -184,8 +184,8 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
title="Spracheingabe"
className={`w-7 h-7 rounded-full flex items-center justify-center transition-colors ${
isListening
? 'bg-[#1d8cf8]/20 text-[#1d8cf8]'
: 'text-zinc-400 hover:text-white hover:bg-[#2b2d33]'
? 'bg-accent/20 text-accent'
: 'text-zinc-400 hover:text-white hover:bg-panel-elevated'
}`}
>
{isListening ? <MicOff className="w-3.5 h-3.5" /> : <Mic className="w-3.5 h-3.5" />}
@@ -197,8 +197,8 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
disabled={!content.trim() || isSubmitting}
className={`h-7 px-3 rounded-full font-medium text-xs flex items-center gap-1.5 transition-all ${
content.trim()
? 'bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white cursor-pointer shadow-sm'
: 'bg-[#2b2d33] text-zinc-500 cursor-not-allowed'
? 'bg-accent hover:bg-accent-hover text-white cursor-pointer shadow-sm'
: 'bg-panel-elevated text-zinc-500 cursor-not-allowed'
}`}
>
{justSaved ? (
@@ -218,7 +218,7 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
{/* Expandable Quick Metadata */}
{showOptions && (
<div className="mt-1 px-3 py-2 bg-[#1c1e22] border border-white/[0.08] flex flex-wrap items-center justify-between gap-2 text-xs">
<div className="mt-1 px-3 py-2 bg-panel border border-border flex flex-wrap items-center justify-between gap-2 text-xs">
<div className="flex items-center gap-1.5">
<span className="text-zinc-400 mr-1">Priorität:</span>
{(['low', 'normal', 'high', 'urgent'] as PriorityLevel[]).map((p) => {
@@ -236,8 +236,8 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
onClick={() => setPriority(p)}
className={`px-2.5 py-0.5 rounded-full transition-colors text-xs ${
active
? 'bg-[#1d8cf8] text-white font-medium'
: 'bg-[#16171a] text-zinc-400 hover:text-white border border-white/[0.06]'
? 'bg-accent text-white font-medium'
: 'bg-canvas text-zinc-400 hover:text-white border border-border'
}`}
>
{labels[p]}
@@ -252,7 +252,7 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
type="date"
value={dueDate}
onChange={(e) => setDueDate(e.target.value)}
className="bg-[#16171a] text-white px-2 py-0.5 border border-white/[0.08] text-xs focus:outline-none focus:border-[#1d8cf8]"
className="input-field px-2 py-0.5 text-xs"
/>
</div>
</div>