styled record toggle

Author: garrettlchow

src/app/components/Actions/RecordButton.tsx

@@ -12,11 +12,17 @@ const RecordButton = ({ isRecording, onToggle }) => {
         checked={isRecording}
         onChange={onToggle}
         sx={{
+          '& .MuiSwitch-switchBase': {
+            color: '#6b7280', // Medium gray for unchecked thumb - better contrast against white background
+          },
+          '& .MuiSwitch-track': {
+            backgroundColor: '#e5e7eb', // Light gray for unchecked track
+          },
           '& .MuiSwitch-switchBase.Mui-checked': {
-            color: '#38bdf8',
+            color: '#374151', // Same dark gray for checked thumb
           },
           '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
-            backgroundColor: '#0284c7',
+            backgroundColor: '#0284c7', // Blue for checked track
           },
         }}
       />

src/app/styles/base/_base.scss

@@ -30,9 +30,7 @@ body {
 }
 
 .buttons-container {
-  //color: #ff0000;
   grid-area: buttons;
-  //border-color: #ff0000;
 }
 
 .action-container {

src/app/styles/components/_componentMap.scss

@@ -1,29 +1,13 @@
-// .compMapLink {
-//   // stroke: $map-link;
-//   stroke: $secondary-color;
-// }
 .compMapLink:hover {
   box-shadow: 10px 10px rgb(163, 205, 24);
-};
+}
 
 .comp-map-options {
   color: $map-options-label;
 }
 
-//this was supposed to control the dropDownStyle object in LinkControls.tsx (the dropdown menus in ComponentMap)
-// .comp-map-dropdown {
-//   backgroundColor: #ff0008;
-//   color: #ff0007;
-//   background: #ff0006;
-// }
-
-// .compMapParent {
-//   //fill: $map-parent-fill;
-//   //stroke: $map-parent-stroke;
-// }
-
 .compMapParentText {
-  fill: $map-parent-text
+  fill: $map-parent-text;
 }
 
 .compMapChild {
@@ -36,11 +20,9 @@
 }
 
 .compMapRoot {
-  //fill: $map-root-fill;
   stroke: $map-root-stroke;
 }
 
 .compMapRootText {
   fill: $map-root-text;
 }
-

src/app/styles/components/_performanceVisx.scss

@@ -5,32 +5,20 @@
   justify-content: center;
 }
 
-.MuiSwitch-colorPrimary.Mui-checked {
-  color: $icon-primary !important;
-}
-
-.MuiSwitch-switchBase {
-  color: $icon-secondary !important;
-}
-
-.MuiSwitch-track {
-  background-color: $icon-bg !important;
-}
-
-.MuiTypography-body1 {
-  font-size: 2em !important;
-}
-
 #routes-formcontrol {
   padding: 3px;
   margin-left: 50px;
-  font: 400 16px 'Outfit', sans-serif;
+  font:
+    400 16px 'Outfit',
+    sans-serif;
   text-align: left;
 }
 
 #routes-dropdown {
   color: $performance-options-label !important;
-  font: 400 16px 'Outfit', sans-serif;
+  font:
+    400 16px 'Outfit',
+    sans-serif;
   text-align: left;
 }
 
@@ -53,7 +41,9 @@
 #routes-select,
 #snapshot-select {
   color: white !important;
-  font: 400 16px 'Outfit', sans-serif;
+  font:
+    400 16px 'Outfit',
+    sans-serif;
   text-align: left;
   width: 120px;
   height: 30px;

src/app/styles/layout/_actionContainer.scss

@@ -15,13 +15,6 @@
   color: $indiv-action-filler-text;
 }
 
-#recordBtn {
-  color: #ffb3b3;
-  height: 100%;
-  display: flex;
-  margin-left: 10px;
-}
-
 .actionToolContainer {
   color: #374151;
   display: flex;
@@ -32,11 +25,6 @@
   padding: 0 8px;
 }
 
-#recordBtn .fa-regular {
-  height: 100%;
-  width: 28px;
-}
-
 .toggle-record {
   color: $toggle-record-text;
 }