relocated record button

Author: ljn16

src/app/containers/ActionContainer.tsx

@@ -195,9 +195,9 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
               <i />
             </a>
           </aside>
-          <div className='collapse'>Hide</div>
+          <div className='collapse'>Collapse</div>
         </div>
-        <a type='button' id='recordBtn' onClick={toggleRecord}>
+        {/* <a type='button' id='recordBtn' onClick={toggleRecord}>
           <i />
           <div
             className='toggle-record'
@@ -206,10 +206,20 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
             Record
           </div>
           {recordingActions ? <Switch defaultChecked /> : <Switch />}
-        </a>
+        </a> */}
       </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>
           <SwitchAppDropdown />
           <div className='action-component exclude'>
             <Button

src/app/styles/components/_componentMap.scss

@@ -44,4 +44,3 @@
   fill: $map-root-text;
 }
 
-

src/app/styles/layout/_actionContainer.scss

@@ -18,13 +18,15 @@
   color: #ffb3b3;
   height: 100%;
   display: flex;
+  margin-left: 10px;
 }
 
 .actionToolContainer {
   color: #873b3b;
   display: flex;
   justify-content: space-between;
   align-items: center;
+  height: 35px;
 }
 
 #recordBtn .fa-regular {

src/app/styles/layout/_stateContainer.scss

@@ -132,7 +132,7 @@
     left: 50%;
     transform: translateX(-50%);
     width: 65vw;
-    z-index: 2;
+    z-index: 1;
 
 
     @extend %disable-highlight;