style: align UI with mobile productivity template and remove Google/Gemini references

2026-10-24 18:59:00 +02:00
1 parent 31aa43c460
commit c99b6c3a49
@@ -8,9 +8,14 @@ import {
  Brain,
  LogOut,
  User as UserIcon,
+  Plus,
+  Bell,
+  Shield,
+  ChevronRight,
+  Sparkles,
 } from 'lucide-react';
 import { DashboardStats, SharedList, Thought, User } from './lib/types';
-import { api, clearToken, getToken } from './lib/api';
+import { api, clearToken, getToken, triggerHaptic } from './lib/api';
 import { InstantCaptureBar } from './features/capture/InstantCaptureBar';
 import { TriageDeck } from './features/triage/TriageDeck';
 import { TasksView } from './features/triage/TasksView';
@@ -36,13 +41,14 @@ export const App: React.FC = () => {
  const [selectedDocId, setSelectedDocId] = useState<string | null>(null);
  const [captureFocusCount, setCaptureFocusCount] = useState(0);

-  // Auth Modal State for switching or registering additional family members
-  const [showAuthModal, setShowAuthModal] = useState(false);
+  // Profile & Auth Modal State (aligned with Template Screen 2)
+  const [showProfileModal, setShowProfileModal] = useState(false);
  const [authMode, setAuthMode] = useState<'login' | 'register'>('login');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [displayName, setDisplayName] = useState('');
  const [authError, setAuthError] = useState('');
+  const [notificationsEnabled, setNotificationsEnabled] = useState(true);

  const refreshAll = async () => {
    try {
@@ -107,16 +113,24 @@ export const App: React.FC = () => {
    setActiveTab('workspace');
  };

+  const handleTriggerAddButton = () => {
+    triggerHaptic(20);
+    // Scroll smoothly to top and focus capture bar
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+    setCaptureFocusCount((c) => c + 1);
+  };
+
  const handleAuthSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setAuthError('');
+    triggerHaptic(15);
    try {
      if (authMode === 'login') {
        await api.login(email, password);
      } else {
        await api.register(email, password, displayName);
      }
-      setShowAuthModal(false);
+      setShowProfileModal(false);
      setEmail('');
      setPassword('');
      setDisplayName('');
@@ -126,49 +140,62 @@ export const App: React.FC = () => {
    }
  };

+  const handleLogout = async () => {
+    triggerHaptic(20);
+    clearToken();
+    await api.quickStart();
+    await refreshAll();
+    setShowProfileModal(false);
+  };
+
  return (
-    <div className="min-h-screen bg-[#131314] text-[#e3e3e3] flex flex-col font-sans">
-      {/* Header Bar */}
-      <header className="sticky top-0 z-30 bg-[#131314]/95 backdrop-blur-md border-b border-white/[0.08]">
+    <div className="min-h-screen bg-[#16171a] text-white flex flex-col font-sans selection:bg-[#1d8cf8]/30">
+      {/* Top Header Bar */}
+      <header className="sticky top-0 z-30 bg-[#16171a]/95 backdrop-blur-md border-b border-white/[0.08]">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between gap-4">
-          {/* Brand Logo */}
+          {/* Logo & Headline */}
          <div
            onClick={() => {
              setActiveTab('triage');
-              setCaptureFocusCount((c) => c + 1);
+              handleTriggerAddButton();
            }}
-            className="flex items-center gap-2.5 cursor-pointer group select-none"
+            className="flex items-center gap-3 cursor-pointer group select-none"
          >
-            <div className="w-8 h-8 rounded-full bg-[#1e1f20] border border-white/[0.08] flex items-center justify-center group-hover:border-[#a8c7fa]/50 transition-colors">
-              <Brain className="w-4 h-4 text-[#a8c7fa]" />
+            <div className="w-9 h-9 rounded-xl bg-[#1d8cf8] text-white flex items-center justify-center shadow-sm group-hover:scale-105 transition-transform">
+              <Brain className="w-5 h-5" />
            </div>
-            <div className="flex items-baseline gap-2">
-              <span className="font-semibold text-base sm:text-lg text-[#e3e3e3] tracking-tight">
+            <div className="flex flex-col">
+              <span className="font-bold text-base sm:text-lg text-white tracking-tight leading-none">
                MindSift
              </span>
-              <span className="hidden md:inline-block text-xs text-[#8e918f]">
+              <span className="text-[11px] text-zinc-400 mt-0.5 hidden sm:inline-block">
                Der Kopf frei in drei Sekunden
              </span>
            </div>
          </div>

-          {/* Right User Pill */}
+          {/* User Profile Pill matching Template Screen 2 */}
          <div className="flex items-center gap-2">
            <button
-              onClick={() => setShowAuthModal(true)}
-              className="h-8 px-3 rounded-full bg-[#1e1f20] hover:bg-[#282a2c] border border-white/[0.08] text-xs font-normal text-[#c4c7c5] hover:text-[#e3e3e3] flex items-center gap-2 transition-colors"
-              title="Benutzer wechseln oder Profil anpassen"
+              onClick={() => {
+                triggerHaptic(10);
+                setShowProfileModal(true);
+              }}
+              className="h-9 px-3.5 rounded-full bg-[#222428] hover:bg-[#282a2f] border border-white/[0.08] text-xs font-medium text-white flex items-center gap-2.5 transition-colors shadow-sm"
+              title="Profil & Einstellungen"
            >
-              <UserIcon className="w-3.5 h-3.5 text-[#a8c7fa]" />
-              <span>{user?.displayName || 'Lokal'}</span>
+              <div className="w-5 h-5 rounded-full bg-[#1d8cf8] 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>
            </button>
          </div>
        </div>
      </header>

-      {/* Main Content Container */}
-      <main className="flex-1 max-w-6xl w-full mx-auto px-4 sm:px-6 pt-6 pb-20">
-        {/* Global Instant Capture Section */}
+      {/* Main Container */}
+      <main className="flex-1 max-w-6xl w-full mx-auto px-4 sm:px-6 pt-5 pb-28">
+        {/* Instant Capture Section */}
        <section className="mb-6">
          <InstantCaptureBar
            onCaptured={handleCaptured}
@@ -176,83 +203,116 @@ export const App: React.FC = () => {
          />
        </section>

-        {/* Google Material 3 Navigation Chips */}
-        <nav className="flex items-center justify-start sm:justify-center gap-1.5 overflow-x-auto pb-2 mb-8 no-scrollbar">
+        {/* Top Filter / Tab Pills matching Template Screen 3 */}
+        <nav className="flex items-center justify-start sm:justify-center gap-2 overflow-x-auto pb-2 mb-8 no-scrollbar">
          <button
-            onClick={() => setActiveTab('triage')}
-            className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-colors ${
+            onClick={() => {
+              triggerHaptic(10);
+              setActiveTab('triage');
+            }}
+            className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-all ${
              activeTab === 'triage'
-                ? 'bg-[#282a2c] text-[#e3e3e3] font-medium border border-white/[0.12]'
-                : 'text-[#c4c7c5] hover:text-[#e3e3e3] hover:bg-[#1e1f20]'
+                ? 'bg-[#1d8cf8] text-white font-semibold shadow-sm'
+                : 'bg-[#222428] text-zinc-400 hover:text-white hover:bg-[#282a2f] border border-white/[0.06]'
            }`}
          >
-            <Layers className="w-4 h-4 text-[#a8c7fa]" />
-            <span>Triage-Deck</span>
+            <Layers className="w-4 h-4" />
+            <span>Triage</span>
            {stats.inboxCount > 0 && (
-              <span className="px-1.5 py-0.2 rounded-full text-[11px] bg-[#1e1f20] text-[#a8c7fa] border border-white/[0.06]">
+              <span
+                className={`px-1.5 py-0.5 rounded-full text-[10px] font-bold ${
+                  activeTab === 'triage'
+                    ? 'bg-white text-[#1d8cf8]'
+                    : 'bg-[#16171a] text-[#1d8cf8]'
+                }`}
+              >
                {stats.inboxCount}
              </span>
            )}
          </button>

          <button
-            onClick={() => setActiveTab('tasks')}
-            className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-colors ${
+            onClick={() => {
+              triggerHaptic(10);
+              setActiveTab('tasks');
+            }}
+            className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-all ${
              activeTab === 'tasks'
-                ? 'bg-[#282a2c] text-[#e3e3e3] font-medium border border-white/[0.12]'
-                : 'text-[#c4c7c5] hover:text-[#e3e3e3] hover:bg-[#1e1f20]'
+                ? 'bg-[#1d8cf8] text-white font-semibold shadow-sm'
+                : 'bg-[#222428] text-zinc-400 hover:text-white hover:bg-[#282a2f] border border-white/[0.06]'
            }`}
          >
-            <CheckSquare className="w-4 h-4 text-[#a8dab5]" />
+            <CheckSquare className="w-4 h-4" />
            <span>Aufgaben</span>
            {stats.tasksOpenCount > 0 && (
-              <span className="px-1.5 py-0.2 rounded-full text-[11px] bg-[#1e1f20] text-[#a8dab5] border border-white/[0.06]">
+              <span
+                className={`px-1.5 py-0.5 rounded-full text-[10px] font-bold ${
+                  activeTab === 'tasks'
+                    ? 'bg-white text-[#1d8cf8]'
+                    : 'bg-[#16171a] text-[#22c55e]'
+                }`}
+              >
                {stats.tasksOpenCount}
              </span>
            )}
          </button>

          <button
-            onClick={() => setActiveTab('workspace')}
-            className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-colors ${
+            onClick={() => {
+              triggerHaptic(10);
+              setActiveTab('workspace');
+            }}
+            className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-all ${
              activeTab === 'workspace'
-                ? 'bg-[#282a2c] text-[#e3e3e3] font-medium border border-white/[0.12]'
-                : 'text-[#c4c7c5] hover:text-[#e3e3e3] hover:bg-[#1e1f20]'
+                ? 'bg-[#1d8cf8] text-white font-semibold shadow-sm'
+                : 'bg-[#222428] text-zinc-400 hover:text-white hover:bg-[#282a2f] border border-white/[0.06]'
            }`}
          >
-            <FileText className="w-4 h-4 text-[#a8c7fa]" />
+            <FileText className="w-4 h-4" />
            <span>Workspace</span>
-            <span className="px-1.5 py-0.2 rounded-full text-[11px] bg-[#1e1f20] text-[#8e918f] border border-white/[0.06]">
+            <span
+              className={`px-1.5 py-0.5 rounded-full text-[10px] font-bold ${
+                activeTab === 'workspace'
+                  ? 'bg-white text-[#1d8cf8]'
+                  : 'bg-[#16171a] text-zinc-400'
+              }`}
+            >
              {stats.docsCount}
            </span>
          </button>

          <button
-            onClick={() => setActiveTab('lists')}
-            className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-colors ${
+            onClick={() => {
+              triggerHaptic(10);
+              setActiveTab('lists');
+            }}
+            className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-all ${
              activeTab === 'lists'
-                ? 'bg-[#282a2c] text-[#e3e3e3] font-medium border border-white/[0.12]'
-                : 'text-[#c4c7c5] hover:text-[#e3e3e3] hover:bg-[#1e1f20]'
+                ? 'bg-[#1d8cf8] text-white font-semibold shadow-sm'
+                : 'bg-[#222428] text-zinc-400 hover:text-white hover:bg-[#282a2f] border border-white/[0.06]'
            }`}
          >
-            <ShoppingCart className="w-4 h-4 text-[#a8dab5]" />
+            <ShoppingCart className="w-4 h-4" />
            <span>Geteilte Listen</span>
          </button>

          <button
-            onClick={() => setActiveTab('ecosystem')}
-            className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-colors ${
+            onClick={() => {
+              triggerHaptic(10);
+              setActiveTab('ecosystem');
+            }}
+            className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-all ${
              activeTab === 'ecosystem'
-                ? 'bg-[#282a2c] text-[#e3e3e3] font-medium border border-white/[0.12]'
-                : 'text-[#c4c7c5] hover:text-[#e3e3e3] hover:bg-[#1e1f20]'
+                ? 'bg-[#1d8cf8] text-white font-semibold shadow-sm'
+                : 'bg-[#222428] text-zinc-400 hover:text-white hover:bg-[#282a2f] border border-white/[0.06]'
            }`}
          >
-            <Webhook className="w-4 h-4 text-[#fdd663]" />
+            <Webhook className="w-4 h-4" />
            <span>Webhooks & Export</span>
          </button>
        </nav>

-        {/* Active View Content */}
+        {/* Tab View Content */}
        <section>
          {activeTab === 'triage' && (
            <TriageDeck
@@ -260,7 +320,7 @@ export const App: React.FC = () => {
              lists={lists}
              onDeckChange={refreshAll}
              onOpenDocument={handleOpenDocument}
-              onFocusCapture={() => setCaptureFocusCount((c) => c + 1)}
+              onFocusCapture={handleTriggerAddButton}
            />
          )}

@@ -288,77 +348,157 @@ export const App: React.FC = () => {
        </section>
      </main>

-      {/* Account Switcher / Registration Modal */}
-      {showAuthModal && (
-        <div className="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4">
-          <div className="w-full max-w-md p-6 rounded-3xl bg-[#1e1f20] border border-[#3c4043] shadow-card">
-            <div className="flex items-center justify-between mb-5">
-              <h3 className="text-base font-semibold text-[#e3e3e3]">
-                {authMode === 'login' ? 'Konto wechseln' : 'Neues Familien-Konto anlegen'}
-              </h3>
+      {/* Floating Bottom Navigation Dock matching Template Screen 3 */}
+      <footer className="fixed bottom-0 left-0 right-0 z-40 bg-[#1c1e22]/95 backdrop-blur-lg border-t border-white/[0.08] px-4 py-2 sm:py-3 shadow-2xl">
+        <div className="max-w-md mx-auto flex items-center justify-between relative px-2">
+          {/* Triage / Inbox */}
+          <button
+            onClick={() => {
+              triggerHaptic(10);
+              setActiveTab('triage');
+            }}
+            className={`flex flex-col items-center justify-center p-2 rounded-xl transition-colors ${
+              activeTab === 'triage' ? 'text-[#1d8cf8]' : 'text-zinc-400 hover:text-white'
+            }`}
+            title="Triage Deck"
+          >
+            <Layers className="w-5 h-5" />
+            <span className="text-[10px] mt-1 font-medium">Triage</span>
+          </button>
+
+          {/* Tasks */}
+          <button
+            onClick={() => {
+              triggerHaptic(10);
+              setActiveTab('tasks');
+            }}
+            className={`flex flex-col items-center justify-center p-2 rounded-xl transition-colors ${
+              activeTab === 'tasks' ? 'text-[#1d8cf8]' : 'text-zinc-400 hover:text-white'
+            }`}
+            title="Aufgaben"
+          >
+            <CheckSquare className="w-5 h-5" />
+            <span className="text-[10px] mt-1 font-medium">Aufgaben</span>
+          </button>
+
+          {/* Center Floating Action Button matching Template + Button */}
+          <div className="relative -top-5 flex flex-col items-center">
+            <button
+              onClick={handleTriggerAddButton}
+              className="w-13 h-13 sm:w-14 sm:h-14 rounded-full bg-[#1d8cf8] hover:bg-[#1877d5] active:scale-95 text-white flex items-center justify-center shadow-lg shadow-blue-500/30 border-4 border-[#16171a] transition-all"
+              title="Gedanke erfassen"
+            >
+              <Plus className="w-6 h-6 stroke-[2.5]" />
+            </button>
+            <span className="text-[10px] font-medium text-zinc-300 mt-1">Erfassen</span>
+          </div>
+
+          {/* Lists */}
+          <button
+            onClick={() => {
+              triggerHaptic(10);
+              setActiveTab('lists');
+            }}
+            className={`flex flex-col items-center justify-center p-2 rounded-xl transition-colors ${
+              activeTab === 'lists' ? 'text-[#1d8cf8]' : 'text-zinc-400 hover:text-white'
+            }`}
+            title="Listen"
+          >
+            <ShoppingCart className="w-5 h-5" />
+            <span className="text-[10px] mt-1 font-medium">Listen</span>
+          </button>
+
+          {/* Workspace */}
+          <button
+            onClick={() => {
+              triggerHaptic(10);
+              setActiveTab('workspace');
+            }}
+            className={`flex flex-col items-center justify-center p-2 rounded-xl transition-colors ${
+              activeTab === 'workspace' ? 'text-[#1d8cf8]' : 'text-zinc-400 hover:text-white'
+            }`}
+            title="Workspace"
+          >
+            <FileText className="w-5 h-5" />
+            <span className="text-[10px] mt-1 font-medium">Workspace</span>
+          </button>
+        </div>
+      </footer>
+
+      {/* Profile & Settings Modal styled identically to Template Screen 2 */}
+      {showProfileModal && (
+        <div className="fixed inset-0 z-50 bg-black/70 backdrop-blur-sm flex items-center justify-center p-4">
+          <div className="w-full max-w-sm rounded-3xl bg-[#222428] border border-white/[0.08] shadow-2xl p-6 overflow-hidden">
+            {/* Screen 2: Top Profile Card */}
+            <div className="flex flex-col items-center text-center mb-6">
+              <div className="w-20 h-20 rounded-full bg-[#1d8cf8] text-white text-2xl font-bold flex items-center justify-center shadow-lg mb-3 ring-4 ring-white/[0.05]">
+                {user?.displayName ? user.displayName.slice(0, 1).toUpperCase() : 'U'}
+              </div>
+              <h2 className="text-xl font-bold text-white tracking-tight">
+                {user?.displayName || 'Standard Benutzer'}
+              </h2>
+              <p className="text-xs text-zinc-400 mt-0.5">
+                {user?.email || 'lokal@mindsift.local'}
+              </p>
+
+              {/* Template Screen 2: Blue Pill Edit Button */}
              <button
-                onClick={() => setShowAuthModal(false)}
-                className="px-2.5 py-1 rounded-full bg-[#282a2c] text-xs text-[#c4c7c5] hover:text-[#e3e3e3]"
+                onClick={() => setAuthMode(authMode === 'login' ? 'register' : 'login')}
+                className="mt-3 px-5 py-1.5 rounded-full bg-[#1d8cf8] hover:bg-[#167ad6] text-white text-xs font-semibold shadow-sm transition-all"
              >
-                Schließen
+                {authMode === 'login' ? 'Konto wechseln' : 'Neues Konto anlegen'}
              </button>
            </div>

-            {user && (
-              <div className="mb-4 p-3 rounded-2xl bg-[#131314] border border-white/[0.08] flex items-center justify-between">
-                <div className="text-xs">
-                  <span className="text-[#8e918f]">Aktiv: </span>
-                  <strong className="text-[#e3e3e3]">{user.displayName}</strong>
-                  <span className="text-[#8e918f] ml-1">({user.email})</span>
+            {/* Template Screen 2: Capsule Settings Sections */}
+            <div className="space-y-3 mb-6">
+              {/* Notification toggle capsule */}
+              <div className="p-3.5 rounded-2xl bg-[#282a2f] border border-white/[0.04] flex items-center justify-between">
+                <div className="flex items-center gap-3">
+                  <div className="w-8 h-8 rounded-lg bg-[#22c55e]/20 text-[#22c55e] flex items-center justify-center">
+                    <Bell className="w-4 h-4" />
+                  </div>
+                  <span className="text-xs font-medium text-white">Benachrichtigungen</span>
                </div>
                <button
                  type="button"
-                  onClick={async () => {
-                    clearToken();
-                    await api.quickStart();
-                    await refreshAll();
-                    setShowAuthModal(false);
-                  }}
-                  className="text-xs text-[#a8c7fa] hover:underline flex items-center gap-1"
+                  onClick={() => setNotificationsEnabled(!notificationsEnabled)}
+                  className={`w-11 h-6 rounded-full transition-colors relative p-0.5 ${
+                    notificationsEnabled ? 'bg-[#1d8cf8]' : 'bg-zinc-600'
+                  }`}
                >
-                  <LogOut className="w-3 h-3" /> Standard
+                  <div
+                    className={`w-5 h-5 rounded-full bg-white transition-transform ${
+                      notificationsEnabled ? 'translate-x-5' : 'translate-x-0'
+                    }`}
+                  />
                </button>
              </div>
-            )}

-            <div className="flex gap-2 mb-4">
-              <button
-                type="button"
-                onClick={() => setAuthMode('login')}
-                className={`flex-1 h-8 rounded-full text-xs font-medium ${
-                  authMode === 'login'
-                    ? 'bg-[#282a2c] text-[#e3e3e3] border border-white/[0.12]'
-                    : 'text-[#8e918f] hover:text-[#e3e3e3]'
-                }`}
-              >
-                Anmelden
-              </button>
-              <button
-                type="button"
-                onClick={() => setAuthMode('register')}
-                className={`flex-1 h-8 rounded-full text-xs font-medium ${
-                  authMode === 'register'
-                    ? 'bg-[#282a2c] text-[#e3e3e3] border border-white/[0.12]'
-                    : 'text-[#8e918f] hover:text-[#e3e3e3]'
-                }`}
-              >
-                Registrieren
-              </button>
+              {/* Security info capsule */}
+              <div className="p-3.5 rounded-2xl bg-[#282a2f] border border-white/[0.04] flex items-center justify-between">
+                <div className="flex items-center gap-3">
+                  <div className="w-8 h-8 rounded-lg bg-[#1d8cf8]/20 text-[#1d8cf8] flex items-center justify-center">
+                    <Shield className="w-4 h-4" />
+                  </div>
+                  <div>
+                    <span className="text-xs font-medium text-white block">Sicherheit</span>
+                    <span className="text-[10px] text-zinc-400">Lokale SQLite Verschlüsselung</span>
+                  </div>
+                </div>
+                <ChevronRight className="w-4 h-4 text-zinc-500" />
+              </div>
            </div>

-            <form onSubmit={handleAuthSubmit} className="space-y-3">
+            {/* Auth Switcher Form if switching accounts */}
+            <form onSubmit={handleAuthSubmit} className="space-y-2.5 mb-4">
              {authMode === 'register' && (
                <input
                  type="text"
                  value={displayName}
                  onChange={(e) => setDisplayName(e.target.value)}
-                  placeholder="Anzeigename (z. B. Lisa)"
-                  className="w-full h-10 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] placeholder-[#8e918f] border border-[#3c4043] focus:border-[#a8c7fa] focus:outline-none"
+                  placeholder="Anzeigename"
+                  className="w-full h-10 px-4 rounded-xl bg-[#16171a] text-xs text-white placeholder-zinc-500 border border-white/[0.08] focus:border-[#1d8cf8] focus:outline-none"
                  required
                />
              )}
@@ -366,28 +506,47 @@ export const App: React.FC = () => {
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
-                placeholder="E-Mail-Adresse"
-                className="w-full h-10 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] placeholder-[#8e918f] border border-[#3c4043] focus:border-[#a8c7fa] focus:outline-none"
+                placeholder="E-Mail"
+                className="w-full h-10 px-4 rounded-xl bg-[#16171a] text-xs text-white placeholder-zinc-500 border border-white/[0.08] focus:border-[#1d8cf8] focus:outline-none"
                required
              />
              <input
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
-                placeholder="Passwort (mind. 4 Zeichen)"
-                className="w-full h-10 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] placeholder-[#8e918f] border border-[#3c4043] focus:border-[#a8c7fa] focus:outline-none"
+                placeholder="Passwort"
+                className="w-full h-10 px-4 rounded-xl bg-[#16171a] text-xs text-white placeholder-zinc-500 border border-white/[0.08] focus:border-[#1d8cf8] focus:outline-none"
                required
              />

-              {authError && <p className="text-xs text-[#f28b82] px-2">{authError}</p>}
+              {authError && <p className="text-xs text-[#ef4444] px-1">{authError}</p>}

              <button
                type="submit"
-                className="w-full h-10 rounded-full bg-[#a8c7fa] text-[#041e49] font-medium text-sm hover:bg-[#b8d4ff] transition-colors"
+                className="w-full h-10 rounded-full bg-[#1d8cf8] hover:bg-[#167ad6] text-white font-semibold text-xs transition-colors shadow-sm"
              >
-                {authMode === 'login' ? 'Einloggen' : 'Konto erstellen'}
+                {authMode === 'login' ? 'Anmelden' : 'Registrieren'}
              </button>
            </form>
+
+            {/* Log Out Row matching Template Screen 2 */}
+            <div className="pt-2 border-t border-white/[0.06] flex items-center justify-between">
+              <button
+                type="button"
+                onClick={handleLogout}
+                className="text-xs text-[#ef4444] hover:underline flex items-center gap-1.5 font-medium py-1"
+              >
+                <LogOut className="w-3.5 h-3.5" />
+                <span>Abmelden</span>
+              </button>
+              <button
+                type="button"
+                onClick={() => setShowProfileModal(false)}
+                className="px-4 py-1.5 rounded-full bg-[#282a2f] hover:bg-[#32353a] text-xs text-zinc-300 font-medium transition-colors"
+              >
+                Fertig
+              </button>
+            </div>
          </div>
        </div>
      )}