finished style ax tab

Author: garrettlchow

src/app/components/StateRoute/AxMap/Ax.tsx

@@ -149,7 +149,7 @@ export default function AxTree(props) {
 
   return totalWidth < 10 ? null : (
     <div>
-      <div id='axControls'>
+      <div className='axControls'>
         <LinkControls
           orientation={orientation}
           linkType={linkType}

src/app/components/StateRoute/AxMap/axLinkControls.tsx

@@ -40,7 +40,7 @@ const AxLinkControls = ({
 
       {linkType === 'step' && (
         <div className='control-group'>
-          <label className='control-label'>step:</label>
+          <label className='control-label'>Step:</label>
           <input
             onClick={(e) => e.stopPropagation()}
             type='range'

src/app/components/StateRoute/StateRoute.tsx

@@ -17,50 +17,36 @@ import WebMetricsContainer from './WebMetrics/WebMetricsContainer';
 import { MainState, RootState, StateRouteProps } from '../../FrontendTypes';
 import AxContainer from './AxMap/AxContainer';
 
-/*
-  Loads the appropriate StateRoute view and renders the Map, Performance, History, Webmetrics, and Tree navbar buttons after clicking on the 'State' button located near the top rightmost corner.
-*/
-
 const History = require('./History').default;
-const NO_STATE_MSG = 'No state change detected. Trigger an event to change state'; // message to be returned if there has been no state change detected in our hooked/target app
+const NO_STATE_MSG = 'No state change detected. Trigger an event to change state';
 
 const StateRoute = (props: StateRouteProps) => {
   const {
-    axSnapshots, // from 'tabs[currentTab]' object in 'MainContainer'
-    snapshot, // from 'tabs[currentTab]' object in 'MainContainer'
-    hierarchy: propsHierarchy, // from 'tabs[currentTab]' object in 'MainContainer'
-    snapshots, // from 'tabs[currentTab].snapshotDisplay' object in 'MainContainer'
-    viewIndex: propsViewIndex, // from 'tabs[currentTab]' object in 'MainContainer'
-    webMetrics, // from 'tabs[currentTab]' object in 'MainContainer'
-    currLocation, // from 'tabs[currentTab]' object in 'MainContainer'
+    axSnapshots,
+    snapshot,
+    hierarchy: propsHierarchy,
+    snapshots,
+    viewIndex: propsViewIndex,
+    webMetrics,
+    currLocation,
   } = props;
 
   const { tabs, currentTab }: MainState = useSelector((state: RootState) => state.main);
   const { hierarchy: tabsHierarchy, sliderIndex, viewIndex: tabsViewIndex } = tabs[currentTab];
   const hierarchy = propsHierarchy || tabsHierarchy;
   const viewIndex = propsViewIndex || tabsViewIndex;
 
-  // lines 45 - 63 contains functionality to disable the accessibility features in Reactime.
   const dispatch = useDispatch();
   const [showTree, setShowTree] = useState(false);
-  const [selectedValue, setSelectedValue] = useState('disable');
   const [showParagraph, setShowParagraph] = useState(true);
 
   const enableAxTreeButton = () => {
     dispatch(toggleAxTree('toggleAxRecord'));
     dispatch(setCurrentTabInApp('AxTree'));
-    setSelectedValue('enable');
     setShowParagraph(false);
     setShowTree(true);
   };
 
-  const disableAxTree = () => {
-    dispatch(toggleAxTree('toggleAxRecord'));
-    setSelectedValue('disable');
-    setShowParagraph(true);
-    setShowTree(false);
-  };
-
   return (
     <div className='app-body'>
       <div className='main-navbar-container'>
@@ -128,39 +114,12 @@ const StateRoute = (props: StateRouteProps) => {
             element={
               showTree ? (
                 <div>
-                  <div className='accessibility-controls'>
-                    <input
-                      type='radio'
-                      id='enable'
-                      name='accessibility'
-                      value='enable'
-                      checked={selectedValue === 'enable'}
-                      onChange={() => {
-                        enableAxTreeButton();
-                      }}
-                    />
-                    <label htmlFor='enable'>Enable</label>
-
-                    <input
-                      type='radio'
-                      id='disable'
-                      name='accessibility'
-                      value='disable'
-                      checked={selectedValue === 'disable'}
-                      onChange={() => {
-                        disableAxTree();
-                      }}
-                    />
-                    <label htmlFor='disable'>Disable</label>
-                  </div>
-                  {showTree && (
-                    <AxContainer
-                      axSnapshots={axSnapshots}
-                      snapshot={snapshot}
-                      snapshots={snapshots}
-                      currLocation={currLocation}
-                    />
-                  )}
+                  <AxContainer
+                    axSnapshots={axSnapshots}
+                    snapshot={snapshot}
+                    snapshots={snapshots}
+                    currLocation={currLocation}
+                  />
                 </div>
               ) : (
                 <div>
@@ -180,24 +139,9 @@ const StateRoute = (props: StateRouteProps) => {
                       id='enable'
                       name='accessibility'
                       value='enable'
-                      checked={selectedValue === 'enable'}
-                      onChange={() => {
-                        enableAxTreeButton();
-                      }}
+                      onChange={enableAxTreeButton}
                     />
                     <label htmlFor='enable'>Enable</label>
-
-                    <input
-                      type='radio'
-                      id='disable'
-                      name='accessibility'
-                      value='disable'
-                      checked={selectedValue === 'disable'}
-                      onChange={() => {
-                        disableAxTree();
-                      }}
-                    />
-                    <label htmlFor='disable'>Disable</label>
                   </div>
                 </div>
               )

src/app/styles/components/_ax.scss

@@ -1,16 +1,15 @@
 // Ax.tsx
-#axControls {
-  display: inline-flex;
-  position: sticky;
-  left: 0;
+.axControls {
+  display: flex;
+  justify-content: space-evenly;
 }
 
 /* Container for the radio controls */
 .accessibility-controls {
   display: flex;
   align-items: center;
   gap: 16px;
-  padding: 12px 16px;
+  padding: 12px 24px;
 }
 
 /* Hide the default radio inputs */
@@ -23,32 +22,19 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 50px;
+  min-width: 60px;
   padding: 6px 12px;
   font-family: 'Outfit', sans-serif;
   font-size: 14px;
   font-weight: 500;
-  color: #374151;
-  background-color: #f3f4f6;
+  color: white;
+  background-color: #14b8a6;
   border-radius: 6px;
   cursor: pointer;
   transition: all 200ms ease;
   user-select: none;
 }
 
-/* Hover state */
-.accessibility-controls label:hover {
-  background-color: #e5e7eb;
-}
-
-/* Active/selected state */
-.accessibility-controls input[type='radio']:checked + label {
-  background-color: #14b8a6;
-  color: white;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-}
-
-/* Add consistent spacing around the warning text */
 .accessibility-text {
   padding: 12px 24px;
   max-width: 800px;