Merge pull request #7 from oslabs-beta/muiFix

MUI update

Author: EivindDelFierro

demo-app/package.json

@@ -27,6 +27,7 @@
     "webpack-dev-server": "^4.7.2"
   },
   "dependencies": {
+    "@mui/styled-engine-sc": "^5.12.0",
     "express": "^4.17.2",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",

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",
@@ -215,4 +216,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 (
+    <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 */}
       <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>
   );
 }
 

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]);
@@ -113,25 +122,7 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
   snapshotIdScale.rangeRound([0, xMax]);
   renderingScale.range([yMax, 0]);
 
-  // useStyles will change the styling on save series dropdown feature
-  // const useStyles = makeStyles((theme) => ({
-  //   formControl: {
-  //     margin: theme.spacing(1),
-  //     minWidth: 80,
-  //     height: 30,
-  //   },
-  //   select: {
-  //     minWidth: 80,
-  //     fontSize: '.75rem',
-  //     fontWeight: 200,
-  //     border: '1px solid grey',
-  //     borderRadius: 4,
-  //     color: 'grey',
-  //     height: 30,
-  //   },
-  // }));
 
-  // const classes = useStyles();
 
   const StyledFormControl = styled(FormControl)(({ theme }) => ({
     margin: theme.spacing(1),
@@ -143,9 +134,6 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
     minWidth: 80,
     fontSize: '.75rem',
     fontWeight: 200,
-    border: '1px solid grey',
-    borderRadius: 4,
-    color: 'grey',
     height: 30,
   });
 
@@ -197,22 +185,6 @@ 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 seriesList: ActionObj[][] = comparison.map((action: Series) => action.data.barStack);
   const actionsList: ActionObj[] = seriesList.flat();
   const testList: string[] = actionsList.map((elem: ActionObj) => elem.name);
@@ -226,21 +198,38 @@ 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'
+            sx={{ p: 2, color: 'white' }}
+            // type='button'
             className='delete-button'
             onClick={() => {
+              setButtonLoad(true);
               dispatch(deleteSeries());
+
+              setTimeout(() => {
+                setButtonLoad(false);
+              }, 1000);
             }}
+            style={
+              buttonLoad
+                ? { backgroundColor: theme.palette.secondary.main }
+                : //KYLE YOU LEFT OFF HERE
+                { backgroundColor: theme.palette.primary.main }
+            }
           >
-            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'
+            label='compares series'
+          // sx={{ backgroundColor: theme.palette.primary.main }}
+          >
             <StyledSelect
-              style={{ color: 'white' }}
               labelId='simple-select-outlined-label'
               open={open}
               onClose={handleClose}
@@ -285,7 +274,7 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
       </div>
 
       <svg ref={containerRef} width={width} height={height}>
-        {}
+        { }
         <rect x={0} y={0} width={width} height={height} fill={background} rx={14} />
         <Grid
           top={margin.top}

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

@@ -1,5 +1,5 @@
 // @ts-nocheck
-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';
@@ -9,6 +9,13 @@ import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip';
 import { Text } from '@visx/text';
 import { schemeSet3 } 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 { deleteSeries, setCurrentTabInApp } from '../../../actions/actions';
 import { useStoreContext } from '../../../store';
 import { TooltipData, Margin, BarGraphComparisonAction, ActionObj } from '../../../FrontendTypes';
@@ -38,6 +45,11 @@ const BarGraphComparisonActions = (props: BarGraphComparisonAction) => {
   const [snapshots] = React.useState(0);
   const [setOpen] = React.useState(false);
   const [setPicOpen] = React.useState(false);
+
+  const [buttonLoad, setButtonLoad] = useState(false);
+  const theme = useTheme();
+
+
   useEffect(() => {
     dispatch(setCurrentTabInApp('performance-comparison'));
   }, []);
@@ -93,26 +105,6 @@ const BarGraphComparisonActions = (props: BarGraphComparisonAction) => {
   seriesNameScale.rangeRound([0, xMax]);
   renderingScale.range([yMax, 0]);
 
-  // useStyles will change the styling on save series dropdown feature
-  // const useStyles = makeStyles((theme) => ({
-  //   formControl: {
-  //     margin: theme.spacing(1),
-  //     minWidth: 80,
-  //     height: 30,
-  //   },
-  //   select: {
-  //     minWidth: 80,
-  //     fontSize: '.75rem',
-  //     fontWeight: '200',
-  //     border: '1px solid grey',
-  //     borderRadius: 4,
-  //     color: 'grey',
-  //     height: 30,
-  //   },
-  // }));
-
-  // const classes = useStyles();
-
   const StyledFormControl = styled(FormControl)(({ theme }) => ({
     margin: theme.spacing(1),
     minWidth: 80,
@@ -123,9 +115,6 @@ const BarGraphComparisonActions = (props: BarGraphComparisonAction) => {
     minWidth: 80,
     fontSize: '.75rem',
     fontWeight: 200,
-    border: '1px solid grey',
-    borderRadius: 4,
-    color: 'grey',
     height: 30,
   });
 
@@ -142,19 +131,8 @@ const BarGraphComparisonActions = (props: BarGraphComparisonAction) => {
     setSeries(false);
   };
 
-  const animateButton = function (e) {
-    e.preventDefault();
-    e.target.classList.add('animate');
-    e.target.innerHTML = 'Deleted!';
-    setTimeout(() => {
-      e.target.innerHTML = 'Clear All Series';
-      e.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 = comparison.map((elem) => elem.data.barStack);
   const actionsList = seriesList.flat();
   const testList = actionsList.map((elem) => elem.name);
@@ -168,16 +146,28 @@ const BarGraphComparisonActions = (props: BarGraphComparisonAction) => {
     <div>
       <div className='series-options-container'>
         <div className='dropdown-and-delete-series-container'>
-          <button
+        <Button
+            variant='contained'
+            sx={{ p: 2, color: 'white' }}
             className='delete-button'
             onClick={() => {
+              setButtonLoad(true);
               setAction(false);
               setSeries(true);
               dispatch(deleteSeries());
+
+              setTimeout(() => {
+                setButtonLoad(false);
+              }, 1000);
             }}
+            style={
+              buttonLoad
+                ? { backgroundColor: theme.palette.primary.main }
+                : { backgroundColor: theme.palette.secondary.main }
+            }
           >
-            Clear All Series
-          </button>
+            {buttonLoad ? 'Deleted' : 'Clear Series'}
+          </Button>
           <h4 style={{ padding: '0 1rem' }}>Compare Series: </h4>
           <StyledFormControl variant='outlined'>
             <StyledSelect

src/app/components/theme.ts

@@ -0,0 +1,35 @@
+import { createTheme } from '@mui/material/styles';
+const theme = createTheme({
+    palette: {
+        primary: {
+            main: '#8Fb5f9',
+        },
+        secondary: {
+            main: '#BF6DD2',
+        },
+    },
+    components: {
+        // Name of the component
+
+        MuiButton: {
+            styleOverrides: {
+                // Name of the slot
+                root: {
+                    // Some CSS
+                    fontSize: '0.8rem',
+                    letterSpacing: '0.1rem',
+                    lineHeight: '0.8rem',
+                },
+            },
+        },
+        // MuiSelect: {
+        //   styleOverrides: {
+        //     root: {
+        //       main: '#556cd4',
+        //     },
+        //   },
+        // },
+    },
+});
+
+export default theme;