styled the clear button

Author: garrettlchow

src/app/App.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
 import { MemoryRouter as Router } from 'react-router-dom';
 import MainContainer from './containers/MainContainer';
-import { ThemeProvider } from '@mui/material/styles';
-import theme from './styles/theme';
 
 /*
   'currentTab' is the current active tab within Google Chrome.
@@ -12,12 +10,10 @@ import theme from './styles/theme';
 
 function App(): JSX.Element {
   return (
-    <ThemeProvider theme={theme}>
-      <Router>
-        {/* we wrap our application with the <Router> tag so that all components that are nested will have the react-router context */}
-        <MainContainer />
-      </Router>
-    </ThemeProvider>
+    <Router>
+      {/* we wrap our application with the <Router> tag so that all components that are nested will have the react-router context */}
+      <MainContainer />
+    </Router>
   );
 }
 

src/app/components/StateRoute/ComponentMap/ComponentMap.tsx

@@ -215,8 +215,7 @@ export default function ComponentMap({
   };
 
   let filtered = processTreeData(currentSnapshot);
-  console.log('filtered', filtered);
-  collectNodes(filtered);
+  collectNodes(currentSnapshot);
 
   const keepContextAndProviderNodes = (node) => {
     if (!node) return null;
@@ -248,7 +247,6 @@ export default function ComponentMap({
   };
 
   const contextProvidersOnly = keepContextAndProviderNodes(currentSnapshot);
-  console.log('context only', contextProvidersOnly);
 
   // @ts
   // find the node that has been selected and use it as the root

src/app/containers/ActionContainer.tsx

@@ -11,7 +11,6 @@ import ProvConContainer from './ProvConContainer';
 import { ActionContainerProps, CurrentTab, MainState, Obj, RootState } from '../FrontendTypes';
 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.
 */
@@ -27,7 +26,6 @@ const resetSlider = () => {
 };
 
 function ActionContainer(props: ActionContainerProps): JSX.Element {
-
   const [dropdownSelection, setDropdownSelection] = useState('TimeJump');
 
   const dispatch = useDispatch();
@@ -229,15 +227,14 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
           </a>
           <SwitchAppDropdown />
           {/* add new component here for dropdown menu for useStae/ useReducer- ragad */}
-         <DropDown
-         dropdownSelection = {dropdownSelection}
-         setDropdownSelection={setDropdownSelection}
-         />
+          <DropDown
+            dropdownSelection={dropdownSelection}
+            setDropdownSelection={setDropdownSelection}
+          />
           <div className='action-component exclude'>
             <Button
               className='clear-button'
-              variant='contained'
-              //style={{ backgroundColor: '#ff6569' }}
+              variant='text'
               onClick={() => {
                 dispatch(emptySnapshots()); // set slider back to zero, visually
                 resetSlider();
@@ -247,12 +244,11 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
               Clear
             </Button>
           </div>
-         {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>
       ) : null}
     </div>

src/app/containers/MainContainer.tsx

@@ -33,7 +33,7 @@ function MainContainer(): JSX.Element {
   const { connectionStatus }: MainState = useSelector((state: RootState) => state.main);
 
   // JR 12.22.23: so far this log always returns true
-  // console.log('MainContainer connectionStatus at initialization: ', connectionStatus);
+  console.log('MainContainer connectionStatus at initialization: ', connectionStatus);
 
   const [actionView, setActionView] = useState(true); // We create a local state 'actionView' and set it to true
 

src/app/styles/abstracts/_variablesLM.scss

@@ -26,17 +26,17 @@ $contrasting-color: #161617;
 $contrasting-color-weak: #353536;
 
 /// HEATMAP COLORS
-$heat-level-1: #F1B476;
-$heat-level-2: #E4765B;
-$heat-level-3: #C64442;
-$heat-level-4: #8C2743;
+$heat-level-1: #f1b476;
+$heat-level-2: #e4765b;
+$heat-level-3: #c64442;
+$heat-level-4: #8c2743;
 
 /////////////////////////////////////////////////////////////////////
 // ALL OF THE FOLLOWING COLORS SHOULD REFERENCE A COLOR FROM ABOVE //
 /////////////////////////////////////////////////////////////////////
 
 /// @type Color
- 
+
 //general text color theme
 $dark-text: $contrasting-color;
 $light-text: $background-color;
@@ -70,14 +70,14 @@ $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; //currently being handled by mui theme.ts file
-//$action-clear-button-text: $background-color; //currently being handled by mui theme.ts file
+// $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;
-$indiv-action-filler-text: lighten($contrasting-color,60%);
+$indiv-action-filler-text: lighten($contrasting-color, 60%);
 $indiv-action-custom-text: $dark-text;
 $indiv-action-border: $contrasting-color-weak;
 $indiv-action-time: $primary-color-weak;
@@ -98,12 +98,12 @@ $header-button-inactive-text: $dark-text;
 $header-button-hover: lighten($header-button-inactive, 20%);
 
 //the buttons/tabs controlling what is displayed in STATECONTAINER (Map, Performance, History, Web Metrics, Tree)
-$navbar-background: $background-color; //this color only shows up in Diff mode when buttons don't fill the whole bar //DIFF FEATURE IS CURRENTLY COMMENTED OUT 
+$navbar-background: $background-color; //this color only shows up in Diff mode when buttons don't fill the whole bar //DIFF FEATURE IS CURRENTLY COMMENTED OUT
 $navbar-selected: $primary-color-strong;
 $navbar-selected-text: $light-text;
 $navbar-unselected: $primary-color-weak;
 $navbar-unselected-text: $dark-text;
-$navbar-hover: darken($navbar-unselected,15%);
+$navbar-hover: darken($navbar-unselected, 15%);
 
 $state-background: $background-color-strong;
 $state-cont-border: $contrasting-color;

src/app/styles/components/_actionComponent.scss

@@ -15,20 +15,15 @@
   @extend %disable-highlight;
 }
 
-.clear-button {
-  background-color:#187924;
-  color:#187924;
-}
-
 .action-component-text {
   margin-bottom: 8px;
-  color: $indiv-action-custom-text
+  color: $indiv-action-custom-text;
 }
 
 .action-component.selected {
   //font-size: 16px;
   background-color: $indiv-action-selected;
-  color: $indiv-action-selected-text
+  color: $indiv-action-selected-text;
 }
 
 .action-component.exclude {

src/app/styles/components/_buttons.scss

@@ -13,7 +13,9 @@
   border-radius: 5px;
   cursor: pointer;
   line-height: 1.5em;
-  font: 400 16px 'Outfit', sans-serif;
+  font:
+    400 16px 'Outfit',
+    sans-serif;
   width: 120px;
   background: $performance-save-series-button;
   height: 30px;
@@ -37,7 +39,9 @@
   border-radius: 3px;
   cursor: pointer;
   line-height: 1.5em;
-  font: 300 16px 'Outfit', sans-serif;
+  font:
+    300 16px 'Outfit',
+    sans-serif;
   font-size: $button-text-size;
   width: 120px;
   height: 30px;
@@ -59,17 +63,13 @@
   border-radius: 3px;
   cursor: pointer;
   line-height: 1.5em;
-  font: 500 16px 'Roboto', sans-serif;
+  font:
+    500 16px 'Roboto',
+    sans-serif;
   width: 120px;
   //background: #ff0000;
 }
 
-.clear-button {
-  background: #3256f1;
-  background-color: #050787;
-  color: #3256f1;
-}
-
 .empty-button:hover {
   color: black;
   box-shadow: #ff0001;
@@ -87,7 +87,9 @@
 .action-component:hover .jump-button {
   opacity: 1;
   transform: rotateX(0deg);
-  transition: opacity 300ms, transform 0.15s linear;
+  transition:
+    opacity 300ms,
+    transform 0.15s linear;
 }
 
 .time-button {
@@ -114,7 +116,9 @@
   background-color: #232529;
   color: #ffffff;
   transform: rotateX(90deg);
-  transition: opacity 300ms, transform 0.15s linear;
+  transition:
+    opacity 300ms,
+    transform 0.15s linear;
   opacity: 0;
   display: flex;
   align-items: center;
@@ -215,7 +219,9 @@
   align-items: center;
   cursor: pointer;
   line-height: 1.5em;
-  font: 300 16px 'Outfit', sans-serif;
+  font:
+    300 16px 'Outfit',
+    sans-serif;
   font-size: $button-text-size;
 
   background: #ff0001;
@@ -234,8 +240,12 @@
   background-image: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.4));
   background-image: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.4));
   background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.4));
-  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 1px rgba(0, 0, 0, 0.2);
-  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 1px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow:
+    inset 0 1px rgba(255, 255, 255, 0.1),
+    0 1px 1px rgba(0, 0, 0, 0.2);
+  box-shadow:
+    inset 0 1px rgba(255, 255, 255, 0.1),
+    0 1px 1px rgba(0, 0, 0, 0.2);
 }
 
 .dropdown-dark:before {
@@ -275,7 +285,6 @@
 }
 
 .dropdown-and-delete-series-container {
-
   display: flex;
   align-items: center;
   justify-content: space-around;