styled ax buttons need to move other buttons

Author: garrettlchow

src/app/components/StateRoute/StateRoute.tsx

@@ -15,7 +15,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import PerformanceVisx from './PerformanceVisx/PerformanceVisx';
 import WebMetricsContainer from './WebMetrics/WebMetricsContainer';
 import { MainState, RootState, StateRouteProps } from '../../FrontendTypes';
-import  AxContainer  from './AxMap/AxContainer';
+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.
@@ -128,25 +128,31 @@ const StateRoute = (props: StateRouteProps) => {
             element={
               showTree ? (
                 <div>
-                  <input
-                    type='radio'
-                    value='enable'
-                    checked={selectedValue === 'enable'}
-                    onChange={() => {
-                      enableAxTreeButton();
-                    }}
-                  />
-                  <label htmlFor='enable'>Enable</label>
-                  <input
-                    type='radio'
-                    value='disable'
-                    checked={selectedValue === 'disable'}
-                    onChange={() => {
-                      disableAxTree();
-                    }}
-                  />
-                  <label htmlFor='disable'>Disable</label>
-                  {/* @ts-ignore */}
+                  <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}
@@ -159,25 +165,32 @@ const StateRoute = (props: StateRouteProps) => {
               ) : (
                 <div>
                   {showParagraph && (
-                    <p>
-                      A Note to Developers: Reactime is using the Chrome Debugger API in order to
-                      grab the Accessibility Tree. Enabling this option will allow you to record
-                      Accessibility Tree snapshots, but will result in the Chrome browser notifying
-                      you that the Chrome Debugger has started.
-                    </p>
+                    <div className='accessibility-text'>
+                      <p>
+                        A Note to Developers: Reactime is using the Chrome Debugger API in order to
+                        grab the Accessibility Tree. Enabling this option will allow you to record
+                        Accessibility Tree snapshots, but will result in the Chrome browser
+                        notifying you that the Chrome Debugger has started.
+                      </p>
+                    </div>
                   )}
-                  <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={() => {

src/app/styles/components/_ax.scss

@@ -1,6 +1,63 @@
 // Ax.tsx
 #axControls {
-    display: inline-flex;
-    position: sticky;
-    left: 0;
-}
+  display: inline-flex;
+  position: sticky;
+  left: 0;
+}
+
+/* Container for the radio controls */
+.accessibility-controls {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 12px 16px;
+}
+
+/* Hide the default radio inputs */
+.accessibility-controls input[type='radio'] {
+  display: none;
+}
+
+/* Style the labels as buttons */
+.accessibility-controls label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 50px;
+  padding: 6px 12px;
+  font-family: 'Outfit', sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  color: #374151;
+  background-color: #f3f4f6;
+  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;
+  line-height: 1.5;
+}
+
+.accessibility-text p {
+  margin: 0;
+  color: #374151;
+  font-size: 16px;
+  font-family: 'Outfit', sans-serif;
+}