From 1009487cceb3f085950a5eb1430ae072608522e7 Mon Sep 17 00:00:00 2001 From: Sandro Date: Sun, 25 Oct 2026 11:39:29 +0100 Subject: [PATCH] fix(theme): style share modal and inputs for dark mode compatibility --- .../src/features/lists/SharedListsView.tsx | 16 ++-- .../src/features/workspace/WorkspaceView.tsx | 85 +++++++++++++------ frontend/src/index.css | 56 +++++++++++- frontend/src/lib/theme.ts | 10 +++ 4 files changed, 128 insertions(+), 39 deletions(-) diff --git a/frontend/src/features/lists/SharedListsView.tsx b/frontend/src/features/lists/SharedListsView.tsx index fe16a33..e1bdbff 100644 --- a/frontend/src/features/lists/SharedListsView.tsx +++ b/frontend/src/features/lists/SharedListsView.tsx @@ -802,15 +802,15 @@ export const SharedListsView: React.FC = ({ onRefreshGloba )} {/* Invite User Form */} -
+
User direkt einladen
setInviteRole(e.target.value as 'editor' | 'viewer')} - className="input-base text-xs w-full sm:w-36" + className="input-field h-8 px-2.5 bg-input text-main border border-border rounded-btn focus:outline-none focus:border-accent text-xs w-full sm:w-36 cursor-pointer" > - - + +
@@ -840,7 +840,7 @@ export const SharedListsView: React.FC = ({ onRefreshGloba placeholder="Oder Benutzername / E-Mail direkt eingeben…" value={inviteTarget} onChange={(e) => setInviteTarget(e.target.value)} - className="input-base text-xs w-full" + className="input-field h-8 px-2.5 bg-input text-main border border-border rounded-btn focus:outline-none focus:border-accent text-xs w-full" /> )} diff --git a/frontend/src/features/workspace/WorkspaceView.tsx b/frontend/src/features/workspace/WorkspaceView.tsx index d77f00c..1f86b62 100644 --- a/frontend/src/features/workspace/WorkspaceView.tsx +++ b/frontend/src/features/workspace/WorkspaceView.tsx @@ -43,6 +43,7 @@ import { Lock, Unlock, Eye, + Edit3, Share, Share2, } from 'lucide-react'; @@ -2881,19 +2882,19 @@ export const WorkspaceView: React.FC = ({ {/* If current user is owner: can add shares and manage permissions */} {selectedDoc.isOwner !== false ? (
- +
Neuen Nutzer einladen / berechtigen
setSharePermission(e.target.value as 'read' | 'write')} - className="input-base text-xs w-full sm:w-36" + className="input-field h-8 px-2.5 bg-input text-main border border-border rounded-btn focus:outline-none focus:border-accent text-xs w-full sm:w-40 cursor-pointer" > - - + +
@@ -2915,7 +2916,7 @@ export const WorkspaceView: React.FC = ({ placeholder="Oder E-Mail-Adresse direkt eingeben…" value={shareTargetEmailOrId} onChange={(e) => setShareTargetEmailOrId(e.target.value)} - className="input-base text-xs w-full" + className="input-field h-8 px-2.5 bg-input text-main border border-border rounded-btn focus:outline-none focus:border-accent text-xs w-full" /> )} @@ -2935,7 +2936,7 @@ export const WorkspaceView: React.FC = ({
Aktuelle Freigaben ({docShares.length})
{docShares.length === 0 ? ( -
+
Diese Notiz ist bisher noch mit niemandem geteilt.
) : ( @@ -2943,7 +2944,7 @@ export const WorkspaceView: React.FC = ({ {docShares.map((share) => (
@@ -2958,11 +2959,11 @@ export const WorkspaceView: React.FC = ({
) : ( /* If current user is a collaborator */ -
-
Geteilte Notiz
-
- Besitzer: {selectedDoc.ownerName || 'Unbekannt'} -
-
- Deine Berechtigung:{' '} - - {selectedDoc.permission === 'write' ? 'Schreibzugriff (Bearbeiten erlaubt)' : 'Nur Lesezugriff'} - +
+ {/* Document & Owner Card */} +
+
+ Eigentümer der Notiz: + + + {(selectedDoc.ownerName || 'U').slice(0, 1).toUpperCase()} + + {selectedDoc.ownerName || 'Unbekannt'} + +
-
+ {/* Permission Card */} + {selectedDoc.permission === 'write' ? ( +
+
+ +
+
+
Schreibzugriff aktiv
+
+ Du hast Bearbeitungsrechte für diese Notiz und kannst Inhalte in Echtzeit anpassen. +
+
+
+ ) : ( +
+
+ +
+
+
Nur Lesezugriff
+
+ Du kannst diese Notiz ansehen und durchsuchen, aber keine Änderungen an den Inhalten vornehmen. +
+
+
+ )} + + {/* Action: Leave Share */} +
diff --git a/frontend/src/index.css b/frontend/src/index.css index 261721a..910c74b 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -178,8 +178,54 @@ body { border-color: var(--border-danger); } - /* Zentrales Texteingabefeld */ - .input-field { + /* Sekundärer Button */ + .btn-secondary { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.375rem; + height: 1.75rem; + padding-left: 0.75rem; + padding-right: 0.75rem; + background-color: var(--bg-panel-elevated); + border: 1px solid var(--border-color); + border-radius: var(--radius-btn); + color: var(--text-main); + font-size: 0.75rem; + font-weight: 500; + transition: all 120ms ease; + cursor: pointer; + } + .btn-secondary:hover { + background-color: var(--bg-panel-hover); + border-color: var(--border-strong); + } + + /* Gefahren-/Löschen-Button */ + .btn-danger { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.375rem; + height: 1.75rem; + padding-left: 0.75rem; + padding-right: 0.75rem; + background-color: var(--bg-danger); + border: 1px solid var(--border-danger); + border-radius: var(--radius-btn); + color: var(--color-danger); + font-size: 0.75rem; + font-weight: 500; + transition: all 120ms ease; + cursor: pointer; + } + .btn-danger:hover { + filter: brightness(1.15); + } + + /* Zentrales Texteingabefeld & Aliasse */ + .input-field, + .input-base { background-color: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-input); @@ -187,11 +233,13 @@ body { font-size: 0.75rem; transition: border-color 120ms ease; } - .input-field:focus { + .input-field:focus, + .input-base:focus { outline: none; border-color: var(--accent-primary); } - .input-field::placeholder { + .input-field::placeholder, + .input-base::placeholder { color: var(--text-faint); } diff --git a/frontend/src/lib/theme.ts b/frontend/src/lib/theme.ts index d121ed8..1cbac45 100644 --- a/frontend/src/lib/theme.ts +++ b/frontend/src/lib/theme.ts @@ -81,6 +81,11 @@ export function setActiveTheme(themeId: ThemeId): void { } if (typeof document !== 'undefined') { document.documentElement.setAttribute('data-theme', themeId); + if (themeId !== 'light') { + document.documentElement.classList.add('dark'); + } else { + document.documentElement.classList.remove('dark'); + } } } @@ -88,6 +93,11 @@ export function initThemeOnBoot(): ThemeId { const active = getActiveTheme(); if (typeof document !== 'undefined') { document.documentElement.setAttribute('data-theme', active); + if (active !== 'light') { + document.documentElement.classList.add('dark'); + } else { + document.documentElement.classList.remove('dark'); + } } return active; }