switched record toggle off ot gray

Author: garrettlchow

src/app/components/Actions/RecordButton.tsx

@@ -5,24 +5,30 @@ const RecordButton = ({ isRecording, onToggle }) => {
   return (
     <div className='record-button-container'>
       <div className='record-label'>
-        <div className={`record-icon ${isRecording ? 'recording' : ''}`} />
+        <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: '#6b7280', // Medium gray for unchecked thumb - better contrast against white background
+            color: '#9ca3af',
           },
           '& .MuiSwitch-track': {
-            backgroundColor: '#e5e7eb', // Light gray for unchecked track
+            backgroundColor: '#e5e7eb',
           },
           '& .MuiSwitch-switchBase.Mui-checked': {
-            color: '#374151', // Same dark gray for checked thumb
+            color: '#374151',
           },
           '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
-            backgroundColor: '#0284c7', // Blue for checked track
+            backgroundColor: '#0284c7',
           },
         }}
       />