updated a bunch of styles for collapse button. Added code to toggleActionContainer function on MainContainer

Author: jrosengrant

src/app/containers/ActionContainer.tsx

@@ -191,14 +191,17 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
               className='toggle'
             >
               {' '}
-              {/* JR: updating onClick to stop propgation so that it detects the click only on the arrow and not the parent*/}
+              {/* JR: updating onClick to stop propagation so that it detects the click only on the arrow and not the parent*/}
               <i />
             </a>
           </aside>
+          <div className='collapse'>Collapse</div>
         </div>
         <a type='button' id='recordBtn' onClick={toggleRecord}>
           <i />
-          <div style={{ display: 'flex', alignItems: 'center' }}>Toggle Record</div>
+          <div style={{ display: 'flex', alignItems: 'center', textAlign: 'right' }}>
+            Toggle Record
+          </div>
           {recordingActions ? <Switch defaultChecked /> : <Switch />}
         </a>
       </div>

src/app/containers/MainContainer.tsx

@@ -37,6 +37,10 @@ function MainContainer(): JSX.Element {
     const toggleElem = document.querySelector('aside'); // aside is like an added text that appears "on the side" aside some text.
     toggleElem.classList.toggle('no-aside'); // toggles the addition or the removal of the 'no-aside' class
 
+    //JR: added for collapse label
+    const collapse = document.querySelector('.collapse');
+    collapse.classList.toggle('hidden');
+
     const recordBtn = document.getElementById('recordBtn');
 
     if (recordBtn.style.display === 'none') {

src/app/styles/components/_buttons.scss

@@ -304,17 +304,31 @@ aside {
   background: #242529;
   color: #fff;
   transition: width 1s;
+  width: 100%; //JR
 }
 
 .no-aside {
   width: 45px;
   // margin-right: 15px;
 }
 
+//JR added for collapse label
+.collapse {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  background: #242529;
+}
+
+.hidden {
+  display: none;
+}
+
 .toggle {
-  display: block;
-  position: relative;
-  margin-top: 1rem;
+  // display: block;
+  // position: relative;
+  // margin-top: 1rem;
+  height: 100%; //JR
 }
 
 /* toggle i handles arrow animation */
@@ -330,8 +344,8 @@ aside {
 }
 
 .toggle i {
-  top: 8px;
-  left: 9px;
+  top: 16px;
+  left: 10px;
   display: block;
   background: $blue-brand;
 }
@@ -365,7 +379,14 @@ aside {
 }
 
 #arrow {
-  margin-bottom: 40px;
+  // margin-bottom: 40px;
+  // display: flex;
+  // justify-content: flex-start;
+
+  //JR
+  height: 100%;
+  display: grid;
+  grid-template-columns: 45px 1fr;
 }
 
 /* ^ sidebar button open and closing functionality */

src/app/styles/layout/_actionContainer.scss

@@ -16,10 +16,14 @@
 }
 
 .actionToolContainer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+  // display: flex;
+  // justify-content: space-between;
+  // align-items: center;
+
+  //JR
   height: 40px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
 }
 
 #recordBtn .fa-regular {