commented out useEffect in ActionContainer. Playing around with collapsing arrow and putting labels into actionToolContainer. committing before I mmake some style changes so that I can save my progress.

Author: jrosengrant

src/app/containers/ActionContainer.tsx

@@ -146,9 +146,11 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
       );
     },
   );
-  useEffect(() => {
-    setActionView(true);
-  }, [setActionView]);
+
+  // JR: this is questionable, why would you always set it to true?
+  // useEffect(() => {
+  //   setActionView(true);
+  // }, [setActionView]);
 
   // Function sends message to background.js which sends message to the content script
   const toggleRecord = (): void => {
@@ -181,12 +183,21 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
       <div className='actionToolContainer'>
         <div id='arrow'>
           <aside className='aside'>
-            <a onClick={toggleActionContainer} className='toggle'>
+            <a
+              onClick={(e) => {
+                e.stopPropagation;
+                toggleActionContainer();
+              }}
+              className='toggle'
+            >
+              {' '}
+              {/* JR: updating onClick to stop propgation so that it detects the click only on the arrow and not the parent*/}
               <i />
             </a>
           </aside>
         </div>
         <a type='button' id='recordBtn' onClick={toggleRecord}>
+          <i />
           <div style={{ display: 'flex', alignItems: 'center' }}>Toggle Record</div>
           {recordingActions ? <Switch defaultChecked /> : <Switch />}
         </a>

src/app/styles/components/_buttons.scss

@@ -1,6 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');
 
-
 .save-series-button {
   padding: 3px;
   outline: transparent;
@@ -308,8 +307,8 @@ aside {
 }
 
 .no-aside {
-  width: 30px;
-  margin-right: 15px;
+  width: 45px;
+  // margin-right: 15px;
 }
 
 .toggle {
@@ -349,6 +348,7 @@ aside {
 .toggle i::before {
   content: '';
   display: block;
+  // top: -5px;
 }
 
 .toggle i::before {
@@ -372,7 +372,7 @@ aside {
 .reconnect-button-pop-up {
   padding: 3px;
   outline: transparent;
-  background: $red-color-gradient; 
+  background: $red-color-gradient;
   color: $text-color !important;
   border: none;
   border-radius: 3px;
@@ -405,7 +405,7 @@ aside {
 .close-icon-pop-up {
   cursor: pointer;
   color: $text-color;
-  font-size: 20px; 
+  font-size: 20px;
   padding-right: 8px;
   color: black;
 }
@@ -430,4 +430,4 @@ aside {
   color: #d72828;
   margin-left: 5px;
   margin-right: -22px;
-}
+}

src/app/styles/layout/_actionContainer.scss

@@ -19,6 +19,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  height: 40px;
 }
 
 #recordBtn .fa-regular {