pushing up mui branch to be pulled

Author: KyEBell

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

@@ -152,9 +152,6 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
     minWidth: 80,
     fontSize: '.75rem',
     fontWeight: 200,
-    // border: '1px solid grey',
-    // borderRadius: 4,
-    // color: 'grey',
     height: 30,
   });
 
@@ -237,7 +234,7 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
         <div className='dropdown-and-delete-series-container'>
           <Button
             variant='contained'
-            sx={{ p: 1 }}
+            sx={{ p: 2, color: 'white' }}
             // type='button'
             className='delete-button'
             onClick={() => {
@@ -251,7 +248,7 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
             style={
               buttonLoad
                 ? { backgroundColor: theme.palette.primary.main }
-                : { backgroundColor: '#f21861' }
+                : { backgroundColor: theme.palette.secondary.main }
             }
           >
             {buttonLoad ? 'Deleted' : 'Clear Series'}
@@ -265,7 +262,7 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
             sx={{ backgroundColor: theme.palette.primary.main }}
           >
             <StyledSelect
-              style={{ color: 'white' }}
+              style={{ color: 'red' }}
               labelId='simple-select-outlined-label'
               open={open}
               onClose={handleClose}

src/app/components/Tutorial.tsx

@@ -9,7 +9,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faQuestion } from '@fortawesome/free-solid-svg-icons';
 import { tutorialSaveSeriesToggle, setCurrentTabInApp } from '../actions/actions';
 import { TutorialProps, TutorialState, StepsObj } from '../FrontendTypes';
-
+import { Button } from '@mui/material';
 //Must be required in. This enables compatibility with TS. If imported in, throws ts error of not rendering steps as a class component correctly.
 const { Steps } = require('intro.js-react');
 
@@ -74,7 +74,6 @@ export default class Tutorial extends Component<TutorialProps, TutorialState> {
       this.setState({ stepsEnabled: true });
     };
 
-
     let steps: StepsObj[] = [];
 
     switch (currentTabInApp) {
@@ -350,9 +349,14 @@ export default class Tutorial extends Component<TutorialProps, TutorialState> {
           onBeforeChange={(currentStepIndex) => onChangeHandler(currentStepIndex)}
           ref={(steps) => (this.steps = steps)}
         />
-        <button className='howToUse-button' type='button' onClick={() => startIntro()}>
+        <Button
+          variant='outlined'
+          className='howToUse-button'
+          type='button'
+          onClick={() => startIntro()}
+        >
           <FontAwesomeIcon icon={faQuestion} /> Tutorial
-        </button>
+        </Button>
       </>
     );
   }

src/app/components/theme.ts

@@ -2,10 +2,10 @@ import { createTheme } from '@mui/material/styles';
 const theme = createTheme({
   palette: {
     primary: {
-      main: '#556cd4',
+      main: '#8Fb5f9',
     },
     secondary: {
-      main: '#32a852',
+      main: '#BF6DD2',
     },
   },
   components: {

src/app/containers/ButtonsContainer.tsx

@@ -10,8 +10,13 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 import { importSnapshots, toggleMode } from '../actions/actions';
 import { useStoreContext } from '../store';
+import { Button } from '@mui/material';
 
 import Tutorial from '../components/Tutorial';
+import LockIcon from '@mui/icons-material/Lock';
+import LockOpenIcon from '@mui/icons-material/LockOpen';
+import FileDownloadIcon from '@mui/icons-material/FileDownload';
+import FileUploadIcon from '@mui/icons-material/FileUpload';
 
 // function exportHandler takes in a parameter snapshots which is typed as an array
 // the function does not return anything so the type is void
@@ -87,18 +92,28 @@ function ButtonsContainer(): JSX.Element {
 
   return (
     <div className='buttons-container'>
-      <button className='pause-button' type='button' onClick={() => dispatch(toggleMode('paused'))}>
-        {paused ? <FontAwesomeIcon icon={faLock} /> : <FontAwesomeIcon icon={faUnlock} />}
+      <Button
+        variant='outlined'
+        className='pause-button'
+        type='button'
+        onClick={() => dispatch(toggleMode('paused'))}
+      >
+        {paused ? <LockIcon /> : <LockOpenIcon />}
         {paused ? 'Locked' : 'Unlocked'}
-      </button>
-      <button className='export-button' type='button' onClick={() => exportHandler(snapshots)}>
-        <FontAwesomeIcon icon={faDownload} />
+      </Button>
+      <Button
+        variant='outlined'
+        className='export-button'
+        type='button'
+        onClick={() => exportHandler(snapshots)}
+      >
+        <FileDownloadIcon />
         Download
-      </button>
-      <button className='import-button' type='button' onClick={() => importHandler(dispatch)}>
-        <FontAwesomeIcon icon={faUpload} />
+      </Button>
+      <Button variant='outlined' className='import-button' onClick={() => importHandler(dispatch)}>
+        <FileUploadIcon />
         Upload
-      </button>
+      </Button>
       {/* The component below renders a button for the tutorial walkthrough of Reactime */}
       <Tutorial dispatch={dispatch} currentTabInApp={currentTabInApp} />
     </div>