styled clear button and route description header

Author: garrettlchow

src/app/components/Actions/RouteDescription.tsx

@@ -16,24 +16,17 @@ const RouteDescription = (props: RouteProps): JSX.Element => {
   const url: URL = new URL(actions[0].props.routePath); // Use new URL to use the url.pathname method.
 
   return (
-      <div className='routedescription' >
-        <h3 className='route'>Route: {url.pathname}</h3>
-          <div style={{
-            // div that contains slider and snapshots
-              display: 'flex',
-              flexDirection: 'row',
-              height: `${actions.length * 30}px`,
-              marginBottom: '50px'
-          }}>
-            <VerticalSlider className='main-slider' snapshots={actions} />
-            <div style={{marginTop: '10px'}}> 
-              {/* actual snapshots per route */}
-              {actions}
-            </div>
-          </div>
+    <div className='route-container'>
+      <div className='route-header'>Route: {url.pathname}</div>
+      <div className='route-content' style={{ height: `${actions.length * 30}px` }}>
+        <VerticalSlider className='main-slider' snapshots={actions} />
+        <div className='actions-container'>
+          {/* actual snapshots per route */}
+          {actions}
+        </div>
       </div>
+    </div>
   );
 };
 
-
 export default RouteDescription;

src/app/containers/ActionContainer.tsx

@@ -14,7 +14,6 @@ import { Button, Switch } from '@mui/material';
   This file renders the 'ActionContainer'. The action container is the leftmost column in the application. It includes the button that shrinks and expands the action container, a dropdown to select the active site, a clear button, the current selected Route, and a list of selectable snapshots with timestamps.
 */
 
-
 // resetSlider locates the rc-slider elements on the document and resets it's style attributes
 const resetSlider = () => {
   const slider = document.querySelector('.rc-slider-handle');
@@ -57,7 +56,6 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
     children?: [];
     }
   */
- 
 
   const displayArray = (obj: Obj): void => {
     if (
@@ -234,9 +232,9 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
             dropdownSelection={dropdownSelection}
             setDropdownSelection={setDropdownSelection}
           />
-          <div className='action-component exclude'>
+          <div className='clear-button-container'>
             <Button
-              className='clear-button'
+              className='clear-button-modern'
               variant='text'
               onClick={() => {
                 dispatch(emptySnapshots()); // set slider back to zero, visually
@@ -248,12 +246,11 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
             </Button>
           </div>
           <div className='snapshots'>
-            {dropdownSelection === 'Provider/Consumer' && <ProvConContainer/>}
-            {dropdownSelection === 'TimeJump' && 
+            {dropdownSelection === 'Provider/Consumer' && <ProvConContainer />}
+            {dropdownSelection === 'TimeJump' &&
               Object.keys(routes).map((route, i) => (
                 <RouteDescription key={`route${i}`} actions={routes[route]} />
-              ))
-            }
+              ))}
           </div>
         </div>
       ) : null}

src/app/styles/abstracts/_variablesLM.scss

@@ -70,10 +70,6 @@ $tab-arrow-indicator: lighten($contrasting-color, 30%);
 //SNAPSHOTS AND ROUTES LIST
 $action-tab-background: $background-color;
 $action-cont-border: $contrasting-color;
-// $action-clear-button: $primary-color;
-// $action-clear-button-text: $background-color;
-$route-bar: $primary-color-strong;
-$route-bar-text: $light-text;
 $indiv-action-input-bg: $background-color-strong;
 $indiv-action-selected: darken($background-color, 15%);
 $indiv-action-selected-text: $light-text;

src/app/styles/components/_actionComponent.scss

@@ -26,13 +26,6 @@
   color: $indiv-action-selected-text;
 }
 
-.action-component.exclude {
-  color: #ff0000;
-  display: flex;
-  justify-content: center;
-  margin-top: 10px;
-}
-
 .action-component:focus {
   outline: none;
 }
@@ -46,3 +39,20 @@
   overflow: hidden;
   @extend %disable-highlight;
 }
+
+.route-container {
+  width: 100%;
+}
+
+.route-header {
+  background-color: #1f2937;
+  color: #ffffff;
+  padding: 10px;
+  font-size: 14px;
+}
+
+.route-content {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 50px;
+}

src/app/styles/components/_buttons.scss

@@ -471,3 +471,19 @@ aside {
   margin-left: 5px;
   margin-right: -22px;
 }
+
+.clear-button-modern {
+  width: 100% !important;
+  background-color: #f3f4f6 !important;
+  color: #374151 !important;
+  font-size: 0.875rem !important;
+  font-weight: 500 !important;
+  text-transform: uppercase !important;
+  padding: 0.375rem 1rem !important;
+  border-radius: 0.375rem !important;
+  transition: background-color 200ms ease-in-out !important;
+}
+
+.clear-button-modern:hover {
+  background-color: #e5e7eb !important;
+}

src/app/styles/layout/_actionContainer.scss

@@ -1,7 +1,9 @@
 .action-container {
   // overflow: auto;
+  background: white;
+  border-right: 1px solid #e5e7eb;
+  transition: width 0.3s ease;
   overflow-x: hidden;
-  background-color: $action-tab-background;
 }
 
 .actionname {
@@ -34,14 +36,10 @@
   width: 28px;
 }
 
-.route {
-  background-color: $route-bar;
-  color: $route-bar-text;
-  padding-left: 10px;
-  padding-top: 5px;
-  padding-bottom: 5px;
-}
-
 .toggle-record {
   color: $toggle-record-text;
-}
+}
+
+.clear-button-container {
+  padding: 16px;
+}