Skip to content

Commit 54ee721

Browse files
brok3turtl3brok3turtl3
committed
MUI update
1 parent 7a44ecd commit 54ee721

File tree

6 files changed

+110
-92
lines changed

6 files changed

+110
-92
lines changed

‎demo-app/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
"webpack-dev-server": "^4.7.2"
2828
},
2929
"dependencies": {
30+
"@mui/styled-engine-sc": "^5.12.0",
3031
"express": "^4.17.2",
3132
"react": "^18.1.0",
3233
"react-dom": "^18.1.0",

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -164,6 +164,7 @@
164164
"@fortawesome/react-fontawesome": "^0.1.12",
165165
"@mui/icons-material": "^5.14.1",
166166
"@mui/material": "^5.14.1",
167+
"@mui/styled-engine-sc": "^5.12.0",
167168
"@types/react-dom": "^17.0.14",
168169
"@types/react-router-dom": "^5.3.3",
169170
"@visx/axis": "^1.0.0",
@@ -215,4 +216,4 @@
215216
"web-vitals": "^1.1.0",
216217
"yarn": "^1.22.19"
217218
}
218-
}
219+
}

‎src/app/components/App.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import MainContainer from '../containers/MainContainer';
44
import { StoreContext } from '../store';
55
import mainReducer from '../reducers/mainReducer.js';
66
import { InitialStateProps } from '../FrontendTypes';
7+
import { ThemeProvider } from '@mui/material/styles';
8+
import theme from './theme';
79
// currentTab is the current active tab within Google Chrome.
810
// This is used to decide what tab Reactime should be monitoring. This can be "locked"
911
// currentTabInApp is the current active tab within Reactime (Map, Performance, History, etc).
@@ -20,11 +22,13 @@ const initialState: InitialStateProps = {
2022

2123
function App(): JSX.Element {
2224
return (
25+
<ThemeProvider theme={theme}>
2326
<Router> {/* we wrap our application with the <Router> tag so that all components that are nested will have the react-router context */}
2427
<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 */}
2528
<MainContainer />
2629
</StoreContext.Provider>
2730
</Router>
31+
</ThemeProvider>
2832
);
2933
}
3034

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

