Skip to content

Commit 68658d1

Browse files
EivindDelFierroEivindDelFierro
authored
Merge pull request #1 from oslabs-beta/muiUpdate
MUI upgrade
2 parents 09d8a0e + 6ab3c85 commit 68658d1

File tree

3 files changed

+102
-63
lines changed

3 files changed

+102
-63
lines changed

‎package.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -155,12 +155,15 @@
155155
"webpack-cli": "^3.3.12"
156156
},
157157
"dependencies": {
158+
"@emotion/react": "^11.11.1",
159+
"@emotion/styled": "^11.11.0",
158160
"@fortawesome/fontawesome-free": "^5.15.1",
159161
"@fortawesome/fontawesome-svg-core": "^1.2.32",
160162
"@fortawesome/free-regular-svg-icons": "^5.15.1",
161163
"@fortawesome/free-solid-svg-icons": "^5.15.1",
162164
"@fortawesome/react-fontawesome": "^0.1.12",
163-
"@material-ui/core": "^4.12.4",
165+
"@mui/icons-material": "^5.14.1",
166+
"@mui/material": "^5.14.1",
164167
"@types/react-dom": "^17.0.14",
165168
"@types/react-router-dom": "^5.3.3",
166169
"@visx/axis": "^1.0.0",

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

Lines changed: 49 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,11 @@ 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-
import { makeStyles } from '@material-ui/core/styles';
14-
import Select from '@material-ui/core/Select';
15-
import MenuItem from '@material-ui/core/MenuItem';
16-
import FormControl from '@material-ui/core/FormControl';
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+
1718
import { onHover, onHoverExit, deleteSeries, setCurrentTabInApp } from '../../../actions/actions';
1819
import { useStoreContext } from '../../../store';
1920
import {
@@ -117,24 +118,41 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
117118
renderingScale.range([yMax, 0]);
118119

119120
// useStyles will change the styling on save series dropdown feature
120-
const useStyles = makeStyles((theme) => ({
121-
formControl: {
122-
margin: theme.spacing(1),
123-
minWidth: 80,
124-
height: 30,
125-
},
126-
select: {
127-
minWidth: 80,
128-
fontSize: '.75rem',
129-
fontWeight: 200,
130-
border: '1px solid grey',
131-
borderRadius: 4,
132-
color: 'grey',
133-
height: 30,
134-
},
135-
}));
121+
// const useStyles = makeStyles((theme) => ({
122+
// formControl: {
123+
// margin: theme.spacing(1),
124+
// minWidth: 80,
125+
// height: 30,
126+
// },
127+
// select: {
128+
// minWidth: 80,
129+
// fontSize: '.75rem',
130+
// fontWeight: 200,
131+
// border: '1px solid grey',
132+
// borderRadius: 4,
133+
// color: 'grey',
134+
// height: 30,
135+
// },
136+
// }));
137+
138+
// const classes = useStyles();
139+
140+
const StyledFormControl = styled(FormControl)(({ theme }) => ({
141+
margin: theme.spacing(1),
142+
minWidth: 80,
143+
height: 30,
144+
}));
145+
146+
const StyledSelect = styled(Select)({
147+
minWidth: 80,
148+
fontSize: '.75rem',
149+
fontWeight: 200,
150+
border: '1px solid grey',
151+
borderRadius: 4,
152+
color: 'grey',
153+
height: 30,
154+
});
136155

137-
const classes = useStyles();
138156

139157
const handleSeriesChange = (event: Event) => {
140158
if (!event) return;
@@ -225,11 +243,11 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
225243
<h4 className='compare-series-box' style={{ padding: '0 1rem' }}>
226244
Compare Series:{' '}
227245
</h4>
228-
<FormControl id='selectSeries' variant='outlined' className={classes.formControl}>
229-
<Select
246+
<StyledFormControl id='selectSeries' variant='outlined'>
247+
<StyledSelect
230248
style={{ color: 'white' }}
231249
labelId='simple-select-outlined-label'
232-
className={classes.select}
250+
233251
open={open}
234252
onClose={handleClose}
235253
onOpen={handleOpen}
@@ -245,15 +263,15 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
245263
</MenuItem>
246264
))
247265
)}
248-
</Select>
249-
</FormControl>
266+
</StyledSelect>
267+
</StyledFormControl>
250268
<h4 style={{ padding: '0 1rem' }}>Compare Actions </h4>
251-
<FormControl variant='outlined' className={classes.formControl}>
252-
<Select
269+
<StyledFormControl variant='outlined' >
270+
<StyledSelect
253271
style={{ color: 'white' }}
254272
labelId='snapshot-select'
255273
id='snapshot-select'
256-
className={classes.select}
274+
257275
open={picOpen}
258276
onClose={picHandleClose}
259277
onOpen={picHandleOpen}
@@ -268,8 +286,8 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
268286
// <MenuItem value="test">{}</MenuItem>
269287
))
270288
)}
271-
</Select>
272-
</FormControl>
289+
</StyledSelect>
290+
</StyledFormControl>
273291
</div>
274292
</div>
275293

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

