Co-authored-by: Sean Kelly <[email protected]>

Author: KyEBell

package.json

@@ -164,6 +164,7 @@
     "@fortawesome/react-fontawesome": "^0.1.12",
     "@mui/icons-material": "^5.14.1",
     "@mui/material": "^5.14.1",
+    "@mui/styled-engine-sc": "^5.12.0",
     "@types/react-dom": "^17.0.14",
     "@types/react-router-dom": "^5.3.3",
     "@visx/axis": "^1.0.0",
@@ -211,6 +212,7 @@
     "react-select": "^3.2.0",
     "react-spinners": "^0.11.0",
     "recoil": "0.0.10",
+    "styled-components": "^6.0.4",
     "util": "^0.12.4",
     "web-vitals": "^1.1.0",
     "yarn": "^1.22.19"

src/app/components/App.tsx

@@ -4,6 +4,8 @@ import MainContainer from '../containers/MainContainer';
 import { StoreContext } from '../store';
 import mainReducer from '../reducers/mainReducer.js';
 import { InitialStateProps } from '../FrontendTypes';
+import { ThemeProvider } from '@mui/material/styles';
+import theme from './theme';
 // currentTab is the current active tab within Google Chrome.
 // This is used to decide what tab Reactime should be monitoring. This can be "locked"
 // currentTabInApp is the current active tab within Reactime (Map, Performance, History, etc).
