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

style: reduce padding, adopt crisp square tabs/cards, keep round buttons and single accent
MindSift CI & Docker Release / Build, Test in Container & Push (push) Successful in 51s
Details

Browse Source
This commit is contained in:
sandrodach committed 2026-10-24 19:43:59 +02:00
1 parent 3263b07e72
commit da82caf82c
7 files changed
+345 -371
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/features/capture/InstantCaptureBar.tsx
+16 -18
View File
@@ -131,18 +131,18 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
};
return (
<div className="w-full max-w-3xl mx-auto">
<div className="w-full">
<form onSubmit={handleSubmit} className="relative">
{/* Capsule Input Bar */}
{/* Capture Input Bar */}
<div
className={`flex items-center h-14 px-3.5 sm:px-4 rounded-2xl bg-[#222428] border transition-colors duration-150 ${
className={`flex items-center h-11 pl-2 pr-1.5 bg-[#222428] border rounded-full transition-colors duration-150 ${
isListening
? 'border-[#1d8cf8] bg-[#222428]'
: 'border-white/[0.08] focus-within:border-[#1d8cf8]/80'
: 'border-white/[0.08] focus-within:border-[#1d8cf8]'
}`}
>
<div className="w-8 h-8 rounded-xl bg-[#1d8cf8] text-white flex items-center justify-center mr-3 flex-shrink-0">
<Sparkles className="w-4 h-4" />
<div className="w-7 h-7 rounded-full bg-[#1d8cf8] text-white flex items-center justify-center mr-2 flex-shrink-0">
<Sparkles className="w-3.5 h-3.5" />
</div>
<input
@@ -155,7 +155,7 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
? 'Ich höre zu…'
: 'Gedanke, Idee oder Zutat sofort festhalten… (Taste C oder /)'
}
className="w-full bg-transparent text-white placeholder-zinc-500 text-sm sm:text-base focus:outline-none"
className="w-full bg-transparent text-white placeholder-zinc-500 text-xs sm:text-sm focus:outline-none"
autoComplete="off"
/>
@@ -165,7 +165,7 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
type="button"
onClick={() => setShowOptions((prev) => !prev)}
title="Priorität & Fälligkeit"
className={`h-8 px-2.5 rounded-full text-xs flex items-center gap-1.5 transition-colors ${
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]'
@@ -182,20 +182,20 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
type="button"
onClick={toggleVoiceDictation}
title="Spracheingabe"
className={`w-8 h-8 rounded-full flex items-center justify-center transition-colors ${
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]'
}`}
>
{isListening ? <MicOff className="w-4 h-4" /> : <Mic className="w-4 h-4" />}
{isListening ? <MicOff className="w-3.5 h-3.5" /> : <Mic className="w-3.5 h-3.5" />}
</button>
{/* Instant Send Button */}
<button
type="submit"
disabled={!content.trim() || isSubmitting}
className={`h-9 px-4 rounded-full font-medium text-xs flex items-center gap-1.5 transition-all ${
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'
@@ -216,9 +216,9 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
</div>
</div>
{/* Expandable Quick Metadata Pills */}
{/* Expandable Quick Metadata */}
{showOptions && (
<div className="mt-2.5 px-4 py-3 rounded-2xl bg-[#222428] 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-[#1c1e22] border border-white/[0.08] 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) => {
@@ -234,11 +234,9 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
key={p}
type="button"
onClick={() => setPriority(p)}
className={`px-3 py-1 rounded-full transition-colors ${
className={`px-2.5 py-0.5 rounded-full transition-colors text-xs ${
active
? p === 'urgent'
? 'bg-[#ef4444] text-white font-medium'
: 'bg-[#1d8cf8] text-white font-medium'
? 'bg-[#1d8cf8] text-white font-medium'
: 'bg-[#16171a] text-zinc-400 hover:text-white border border-white/[0.06]'
}`}
>
@@ -254,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-3 py-1 rounded-full border border-white/[0.08] text-xs focus:outline-none focus:border-[#1d8cf8]"
className="bg-[#16171a] text-white px-2 py-0.5 border border-white/[0.08] text-xs focus:outline-none focus:border-[#1d8cf8]"
/>
</div>
</div>