styled record text and added red circle

Author: garrettlchow

package.json

@@ -188,6 +188,7 @@
     "jest-environment-jsdom": "^29.7.0",
     "jsondiffpatch": "^0.5.0",
     "lodash": "^4.17.21",
+    "lucide-react": "^0.468.0",
     "node": "^18.12.1",
     "prettier": "^3.1.1",
     "rc-slider": "^10.5.0",

src/app/components/Actions/RecordButton.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Switch } from '@mui/material';
+
+const RecordButton = ({ isRecording, onToggle }) => {
+  return (
+    <div className='record-button-container'>
+      <div className='record-label'>
+        <div className={`record-icon ${isRecording ? 'recording' : ''}`} />
+        <span>Record</span>
+      </div>
+      <Switch
+        checked={isRecording}
+        onChange={onToggle}
+        sx={{
+          '& .MuiSwitch-switchBase.Mui-checked': {
+            color: '#38bdf8',
+          },
+          '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
+            backgroundColor: '#0284c7',
+          },
+        }}
+      />
+    </div>
+  );
+};
+
+export default RecordButton;

src/app/containers/ActionContainer.tsx

@@ -8,6 +8,7 @@ import DropDown from '../components/Actions/DropDown';
 import ProvConContainer from './ProvConContainer';
 import { ActionContainerProps, CurrentTab, MainState, Obj, RootState } from '../FrontendTypes';
 import { Button, Switch } from '@mui/material';
+import RecordButton from '../components/Actions/RecordButton';
 
 /*
   This file renders the 'ActionContainer'. The action container is the leftmost column in the application. It includes the button that shrinks and expands the action container, a dropdown to select the active site, a clear button, the current selected Route, and a list of selectable snapshots with timestamps.
@@ -191,16 +192,13 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
       </div>
       {actionView ? (
         <div className='action-button-wrapper'>
-          <a type='button' id='recordBtn' onClick={toggleRecord}>
-            <i />
-            <div
-              className='toggle-record'
-              style={{ display: 'flex', alignItems: 'center', textAlign: 'right' }}
-            >
-              Record
-            </div>
-            {recordingActions ? <Switch defaultChecked /> : <Switch />}
-          </a>
+          <RecordButton
+            isRecording={recordingActions}
+            onToggle={() => {
+              toggleRecord();
+              setRecordingActions(!recordingActions);
+            }}
+          />
           <DropDown
             dropdownSelection={dropdownSelection}
             setDropdownSelection={setDropdownSelection}

src/app/styles/components/_buttons.scss

@@ -364,13 +364,55 @@
   display: flex;
   align-items: center;
   color: #6b7280;
-  font-size: 1rem;
+  font-size: 1.1rem;
   font-weight: 500;
   padding-left: 0.5rem;
   font-family: 'Outfit', sans-serif;
   transition: color 0.2s ease;
 }
 
+.record-button-container {
+  display: flex;
+  align-items: center;
+  padding: 4px 16px;
+  width: 100%;
+  background: transparent;
+  gap: 8px;
+}
+
+.record-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #374151;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.record-icon {
+  width: 10px;
+  height: 10px;
+  background-color: #ef4444;
+  border-radius: 50%;
+  transition: opacity 0.3s ease;
+}
+
+.record-icon.recording {
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
 /* Hover state for the entire action area */
 #arrow:hover .collapse {
   color: #374151;