moved travel container and buttons container next to each other on the bottom

Author: garrettlchow

src/app/components/Buttons/Tutorial.tsx

@@ -359,12 +359,7 @@ export default class Tutorial extends Component<TutorialProps, TutorialState> {
           onBeforeChange={(currentStepIndex) => onChangeHandler(currentStepIndex)} // Callback called before changing the current step.
           ref={(steps) => (this.steps = steps)} // ref allows access to intro.js API
         />
-        <Button
-          variant='outlined'
-          className='howToUse-button'
-          type='button'
-          onClick={() => startIntro()}
-        >
+        <Button className='howToUse-button' type='button' onClick={() => startIntro()}>
           <HelpOutlineIcon className='button-icon' sx={{ pr: 1 }} /> Tutorial
         </Button>
       </>

src/app/containers/ButtonsContainer.tsx

@@ -91,12 +91,7 @@ function ButtonsContainer(): JSX.Element {
 
   return (
     <div className='buttons-container'>
-      <Button
-        className='pause-button'
-        variant='outlined'
-        type='button'
-        onClick={() => dispatch(toggleMode('paused'))}
-      >
+      <Button className='pause-button' type='button' onClick={() => dispatch(toggleMode('paused'))}>
         {paused ? (
           <LockIcon className='button-icon' sx={{ pr: 1 }} />
         ) : (
@@ -106,23 +101,21 @@ function ButtonsContainer(): JSX.Element {
       </Button>
       <Button
         className='export-button'
-        variant='outlined'
         type='button'
         //@ts-ignore
         onClick={() => exportHandler(tabs[currentTab])}
       >
         <FileDownloadIcon className='button-icon' sx={{ pr: 1 }} />
         Download
       </Button>
-      <Button variant='outlined' className='import-button' onClick={() => importHandler(dispatch)}>
+      <Button className='import-button' onClick={() => importHandler(dispatch)}>
         <FileUploadIcon className='button-icon' sx={{ pr: 1 }} />
         Upload
       </Button>
       {/* The component below renders a button for the tutorial walkthrough of Reactime */}
       <Tutorial dispatch={dispatch} currentTabInApp={currentTabInApp} />
       {/* adding a button for reconnection functionality 10/5/2023 */}
       <Button
-        variant='outlined'
         className='reconnect-button'
         type='button'
         //update onClick functionality to include a popup that contains....

src/app/containers/MainContainer.tsx

@@ -231,9 +231,11 @@ function MainContainer(): JSX.Element {
             />
           </div>
         ) : null}
-        {/* @ts-ignore */}
-        <TravelContainer snapshotsLength={snapshots.length} />
-        <ButtonsContainer />
+        <div className='bottom-controls'>
+          {/* @ts-ignore */}
+          <TravelContainer snapshotsLength={snapshots.length} />
+          <ButtonsContainer />
+        </div>
       </div>
     </div>
   );

src/app/styles/base/_base.scss

@@ -13,9 +13,6 @@ body {
   height: 100%;
 }
 
-.travel-container {
-  grid-area: travel;
-}
 .action-container {
   grid-area: actions;
   transition: 0.5s;
@@ -29,30 +26,13 @@ body {
   grid-area: states;
 }
 
-.buttons-container {
-  grid-area: buttons;
-}
-
-.action-container {
-  border-style: solid;
-  border-color: $action-cont-border;
-  border-width: 0px;
-}
 
 .state-container {
   border-style: solid;
   border-color: $state-cont-border;
   border-width: 0px;
 }
 
-.travel-container {
-  border-style: solid;
-  border-color: $travel-top-border;
-  border-left: 0px;
-  border-right: 0px;
-  border-bottom: 0px;
-}
-
 .saveSeriesContainer {
   padding-bottom: 15px;
   padding-top: 10px;

src/app/styles/components/_buttons.scss

@@ -67,7 +67,6 @@
     500 16px 'Roboto',
     sans-serif;
   width: 120px;
-  //background: #ff0000;
 }
 
 .empty-button:hover {
@@ -127,13 +126,6 @@
   padding-bottom: 5px;
 }
 
-.jump-button:hover {
-  // remove the blue border when button is clicked
-  color: $jump-text;
-  background-color: $jump-hover;
-  cursor: pointer;
-}
-
 .current-location {
   outline: none;
   height: $time-button-height;
@@ -190,7 +182,6 @@
 .export-button:hover,
 .pause-button:hover,
 .reconnect-button:hover {
-  //@extend %button-shared;
   color: $function-bar-text-hover;
   box-shadow: 1px 1px 2px 1px rgba(30, 86, 171, 0.25);
   transform: translate3d(0, -3px, 0);

src/app/styles/layout/_actionContainer.scss

@@ -3,6 +3,8 @@
   border-right: 1px solid #e5e7eb;
   transition: width 0.3s ease;
   overflow-x: hidden;
+  overflow-y: auto;
+  height: 100%;
 }
 
 .actionname {

src/app/styles/layout/_bodyContainer.scss

@@ -2,12 +2,11 @@
   height: 100%;
   overflow: hidden;
   display: grid;
-  grid-template-columns: min-content 1fr;
-  grid-template-rows: 1fr minmax(min-content, 5%) minmax(min-content, 5%);
+  grid-template-columns: 280px 1fr; /* Set action container width to 320px */
+  grid-template-rows: 1fr auto; /* Change to auto for the bottom row */
   grid-template-areas:
     'actions states'
-    'travel travel'
-    'buttons buttons';
+    'bottom bottom'; /* New bottom area that spans full width */
 }
 
 /* if extension width is less than 500px, stack the body containers */
@@ -22,3 +21,11 @@
       'buttons';
   }
 }
+
+.bottom-controls {
+  grid-area: bottom;
+  display: flex;
+  width: 100%;
+  border-top: 1px solid #e5e7eb;
+  background: white;
+}

src/app/styles/layout/_buttonsContainer.scss

@@ -3,12 +3,11 @@
   font-family: 'Outfit', sans-serif;
 }
 .buttons-container {
-  //color: #ff0000;
-  margin: 0 1% 0 1%;
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  grid-gap: 1%;
-  padding: 1% 0 1% 0;
+  display: flex;
+  align-items: center;
+  background: white;
+  border-top: 1px solid #e5e7eb;
+  padding: 12px;
 }
 
 .introjs-tooltip {
@@ -20,10 +19,6 @@
   padding-left: 2px;
 }
 
-// .introjs-helperLayer{
-//   // border: 2px solid yellow
-// }
-
 .tools-container {
   display: flex;
   justify-content: space-between;
@@ -38,13 +33,6 @@
   color: white;
 }
 
-@media (max-width: 500px) {
-  .buttons-container {
-    //color: #ff0000;
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
 .introjs-nextbutton {
   background-color: none;
   color: #3256f1;
@@ -74,31 +62,30 @@
 
 .dialog-pop-up {
   border: 1px solid #ff0001;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); 
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
   padding: 13px;
 }
 
 .dialog-pop-up-header {
   color: #ff0001;
-  padding: 8px 16px;  
-  font-size: 20px; 
+  padding: 8px 16px;
+  font-size: 20px;
   font-family: $text-font-stack;
 }
 
 .dialog-pop-up-contents {
   background-color: $pop-up-window-background;
-  color: $pop-up-window-text; 
+  color: $pop-up-window-text;
   font-family: $text-font-stack;
-  line-height: 1.4;  
-  padding: 0px 15px 15px 15px !important;  
+  line-height: 1.4;
+  padding: 0px 15px 15px 15px !important;
 }
 
 .dialog-pop-up-actions {
   padding: 15px;
-  background-color: #ff0001; 
+  background-color: #ff0001;
 }
 
-
 .close-icon-pop-up-div {
   height: 40px;
   width: 100%;
@@ -114,4 +101,3 @@
   align-items: center;
   height: 20%;
 }
-

src/app/styles/layout/_mainContainer.scss

@@ -7,4 +7,7 @@
 
 .state-container-container {
   display: contents;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
 }

src/app/styles/layout/_stateContainer.scss

@@ -86,18 +86,14 @@
 
   .router-link {
     height: 100%;
-    // width: 34%;
     width: 10%;
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: $navbar-unselected;
     text-decoration: none;
     color: $navbar-unselected-text;
-
     font-size: 75%;
-    // border-top-right-radius: 10px;
-    // border-top-left-radius: 10px;
     overflow: hidden;
   }
 
@@ -121,7 +117,6 @@
   }
 
   .navbar {
-    // background-color: $navbar-background;
     display: flex;
     flex-direction: row;
     justify-content: center;
@@ -134,7 +129,6 @@
     width: 65vw;
     z-index: 1;
 
-
     @extend %disable-highlight;
   }
 
@@ -287,6 +281,11 @@
   display: flex;
   height: 3px;
   width: 200px;
-  background-image: linear-gradient(to right, $heat-level-1, $heat-level-2, $heat-level-3, $heat-level-4);
+  background-image: linear-gradient(
+    to right,
+    $heat-level-1,
+    $heat-level-2,
+    $heat-level-3,
+    $heat-level-4
+  );
 }
-