refactor BottomToolbar and ThemeToggle components; update disconnect button styles

Author: jasonkneen

src/app/components/BottomToolbar.tsx

@@ -40,11 +40,7 @@ function BottomToolbar({
   function getConnectionButtonClasses() {
     const baseClasses = "text-white text-base p-2 w-36 rounded-lg h-full transition-all duration-200 disconnect-btn";
     const cursorClass = isConnecting ? "cursor-not-allowed" : "cursor-pointer";
-
-    if (isConnected) {
-      return `${cursorClass} ${baseClasses}`;
-    }
-    return `bg-surface dark:bg-surface hover:bg-surface/90 dark:hover:bg-surface/90 ${cursorClass} ${baseClasses}`;
+    return `${cursorClass} ${baseClasses}`;
   }
 
   return (

src/app/components/ThemeToggle.tsx

@@ -23,7 +23,23 @@ export function ThemeToggle() {
           className="p-2 rounded-lg bg-primary/10 hover:bg-primary/20 transition-colors dark:bg-primary/20 dark:hover:bg-primary/30"
           aria-label="Toggle dark mode"
         >
-          {mode === 'light' ? '🌙' : '☀️'}
+          {mode === 'light' ? (
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+            </svg>
+          ) : (
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <circle cx="12" cy="12" r="5"></circle>
+              <line x1="12" y1="1" x2="12" y2="3"></line>
+              <line x1="12" y1="21" x2="12" y2="23"></line>
+              <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+              <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+              <line x1="1" y1="12" x2="3" y2="12"></line>
+              <line x1="21" y1="12" x2="23" y2="12"></line>
+              <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+              <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+            </svg>
+          )}
         </button>
 
         {/* Theme Selector Toggle */}
@@ -32,7 +48,14 @@ export function ThemeToggle() {
           className="p-2 rounded-lg bg-primary/10 hover:bg-primary/20 transition-colors dark:bg-primary/20 dark:hover:bg-primary/30"
           aria-label="Select theme"
         >
-          🎨
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <circle cx="12" cy="12" r="10"></circle>
+            <circle cx="12" cy="12" r="4"></circle>
+            <line x1="12" y1="2" x2="12" y2="4"></line>
+            <line x1="12" y1="20" x2="12" y2="22"></line>
+            <line x1="2" y1="12" x2="4" y2="12"></line>
+            <line x1="20" y1="12" x2="22" y2="12"></line>
+          </svg>
         </button>
       </div>
 
@@ -57,4 +80,4 @@ export function ThemeToggle() {
       )}
     </>
   );
-}
+}

src/app/globals.css

@@ -12,6 +12,9 @@
   --muted: #6b7280;
   --border: #6b7280;
   --divider: #282828;
+  --disconnect: #dc2626;
+  --disconnect-hover: #b91c1c;
+  --surface: #f1f5f9;
 }
 
 /* Default Dark Theme */
@@ -61,13 +64,13 @@
               box-shadow 0.1s ease-in-out;
 }
 
-/* Dark mode specific button styles */
-.dark .disconnect-btn {
+/* Disconnect button styles */
+.disconnect-btn {
   background: var(--disconnect);
-  border: 1px solid var(--panel-border);
+  border: 1px solid var(--border);
 }
 
-.dark .disconnect-btn:hover {
+.disconnect-btn:hover {
   background: var(--disconnect-hover);
 }
 /* Blue Theme - Light */