Lines changed: 38 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// @ts-nocheck
22
/// <reference lib="dom" />
33
/* eslint-disable no-param-reassign */
4-
import React, { useEffect } from 'react';
4+
import React, { useEffect, useState } from 'react';
55
import { BarStack } from '@visx/shape';
66
import { Group } from '@visx/group';
77
import { Grid } from '@visx/grid';
@@ -10,7 +10,12 @@ import { scaleBand, scaleLinear, scaleOrdinal } from '@visx/scale';
1010
import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip';
1111
import { Text } from '@visx/text';
1212
import { schemeTableau10 } from 'd3-scale-chromatic';
13-
13+
import { styled } from '@mui/system';
14+
import Select from '@mui/material/Select';
15+
import MenuItem from '@mui/material/MenuItem';
16+
import FormControl from '@mui/material/FormControl';
17+
import { useTheme } from '@mui/material/styles';
18+
import { Button } from '@mui/material';
1419
import { onHover, onHoverExit, deleteSeries, setCurrentTabInApp } from '../../../actions/actions';
1520
import { useStoreContext } from '../../../store';
1621
import {
@@ -45,9 +50,13 @@ const tooltipStyles = {
4550
const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
4651
const [{ tabs, currentTab }, dispatch] = useStoreContext();
4752
const { width, height, data, comparison, setSeries, series, setAction } = props;
48-
const [snapshots] = React.useState(0);
49-
const [open, setOpen] = React.useState(false);
50-
const [picOpen, setPicOpen] = React.useState(false);
53+
const [snapshots] = useState(0);
54+
const [open, setOpen] = useState(false);
55+
const [picOpen, setPicOpen] = useState(false);
56+
//tracking whether or not the clear series button is clicked
57+
const [buttonLoad, setButtonLoad] = useState(false);
58+
59+
const theme = useTheme();
5160
useEffect(() => {
5261
dispatch(setCurrentTabInApp('performance-comparison'));
5362
}, [dispatch]);
@@ -113,25 +122,7 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
113122
snapshotIdScale.rangeRound([0, xMax]);
114123
renderingScale.range([yMax, 0]);
115124

116-
// useStyles will change the styling on save series dropdown feature
117-
// const useStyles = makeStyles((theme) => ({
118-
// formControl: {
119-
// margin: theme.spacing(1),
120-
// minWidth: 80,
121-
// height: 30,
122-
// },
123-
// select: {
124-
// minWidth: 80,
125-
// fontSize: '.75rem',
126-
// fontWeight: 200,
127-
// border: '1px solid grey',
128-
// borderRadius: 4,
129-
// color: 'grey',
130-
// height: 30,
131-
// },
132-
// }));
133125

134-
// const classes = useStyles();
135126

136127
const StyledFormControl = styled(FormControl)(({ theme }) => ({
137128
margin: theme.spacing(1),
@@ -143,9 +134,6 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
143134
minWidth: 80,
144135
fontSize: '.75rem',
145136
fontWeight: 200,
146-
border: '1px solid grey',
147-
borderRadius: 4,
148-
color: 'grey',
149137
height: 30,
150138
});
151139

@@ -197,22 +185,6 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
197185
return data.barStack;
198186
}
199187

200-
const animateButton = (e: MouseEvent) => {
201-
e.preventDefault();
202-
const target = e.target as HTMLButtonElement;
203-
if (target) {
204-
target.classList.add('animate');
205-
target.innerHTML = 'Deleted!';
206-
setTimeout(() => {
207-
target.innerHTML = 'Clear All Series';
208-
target.classList.remove('animate');
209-
}, 1000);
210-
}
211-
};
212-
const classname = document.getElementsByClassName('delete-button');
213-
for (let i = 0; i < classname.length; i += 1) {
214-
classname[i].addEventListener('click', animateButton, false);
215-
}
216188
const seriesList: ActionObj[][] = comparison.map((action: Series) => action.data.barStack);
217189
const actionsList: ActionObj[] = seriesList.flat();
218190
const testList: string[] = actionsList.map((elem: ActionObj) => elem.name);
@@ -226,21 +198,38 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
226198
<div>
227199
<div className='series-options-container'>
228200
<div className='dropdown-and-delete-series-container'>
229-
<button
230-
type='button'
201+
<Button
202+
variant='contained'
203+
sx={{ p: 2, color: 'white' }}
204+
// type='button'
231205
className='delete-button'
232206
onClick={() => {
207+
setButtonLoad(true);
233208
dispatch(deleteSeries());
209+
210+
setTimeout(() => {
211+
setButtonLoad(false);
212+
}, 1000);
234213
}}
214+
style={
215+
buttonLoad
216+
? { backgroundColor: theme.palette.secondary.main }
217+
: //KYLE YOU LEFT OFF HERE
218+
{ backgroundColor: theme.palette.primary.main }
219+
}
235220
>
236-
Clear All Series
237-
</button>
221+
{buttonLoad ? 'Deleted' : 'Clear Series'}
222+
</Button>
238223
<h4 className='compare-series-box' style={{ padding: '0 1rem' }}>
239224
Compare Series:{' '}
240225
</h4>
241-
<StyledFormControl id='selectSeries' variant='outlined'>
226+
<StyledFormControl
227+
id='selectSeries'
228+
variant='outlined'
229+
label='compares series'
230+
// sx={{ backgroundColor: theme.palette.primary.main }}
231+
>
242232
<StyledSelect
243-
style={{ color: 'white' }}
244233
labelId='simple-select-outlined-label'
245234
open={open}
246235
onClose={handleClose}
@@ -285,7 +274,7 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
285274
</div>
286275

287276
<svg ref={containerRef} width={width} height={height}>
288-
{}
277+
{ }
289278
<rect x={0} y={0} width={width} height={height} fill={background} rx={14} />
290279
<Grid
291280
top={margin.top}

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

Lines changed: 30 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// @ts-nocheck
2-
import React, { useEffect } from 'react';
2+
import React, { useEffect, useState } from 'react';
33
import { BarStack } from '@visx/shape';
44
import { Group } from '@visx/group';
55
import { Grid } from '@visx/grid';
@@ -9,6 +9,13 @@ import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip';
99
import { Text } from '@visx/text';
1010
import { schemeSet3 } from 'd3-scale-chromatic';
1111

12+
import { styled } from '@mui/system';
13+
import Select from '@mui/material/Select';
14+
import MenuItem from '@mui/material/MenuItem';
15+
import FormControl from '@mui/material/FormControl';
16+
import { useTheme } from '@mui/material/styles';
17+
import { Button } from '@mui/material';
18+
1219
import { deleteSeries, setCurrentTabInApp } from '../../../actions/actions';
1320
import { useStoreContext } from '../../../store';
1421
import { TooltipData, Margin, BarGraphComparisonAction, ActionObj } from '../../../FrontendTypes';
@@ -38,6 +45,11 @@ const BarGraphComparisonActions = (props: BarGraphComparisonAction) => {
3845
const [snapshots] = React.useState(0);
3946
const [setOpen] = React.useState(false);
4047
const [setPicOpen] = React.useState(false);
48+
49+
const [buttonLoad, setButtonLoad] = useState(false);
50+
const theme = useTheme();
51+
52+
4153
useEffect(() => {
4254
dispatch(setCurrentTabInApp('performance-comparison'));
4355
}, []);
@@ -93,26 +105,6 @@ const BarGraphComparisonActions = (props: BarGraphComparisonAction) => {
93105
seriesNameScale.rangeRound([0, xMax]);
94106
renderingScale.range([yMax, 0]);
95107

96-
// useStyles will change the styling on save series dropdown feature
97-
// const useStyles = makeStyles((theme) => ({
98-
// formControl: {
99-
// margin: theme.spacing(1),
100-
// minWidth: 80,
101-
// height: 30,
102-
// },
103-
// select: {
104-
// minWidth: 80,
105-
// fontSize: '.75rem',
106-
// fontWeight: '200',
107-
// border: '1px solid grey',
108-
// borderRadius: 4,
109-
// color: 'grey',
110-
// height: 30,
111-
// },
112-
// }));
113-
114-
// const classes = useStyles();
115-
116108
const StyledFormControl = styled(FormControl)(({ theme }) => ({
117109
margin: theme.spacing(1),
118110
minWidth: 80,
@@ -123,9 +115,6 @@ const BarGraphComparisonActions = (props: BarGraphComparisonAction) => {
123115
minWidth: 80,
124116
fontSize: '.75rem',
125117
fontWeight: 200,
126-
border: '1px solid grey',
127-
borderRadius: 4,
128-
color: 'grey',
129118
height: 30,
130119
});
131120

@@ -142,19 +131,8 @@ const BarGraphComparisonActions = (props: BarGraphComparisonAction) => {
142131
setSeries(false);
143132
};
144133

145-
const animateButton = function (e) {
146-
e.preventDefault();
147-
e.target.classList.add('animate');
148-
e.target.innerHTML = 'Deleted!';
149-
setTimeout(() => {
150-
e.target.innerHTML = 'Clear All Series';
151-
e.target.classList.remove('animate');
152-
}, 1000);
153-
};
154-
const classname = document.getElementsByClassName('delete-button');
155-
for (let i = 0; i < classname.length; i += 1) {
156-
classname[i].addEventListener('click', animateButton, false);
157-
}
134+
135+
158136
const seriesList = comparison.map((elem) => elem.data.barStack);
159137
const actionsList = seriesList.flat();
160138
const testList = actionsList.map((elem) => elem.name);
@@ -168,16 +146,26 @@ const BarGraphComparisonActions = (props: BarGraphComparisonAction) => {
168146
<div>
169147
<div className='series-options-container'>
170148
<div className='dropdown-and-delete-series-container'>
171-
<button
149+
<Button
150+
variant='contained'
151+
sx={{ p: 2, color: 'white' }}
172152
className='delete-button'
173153
onClick={() => {
174-
setAction(false);
175-
setSeries(true);
154+
setButtonLoad(true);
176155
dispatch(deleteSeries());
156+
157+
setTimeout(() => {
158+
setButtonLoad(false);
159+
}, 1000);
177160
}}
161+
style={
162+
buttonLoad
163+
? { backgroundColor: theme.palette.primary.main }
164+
: { backgroundColor: theme.palette.secondary.main }
165+
}
178166
>
179-
Clear All Series
180-
</button>
167+
{buttonLoad ? 'Deleted' : 'Clear Series'}
168+
</Button>
181169
<h4 style={{ padding: '0 1rem' }}>Compare Series: </h4>
182170
<StyledFormControl variant='outlined'>
183171
<StyledSelect

‎src/app/components/theme.ts

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { createTheme } from '@mui/material/styles';
2+
const theme = createTheme({
3+
palette: {
4+
primary: {
5+
main: '#8Fb5f9',
6+
},
7+
secondary: {
8+
main: '#BF6DD2',
9+
},
10+
},
11+
components: {
12+
// Name of the component
13+
14+
MuiButton: {
15+
styleOverrides: {
16+
// Name of the slot
17+
root: {
18+
// Some CSS
19+
fontSize: '0.8rem',
20+
letterSpacing: '0.1rem',
21+
lineHeight: '0.8rem',
22+
},
23+
},
24+
},
25+
// MuiSelect: {
26+
// styleOverrides: {
27+
// root: {
28+
// main: '#556cd4',
29+
// },
30+
// },
31+
// },
32+
},
33+
});
34+
35+
export default theme;

0 commit comments

Comments
 (0)