@@ -20,11 +22,13 @@ const initialState: InitialStateProps = {
 
 function App(): JSX.Element {
   return (
-    <Router> {/* we wrap our application with the <Router> tag so that all components that are nested will have the react-router context */}
-      <StoreContext.Provider value={useReducer(mainReducer, initialState)}> {/* we wrap our MainContainer with the provider so that we will be able to use the store context. We create our store by using useReducer and passing it into the value property */}
-        <MainContainer />
-      </StoreContext.Provider>
-    </Router>
+    <ThemeProvider theme={theme}>
+      <Router>
+        <StoreContext.Provider value={useReducer(mainReducer, initialState)}>
+          <MainContainer />
+        </StoreContext.Provider>
+      </Router>
+    </ThemeProvider>
   );
 }
 

src/app/components/StateRoute/PerformanceVisx/BarGraphComparison.tsx

@@ -1,7 +1,7 @@
 // @ts-nocheck
 /// <reference lib="dom" />
 /* eslint-disable no-param-reassign */
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { BarStack } from '@visx/shape';
 import { Group } from '@visx/group';
 import { Grid } from '@visx/grid';
@@ -10,7 +10,12 @@ import { scaleBand, scaleLinear, scaleOrdinal } from '@visx/scale';
 import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip';
 import { Text } from '@visx/text';
 import { schemeTableau10 } from 'd3-scale-chromatic';
-
+import { styled } from '@mui/system';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import { useTheme } from '@mui/material/styles';
+import { Button } from '@mui/material';
 import { onHover, onHoverExit, deleteSeries, setCurrentTabInApp } from '../../../actions/actions';
 import { useStoreContext } from '../../../store';
 import {
@@ -45,9 +50,13 @@ const tooltipStyles = {
 const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
   const { width, height, data, comparison, setSeries, series, setAction } = props;
-  const [snapshots] = React.useState(0);
-  const [open, setOpen] = React.useState(false);
-  const [picOpen, setPicOpen] = React.useState(false);
+  const [snapshots] = useState(0);
+  const [open, setOpen] = useState(false);
+  const [picOpen, setPicOpen] = useState(false);
+  //tracking whether or not the clear series button is clicked
+  const [buttonLoad, setButtonLoad] = useState(false);
+
+  const theme = useTheme();
   useEffect(() => {
     dispatch(setCurrentTabInApp('performance-comparison'));
   }, [dispatch]);
@@ -197,22 +206,22 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
     return data.barStack;
   }
 
-  const animateButton = (e: MouseEvent) => {
-    e.preventDefault();
-    const target = e.target as HTMLButtonElement;
-    if (target) {
-      target.classList.add('animate');
-      target.innerHTML = 'Deleted!';
-      setTimeout(() => {
-        target.innerHTML = 'Clear All Series';
-        target.classList.remove('animate');
-      }, 1000);
-    }
-  };
-  const classname = document.getElementsByClassName('delete-button');
-  for (let i = 0; i < classname.length; i += 1) {
-    classname[i].addEventListener('click', animateButton, false);
-  }
+  // const animateButton = (e: MouseEvent) => {
+  //   e.preventDefault();
+  //   const target = e.target as HTMLButtonElement;
+  //   if (target) {
+  //     target.classList.add('animate');
+  //     target.innerHTML = 'Deleted!';
+  //     setTimeout(() => {
+  //       target.innerHTML = 'Clear All Series';
+  //       target.classList.remove('animate');
+  //     }, 1000);
+  //   }
+  // };
+  // const classname = document.getElementsByClassName('delete-button');
+  // for (let i = 0; i < classname.length; i += 1) {
+  //   classname[i].addEventListener('click', animateButton, false);
+  // }
   const seriesList: ActionObj[][] = comparison.map((action: Series) => action.data.barStack);
   const actionsList: ActionObj[] = seriesList.flat();
   const testList: string[] = actionsList.map((elem: ActionObj) => elem.name);
@@ -226,19 +235,34 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
     <div>
       <div className='series-options-container'>
         <div className='dropdown-and-delete-series-container'>
-          <button
-            type='button'
+          <Button
+            variant='contained'
+            // type='button'
             className='delete-button'
             onClick={() => {
+              setButtonLoad(true);
               dispatch(deleteSeries());
+
+              setTimeout(() => {
+                setButtonLoad(false);
+              }, 1000);
             }}
+            style={
+              buttonLoad
+                ? { backgroundColor: theme.palette.primary.main }
+                : { backgroundColor: '#f21861' }
+            }
           >
-            Clear All Series
-          </button>
+            {buttonLoad ? 'Deleted' : 'Clear Series'}
+          </Button>
           <h4 className='compare-series-box' style={{ padding: '0 1rem' }}>
             Compare Series:{' '}
           </h4>
-          <StyledFormControl id='selectSeries' variant='outlined'>
+          <StyledFormControl
+            id='selectSeries'
+            variant='outlined'
+            sx={{ backgroundColor: 'secondary.main' }}
+          >
             <StyledSelect
               style={{ color: 'white' }}
               labelId='simple-select-outlined-label'

src/app/styles/components/_buttons.scss

@@ -41,11 +41,11 @@
   font: 300 16px 'Roboto', sans-serif;
   font-size: $button-text-size;
   width: 120px;
-  background: $red-color-gradient;
+  // background: $red-color-gradient;
   height: 30px;
 
   &.animate {
-    background: rgb(41, 164, 41);
+    background-color: rgb(41, 164, 41);
   }
 }
 
@@ -95,8 +95,8 @@
   border: none;
   /* border-radius: 3px; */
   background: linear-gradient(145deg, #5c6068, #4d5157);
-  font: normal 16px "Roboto", sans-serif;
-  color: #FFFFFF;
+  font: normal 16px 'Roboto', sans-serif;
+  color: #ffffff;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -111,8 +111,8 @@
   border: transparent;
   border-radius: 3px;
   background-color: #232529;
-  font: normal 16px "Roboto", sans-serif;
-  color: #FFFFFF;
+  font: normal 16px 'Roboto', sans-serif;
+  color: #ffffff;
   transform: rotateX(90deg);
   transition: opacity 300ms, transform 0.15s linear;
   opacity: 0;
@@ -251,16 +251,11 @@
 .dropdown-dark {
   background: #444;
   border-color: #111111 #0a0a0a black;
-  background-image: -webkit-linear-gradient(
-    top,
-    transparent,
-    rgba(0, 0, 0, 0.4)
-  );
+  background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.4));
   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);
+  -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);
 }