styled dark mode slider

Author: garrettlchow

src/app/ThemeProvider.tsx

@@ -24,7 +24,11 @@ export const ThemeProvider = ({ children }) => {
   }, [isDark]);
 
   const toggleTheme = () => {
-    setIsDark((prev) => !prev);
+    setIsDark((prev) => {
+      const newTheme = !prev;
+      console.log(`Theme switched to: ${newTheme ? 'dark' : 'light'} mode`);
+      return newTheme;
+    });
   };
 
   return <ThemeContext.Provider value={{ isDark, toggleTheme }}>{children}</ThemeContext.Provider>;

src/app/components/Actions/RecordButton.tsx

@@ -5,34 +5,36 @@ import ThemeToggle from './ThemeToggle';
 const RecordButton = ({ isRecording, onToggle }) => {
   return (
     <div className='record-button-container'>
-      <div className='record-label'>
-        <div
-          className={`record-icon ${isRecording ? 'recording' : ''}`}
-          style={{
-            backgroundColor: isRecording ? '#ef4444' : '#9ca3af',
-            transition: 'background-color 0.3s ease',
+      <div className='record-controls'>
+        <div className='record-label'>
+          <div
+            className={`record-icon ${isRecording ? 'recording' : ''}`}
+            style={{
+              backgroundColor: isRecording ? '#ef4444' : '#9ca3af',
+              transition: 'background-color 0.3s ease',
+            }}
+          />
+          <span>Record</span>
+        </div>
+        <Switch
+          checked={isRecording}
+          onChange={onToggle}
+          sx={{
+            '& .MuiSwitch-switchBase': {
+              color: '#9ca3af',
+            },
+            '& .MuiSwitch-track': {
+              backgroundColor: '#e5e7eb',
+            },
+            '& .MuiSwitch-switchBase.Mui-checked': {
+              color: '#374151',
+            },
+            '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
+              backgroundColor: '#0284c7',
+            },
           }}
         />
-        <span>Record</span>
       </div>
-      <Switch
-        checked={isRecording}
-        onChange={onToggle}
-        sx={{
-          '& .MuiSwitch-switchBase': {
-            color: '#9ca3af',
-          },
-          '& .MuiSwitch-track': {
-            backgroundColor: '#e5e7eb',
-          },
-          '& .MuiSwitch-switchBase.Mui-checked': {
-            color: '#374151',
-          },
-          '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
-            backgroundColor: '#0284c7',
-          },
-        }}
-      />
       <ThemeToggle />
     </div>
   );

src/app/components/Actions/ThemeToggle.tsx

@@ -11,7 +11,11 @@ const ThemeToggle = () => {
       onClick={toggleTheme}
       aria-label={`Switch to ${isDark ? 'light' : 'dark'} mode`}
     >
-      {isDark ? <Sun className='theme-toggle-icon' /> : <Moon className='theme-toggle-icon' />}
+      <div className='theme-toggle-icons'>
+        <Moon className='theme-toggle-icon moon' />
+        <Sun className='theme-toggle-icon sun' />
+      </div>
+      <div className='theme-toggle-slider' />
     </button>
   );
 };

src/app/styles/components/_buttons.scss

@@ -61,7 +61,12 @@
   align-items: center;
   padding: 4px 16px;
   background: transparent;
-  gap: 8px;
+  justify-content: space-between;
+}
+
+.record-controls {
+  display: flex;
+  align-items: center;
 }
 
 .record-label {
@@ -113,33 +118,66 @@
   background-color: #e5e7eb !important;
 }
 
+/* Theme toggle button styling */
 .theme-toggle {
+  position: relative;
+  width: 64px;
+  height: 32px;
+  border-radius: 16px;
+  border: 2px solid #e5e7eb;
+  background-color: #f3f4f6;
+  cursor: pointer;
+  transition: all 300ms ease;
+  padding: 2px;
+}
+
+.theme-toggle.dark {
+  background-color: #1f2937;
+  border-color: #374151;
+}
+
+.theme-toggle-slider {
+  position: relative;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: white;
+  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
-  height: 32px;
-  border: none;
-  border-radius: 6px;
-  background-color: transparent;
-  color: #374151;
-  cursor: pointer;
-  transition: all 200ms ease;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
-.theme-toggle:hover {
-  background-color: #f3f4f6;
+.theme-toggle.dark .theme-toggle-slider {
+  transform: translateX(32px);
+  background-color: #14b8a6;
+}
+
+.theme-toggle-icons {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 8px;
+  pointer-events: none;
 }
 
 .theme-toggle-icon {
-  width: 18px;
-  height: 18px;
+  width: 16px;
+  height: 16px;
+  color: #6b7280;
+  transition: color 300ms ease;
 }
 
-.theme-toggle.dark {
+.theme-toggle.dark .theme-toggle-icon.moon {
   color: #14b8a6;
 }
 
-.theme-toggle.dark:hover {
-  background-color: rgba(20, 184, 166, 0.1);
+.theme-toggle.dark .theme-toggle-icon.sun {
+  color: #6b7280;
 }