Merge pull request #574 from entur/remove-mui-styles

Remove @mui/styles

package.json

@@ -27,7 +27,6 @@
     "@mui/icons-material": "5.15.2",
     "@mui/lab": "5.0.0-alpha.158",
     "@mui/material": "5.15.2",
-    "@mui/styles": "5.15.2",
     "@reduxjs/toolkit": "2.0.1",
     "@sentry/react": "7.91.0",
     "@sentry/tracing": "7.91.0",

src/components/EditStopPage/ParkingItemPayAndRideExpandedFields.js

@@ -13,6 +13,7 @@ See the Licence for the specific language governing permissions and
 limitations under the Licence. */
 
 import React from "react";
+import { styled } from "@mui/material/styles";
 import Select from "@mui/material/Select";
 import MenuItem from "@mui/material/MenuItem";
 import Input from "@mui/material/Input";
@@ -29,25 +30,39 @@ import { ActionAccessible } from "material-ui/svg-icons";
 import Payment from "material-ui/svg-icons/action/payment";
 import Box from "@mui/material/Box";
 import { Grid } from "@mui/material";
-import { makeStyles } from "@mui/styles";
+const PREFIX = "ParkingItemPayAndRideExpandedFields";
 
-const useStyles = makeStyles(() => ({
-  mainGrid: {
+const classes = {
+  mainGrid: `${PREFIX}-mainGrid`,
+  gridItemMargin: `${PREFIX}-gridItemMargin`,
+  boxFullWidth: `${PREFIX}-boxFullWidth`,
+  textField: `${PREFIX}-textField`,
+  selectInput: `${PREFIX}-selectInput`,
+  info: `${PREFIX}-info`,
+};
+
+const StyledGrid = styled(Grid)(() => ({
+  [`&.${classes.mainGrid}`]: {
     marginTop: ".5rem",
   },
-  gridItemMargin: {
+
+  [`& .${classes.gridItemMargin}`]: {
     marginLeft: "55px",
   },
-  boxFullWidth: {
+
+  [`& .${classes.boxFullWidth}`]: {
     width: "100%",
   },
-  textField: {
+
+  [`& .${classes.textField}`]: {
     marginTop: -10,
   },
-  selectInput: {
+
+  [`& .${classes.selectInput}`]: {
     width: "100%",
   },
-  info: {
+
+  [`& .${classes.info}`]: {
     color: "rgba(0, 0, 0, 0.54)",
     fontSize: "12px",
     paddingLeft: "16px",
@@ -57,7 +72,6 @@ const useStyles = makeStyles(() => ({
 }));
 
 const Info = ({ children }) => {
-  const classes = useStyles();
   return <p className={classes.info}>{children}</p>;
 };
 
@@ -105,10 +119,8 @@ const ParkingItemPayAndRideExpandedFields = (props) => {
     handleSetNumberOfSpacesForRegisteredDisabledUserType,
   } = props;
 
-  const classes = useStyles();
-
   return (
-    <Grid
+    <StyledGrid
       container
       alignItems="stretch"
       direction="column"
@@ -323,7 +335,7 @@ const ParkingItemPayAndRideExpandedFields = (props) => {
           />
         </Box>
       </Grid>
-    </Grid>
+    </StyledGrid>
   );
 };
 

src/components/ReportPageV2/StopTypeFilter.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { makeStyles } from "@mui/styles";
+import { styled } from "@mui/material/styles";
 import { injectIntl } from "react-intl";
 import Input from "@mui/material/Input";
 import InputLabel from "@mui/material/InputLabel";
@@ -12,20 +12,32 @@ import Select from "@mui/material/Select";
 import stopTypes from "../../models/stopTypes";
 import ModalityIconSvg from "../MainPage/ModalityIconSvg";
 
-const useStyles = makeStyles((theme) => ({
-  formControl: {
+const PREFIX = "StopTypeFilter";
+
+const classes = {
+  formControl: `${PREFIX}-formControl`,
+  chips: `${PREFIX}-chips`,
+  chip: `${PREFIX}-chip`,
+  noLabel: `${PREFIX}-noLabel`,
+};
+
+const StyledFormControl = styled(FormControl)(({ theme }) => ({
+  [`&.${classes.formControl}`]: {
     //margin: theme.spacing(1),
     minWidth: 300,
     maxWidth: 500,
   },
-  chips: {
+
+  [`& .${classes.chips}`]: {
     display: "flex",
     flexWrap: "wrap",
   },
-  chip: {
+
+  [`& .${classes.chip}`]: {
     margin: 2,
   },
-  noLabel: {
+
+  [`& .${classes.noLabel}`]: {
     marginTop: theme.spacing(3),
   },
 }));
@@ -42,11 +54,10 @@ const MenuProps = {
 };
 
 const StopTypeFilter = ({ intl: { formatMessage }, value, onChange }) => {
-  const classes = useStyles();
   const modalities = Object.keys(stopTypes);
 
   return (
-    <FormControl className={classes.formControl} variant="standard">
+    <StyledFormControl className={classes.formControl} variant="standard">
       <InputLabel id="modality-filter-label">Modality filter</InputLabel>
       <Select
         id="modality-filter"
@@ -77,7 +88,7 @@ const StopTypeFilter = ({ intl: { formatMessage }, value, onChange }) => {
           </MenuItem>
         ))}
       </Select>
-    </FormControl>
+    </StyledFormControl>
   );
 };