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

style: align UI with mobile productivity template and remove Google/Gemini references
MindSift CI & Docker Release / Lint, Build & Unit Tests (push) Failing after 2m16s
Details
MindSift CI & Docker Release / Build & Push Docker Image (push) Skipped
Details

Browse Source
This commit is contained in:
sandrodach committed 2026-10-24 18:59:00 +02:00
1 parent 31aa43c460
commit c99b6c3a49
11 files changed
+698 -495
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/features/capture/InstantCaptureBar.tsx
+22 -20
View File
@@ -133,15 +133,17 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
return (
<div className="w-full max-w-3xl mx-auto">
<form onSubmit={handleSubmit} className="relative">
{/* Google Gemini Style Input Capsule */}
{/* Capsule Input Bar */}
<div
className={`flex items-center h-14 px-4 sm:px-5 rounded-full bg-[#1e1f20] border transition-colors duration-150 ${
className={`flex items-center h-14 px-3.5 sm:px-4 rounded-2xl bg-[#222428] border transition-colors duration-150 ${
isListening
? 'border-[#a8c7fa] bg-[#1e1f20]'
: 'border-[#3c4043] focus-within:border-[#a8c7fa]'
? 'border-[#1d8cf8] bg-[#222428]'
: 'border-white/[0.08] focus-within:border-[#1d8cf8]/80'
}`}
>
<Sparkles className="w-4 h-4 mr-3 flex-shrink-0 text-[#a8c7fa]" />
<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>
<input
ref={inputRef}
@@ -153,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-[#e3e3e3] placeholder-[#8e918f] text-sm sm:text-base focus:outline-none"
className="w-full bg-transparent text-white placeholder-zinc-500 text-sm sm:text-base focus:outline-none"
autoComplete="off"
/>
@@ -165,8 +167,8 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
title="Priorität & Fälligkeit"
className={`h-8 px-2.5 rounded-full text-xs flex items-center gap-1.5 transition-colors ${
showOptions || priority !== 'normal' || dueDate
? 'bg-[#282a2c] text-[#a8c7fa] border border-[#a8c7fa]/30'
: 'text-[#8e918f] hover:text-[#e3e3e3] hover:bg-[#282a2c]'
? 'bg-[#1d8cf8]/20 text-[#1d8cf8] border border-[#1d8cf8]/40'
: 'text-zinc-400 hover:text-white hover:bg-[#2b2d33]'
}`}
>
<Calendar className="w-3.5 h-3.5" />
@@ -182,8 +184,8 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
title="Spracheingabe"
className={`w-8 h-8 rounded-full flex items-center justify-center transition-colors ${
isListening
? 'bg-[#004a77]/50 text-[#a8c7fa]'
: 'text-[#8e918f] hover:text-[#e3e3e3] hover:bg-[#282a2c]'
? '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" />}
@@ -193,10 +195,10 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
<button
type="submit"
disabled={!content.trim() || isSubmitting}
className={`h-8 px-3.5 rounded-full font-medium text-xs flex items-center gap-1.5 transition-colors ${
className={`h-9 px-4 rounded-full font-medium text-xs flex items-center gap-1.5 transition-all ${
content.trim()
? 'bg-[#a8c7fa] text-[#041e49] hover:bg-[#b8d4ff] cursor-pointer'
: 'bg-[#282a2c] text-[#8e918f] cursor-not-allowed'
? 'bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white cursor-pointer shadow-sm'
: 'bg-[#2b2d33] text-zinc-500 cursor-not-allowed'
}`}
>
{justSaved ? (
@@ -216,9 +218,9 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
{/* Expandable Quick Metadata Pills */}
{showOptions && (
<div className="mt-2 px-4 py-2.5 rounded-2xl bg-[#1e1f20] border border-[#3c4043] flex flex-wrap items-center justify-between gap-2 text-xs">
<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="flex items-center gap-1.5">
<span className="text-[#8e918f] mr-1">Priorität:</span>
<span className="text-zinc-400 mr-1">Priorität:</span>
{(['low', 'normal', 'high', 'urgent'] as PriorityLevel[]).map((p) => {
const labels: Record<PriorityLevel, string> = {
low: 'Niedrig',
@@ -235,9 +237,9 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
className={`px-3 py-1 rounded-full transition-colors ${
active
? p === 'urgent'
? 'bg-[#f28b82]/20 text-[#f28b82] border border-[#f28b82]/40 font-medium'
: 'bg-[#282a2c] text-[#a8c7fa] border border-[#a8c7fa]/30 font-medium'
: 'bg-[#131314] text-[#8e918f] hover:text-[#e3e3e3]'
? 'bg-[#ef4444] text-white font-medium'
: 'bg-[#1d8cf8] text-white font-medium'
: 'bg-[#16171a] text-zinc-400 hover:text-white border border-white/[0.06]'
}`}
>
{labels[p]}
@@ -247,12 +249,12 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
</div>
<div className="flex items-center gap-2">
<span className="text-[#8e918f]">Fällig am:</span>
<span className="text-zinc-400">Fällig am:</span>
<input
type="date"
value={dueDate}
onChange={(e) => setDueDate(e.target.value)}
className="bg-[#131314] text-[#e3e3e3] px-3 py-1 rounded-full border border-[#3c4043] text-xs focus:outline-none focus:border-[#a8c7fa]"
className="bg-[#16171a] text-white px-3 py-1 rounded-full border border-white/[0.08] text-xs focus:outline-none focus:border-[#1d8cf8]"
/>
</div>
</div>