Remove makeStyles and withStyles from @mui/styles library

Related to #113
sebastienbarbier · Jun 23, 2023 · c056376 · c056376
1 parent 2be2a0d
commit c056376
Show file tree

Hide file tree

Showing 19 changed files with 322 additions and 525 deletions.
diff --git a/src/app/components/accounts/SyncButton.js b/src/app/components/accounts/SyncButton.js
@@ -7,7 +7,6 @@ import moment from "moment";
 
 import React, { useState } from "react";
 import { useSelector, useDispatch } from "react-redux";
-import { makeStyles } from "@mui/styles";
 
 import { styled } from '@mui/material/styles';
 
@@ -21,21 +20,6 @@ import Badge from "@mui/material/Badge";
 
 import ServerActions from "../../actions/ServerActions";
 
-const useStyles = makeStyles({
-  badge: {
-    top: "50%",
-    right: -3
-  },
-  badge2digits: {
-    top: "50%",
-    right: -5
-  },
-  badge3digits: {
-    top: "50%",
-    right: -8
-  }
-});
-
 const StyledBadge = styled(Badge)(({ theme }) => ({
   '& .MuiBadge-badge': {
     right: -3,
@@ -54,15 +38,6 @@ export default function SyncButton(props) {
   const last_sync = useSelector(state => state.server.last_sync);
   const badge = useSelector(state => state.sync.counter || 0);
 
-  const classes = useStyles();
-
-  let badgeStyle = classes.badge;
-  if (badge > 9 && badge <= 99) {
-    badgeStyle = classes.badge2digits;
-  } else if (badge > 99) {
-    badgeStyle = classes.badge3digits;
-  }
-
   const sync = () => {
     if (props.onClick) {
       props.onClick();

diff --git a/src/app/components/categories/CategoriesMultiSelector.js b/src/app/components/categories/CategoriesMultiSelector.js
@@ -8,10 +8,7 @@ import { useSelector, useDispatch } from "react-redux";
 import PropTypes from "prop-types";
 import { emphasize, useTheme } from "@mui/material/styles";
 
-
-import makeStyles from '@mui/styles/makeStyles';
-
-
+import Box from "@mui/material/Box";
 import MenuItem from "@mui/material/MenuItem";
 import Paper from "@mui/material/Paper";
 import Chip from "@mui/material/Chip";
@@ -31,63 +28,11 @@ import AccountsActions from "../../actions/AccountsActions";
 
 const ITEM_HEIGHT = 48;
 
-const useStyles = makeStyles(theme => ({
-  root: {
-    flexGrow: 1,
-    height: 250
-  },
-  input: {
-    display: "flex",
-    padding: 0,
-    height: "auto"
-  },
-  valueContainer: {
-    display: "flex",
-    flexWrap: "wrap",
-    flex: 1,
-    alignItems: "center",
-    overflow: "hidden"
-  },
-  chip: {
-    margin: theme.spacing(0.5, 0.25)
-  },
-  chipFocused: {
-    backgroundColor: emphasize(
-      theme.palette.mode === "light"
-        ? theme.palette.grey[300]
-        : theme.palette.grey[700],
-      0.08
-    )
-  },
-  noOptionsMessage: {
-    padding: theme.spacing(1, 2)
-  },
-  singleValue: {
-    fontSize: 16
-  },
-  placeholder: {
-    position: "absolute",
-    left: 2,
-    bottom: 6,
-    fontSize: 16
-  },
-  paper: {
-    position: "absolute",
-    zIndex: 1,
-    marginTop: theme.spacing(1),
-    left: 0,
-    right: 0
-  },
-  divider: {
-    height: theme.spacing(2)
-  }
-}));
-
 function NoOptionsMessage(props) {
   return (
     <Typography
       color="textSecondary"
-      className={props.selectProps.classes.noOptionsMessage}
+      sx={{ padding: theme.spacing(1, 2) }}
       {...props.innerProps}
     >
       {props.children}
@@ -103,7 +48,7 @@ function Control(props) {
     children,
     innerProps,
     innerRef,
-    selectProps: { classes, TextFieldProps }
+    selectProps: { TextFieldProps }
   } = props;
 
   return (
@@ -112,7 +57,11 @@ function Control(props) {
       InputProps={{
         inputComponent,
         inputProps: {
-          className: classes.input,
+          sx: {
+            display: "flex",
+            padding: 0,
+            height: "auto"
+          },
           ref: innerRef,
           children,
           ...innerProps
@@ -126,7 +75,13 @@ function Menu(props) {
   return (
     <Paper
       square
-      className={props.selectProps.classes.paper}
+      sx={{
+        position: "absolute",
+        zIndex: 1,
+        marginTop: theme.spacing(1),
+        left: 0,
+        right: 0
+      }}
       {...props.innerProps}
     >
       {props.children}
@@ -138,7 +93,9 @@ function MultiValue(props) {
     <Chip
       tabIndex={-1}
       label={props.children}
-      className={props.selectProps.classes.chip}
+      sx={{
+        margin: theme.spacing(0.5, 0.25)
+      }}
       onDelete={props.removeProps.onClick}
       deleteIcon={<CancelIcon {...props.removeProps} />}
     />
@@ -163,7 +120,12 @@ function Placeholder(props) {
   return (
     <Typography
       color="textSecondary"
-      className={props.selectProps.classes.placeholder}
+      sx={{
+        position: "absolute",
+        left: 2,
+        bottom: 6,
+        fontSize: 16
+      }}
       {...props.innerProps}
     >
       {props.children}
@@ -174,7 +136,9 @@ function Placeholder(props) {
 function SingleValue(props) {
   return (
     <Typography
-      className={props.selectProps.classes.singleValue}
+      sx={{
+        fontSize: 16
+      }}
       {...props.innerProps}
     >
       {props.children}
@@ -183,9 +147,16 @@ function SingleValue(props) {
 }
 function ValueContainer(props) {
   return (
-    <div className={props.selectProps.classes.valueContainer}>
+    <Box
+      sx={{
+        display: "flex",
+        flexWrap: "wrap",
+        flex: 1,
+        alignItems: "center",
+        overflow: "hidden"
+      }}>
       {props.children}
-    </div>
+    </Box>
   );
 }
 
@@ -201,7 +172,6 @@ const components = {
 };
 
 export default function CategoriesMultiSelector(props) {
-  const classes = useStyles();
   const theme = useTheme();
   const dispatch = useDispatch();
 
@@ -250,7 +220,6 @@ export default function CategoriesMultiSelector(props) {
   return (
     <div className={props.className}>
       <Select
-        classes={classes}
         styles={selectStyles}
         inputId="react-select-multiple"
         TextFieldProps={{

diff --git a/src/app/components/changes/ChangeList.js b/src/app/components/changes/ChangeList.js
@@ -4,8 +4,6 @@ import React, { useState, useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import moment from "moment";
 
-import { makeStyles } from "@mui/styles";
-
 import Table from "@mui/material/Table";
 import TableHead from "@mui/material/TableHead";
 import TableBody from "@mui/material/TableBody";
@@ -33,11 +31,9 @@ import SwapHorizIcon from "@mui/icons-material/SwapHoriz";
 import { Amount } from "../currency/Amount";
 import { stringToDate } from "../../utils/date";
 
-const useStyles = makeStyles({
-  icon: {
-    fontSize: "20px",
-  },
-});
+const CSS_ICON = {
+  fontSize: "20px",
+};
 
 function sortChanges(a, b) {
   if (a.date > b.date) {
@@ -57,7 +53,6 @@ function sortChanges(a, b) {
 const ELEMENT_PER_PAGE = 20;
 
 export default function ChangeList(props) {
-  const classes = useStyles();
 
   const selectedCurrency = useSelector((state) => {
     return state.currencies.find((c) => c.id == state.account.currency);
@@ -111,7 +106,7 @@ export default function ChangeList(props) {
                         &nbsp;
                         <Icon style={{ verticalAlign: "bottom" }}>
                           <SwapHorizIcon
-                            className={classes.icon}
+                            sx={CSS_ICON}
                             fontSize="small"
                           />
                         </Icon>
@@ -179,7 +174,7 @@ export default function ChangeList(props) {
                         <span className="loading w30" />
                         &nbsp;
                         <Icon style={{ verticalAlign: "bottom", opacity: 0.5 }}>
-                          <SwapHorizIcon className={classes.icon} />
+                          <SwapHorizIcon sx={CSS_ICON} />
                         </Icon>
                         &nbsp;
                         <span className="loading w30" />
@@ -249,4 +244,4 @@ export default function ChangeList(props) {
       </Menu>
     </div>
   );
-}
+}