Lines changed: 49 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,11 @@ import { scaleBand, scaleLinear, scaleOrdinal } from '@visx/scale';
88
import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip';
99
import { Text } from '@visx/text';
1010
import { schemeSet3 } from 'd3-scale-chromatic';
11-
import { makeStyles } from '@material-ui/core/styles';
12-
import Select from '@material-ui/core/Select';
13-
import MenuItem from '@material-ui/core/MenuItem';
14-
import FormControl from '@material-ui/core/FormControl';
11+
import { styled } from '@mui/system';
12+
import Select from '@mui/material/Select';
13+
import MenuItem from '@mui/material/MenuItem';
14+
import FormControl from '@mui/material/FormControl';
15+
1516
import { deleteSeries, setCurrentTabInApp } from '../../../actions/actions';
1617
import { useStoreContext } from '../../../store';
1718
import { TooltipData, Margin, BarGraphComparisonAction, ActionObj } from '../../../FrontendTypes';
@@ -97,24 +98,41 @@ const BarGraphComparisonActions = (props: BarGraphComparisonAction) => {
9798
renderingScale.range([yMax, 0]);
9899

99100
// useStyles will change the styling on save series dropdown feature
100-
const useStyles = makeStyles((theme) => ({
101-
formControl: {
102-
margin: theme.spacing(1),
103-
minWidth: 80,
104-
height: 30,
105-
},
106-
select: {
107-
minWidth: 80,
108-
fontSize: '.75rem',
109-
fontWeight: '200',
110-
border: '1px solid grey',
111-
borderRadius: 4,
112-
color: 'grey',
113-
height: 30,
114-
},
115-
}));
101+
// const useStyles = makeStyles((theme) => ({
102+
// formControl: {
103+
// margin: theme.spacing(1),
104+
// minWidth: 80,
105+
// height: 30,
106+
// },
107+
// select: {
108+
// minWidth: 80,
109+
// fontSize: '.75rem',
110+
// fontWeight: '200',
111+
// border: '1px solid grey',
112+
// borderRadius: 4,
113+
// color: 'grey',
114+
// height: 30,
115+
// },
116+
// }));
117+
118+
// const classes = useStyles();
116119

117-
const classes = useStyles();
120+
const StyledFormControl = styled(FormControl)(({ theme }) => ({
121+
margin: theme.spacing(1),
122+
minWidth: 80,
123+
height: 30,
124+
}));
125+
126+
const StyledSelect = styled(Select)({
127+
minWidth: 80,
128+
fontSize: '.75rem',
129+
fontWeight: 200,
130+
border: '1px solid grey',
131+
borderRadius: 4,
132+
color: 'grey',
133+
height: 30,
134+
});
135+
118136

119137
const handleSeriesChange = (event) => {
120138
if (!event) return;
@@ -165,12 +183,12 @@ const BarGraphComparisonActions = (props: BarGraphComparisonAction) => {
165183
Clear All Series
166184
</button>
167185
<h4 style={{ padding: '0 1rem' }}>Compare Series: </h4>
168-
<FormControl variant='outlined' className={classes.formControl}>
169-
<Select
186+
<StyledFormControl variant='outlined'>
187+
<StyledSelect
170188
style={{ color: 'white' }}
171189
labelId='simple-select-outlined-label'
172190
id='simple-select-outlined'
173-
className={classes.select}
191+
174192
value={series}
175193
onChange={handleSeriesChange}
176194
>
@@ -183,15 +201,15 @@ const BarGraphComparisonActions = (props: BarGraphComparisonAction) => {
183201
</MenuItem>
184202
))
185203
)}
186-
</Select>
187-
</FormControl>
204+
</StyledSelect>
205+
</StyledFormControl>
188206
<h4 style={{ padding: '0 1rem' }}>Compare Actions </h4>
189-
<FormControl variant='outlined' className={classes.formControl}>
190-
<Select
207+
<StyledFormControl variant='outlined'>
208+
<StyledSelect
191209
style={{ color: 'white' }}
192210
labelId='snapshot-select'
193211
id='snapshot-select'
194-
className={classes.select}
212+
195213
value={action} // snapshots
196214
onChange={handleActionChange}
197215
>
@@ -204,8 +222,8 @@ const BarGraphComparisonActions = (props: BarGraphComparisonAction) => {
204222
</MenuItem>
205223
))
206224
)}
207-
</Select>
208-
</FormControl>
225+
</StyledSelect>
226+
</StyledFormControl>
209227
</div>
210228
</div>
211229

0 commit comments

Comments
 (0)