refactor: Remove makeStyles classes in favour of styled components

editor.planx.uk/package.json

@@ -11,9 +11,9 @@
     "@feedback-fish/react": "^1.2.1",
     "@material-ui/core": "^4.12.4",
     "@mui/icons-material": "^5.11.16",
-    "@mui/material": "5.11.9",
-    "@mui/styles": "5.11.9",
-    "@mui/utils": "5.11.9",
+    "@mui/material": "5.12.3",
+    "@mui/styles": "5.12.3",
+    "@mui/utils": "5.12.3",
     "@opensystemslab/map": "^0.7.4",
     "@opensystemslab/planx-core": "github:theopensystemslab/planx-core#026f43f",
     "@opensystemslab/planx-document-templates": "github:theopensystemslab/planx-document-templates#debaeca",

editor.planx.uk/src/@planx/components/Calculate/Editor.tsx

@@ -1,4 +1,4 @@
-import makeStyles from "@mui/styles/makeStyles";
+import { styled } from "@mui/material/styles";
 import { TYPES } from "@planx/components/types";
 import {
   EditorProps,
@@ -19,17 +19,14 @@ import { evaluate, getVariables, parseCalculate } from "./model";
 
 export type Props = EditorProps<TYPES.Calculate, Calculate>;
 
-const useClasses = makeStyles((_theme) => ({
-  were: {
-    alignSelf: "center",
-    margin: "auto 1rem",
-    textAlign: "center",
-  },
+const Were = styled("span")(() => ({
+  alignSelf: "center",
+  margin: "auto 1rem",
+  textAlign: "center",
 }));
 
 const UNKNOWN = "unknown";
 export default function Component(props: Props) {
-  const classes = useClasses();
   const formik = useFormik({
     initialValues: parseCalculate(props.node?.data),
     onSubmit: (newValues) => {
@@ -123,10 +120,10 @@ export default function Component(props: Props) {
           {variables?.length ? (
             <>
               <p>If</p>
-              {variables.map((variable, i) => (
+              {variables.map((variable) => (
                 <InputRow key={variable}>
                   <Input value={variable} disabled />
-                  <span className={classes.were}>were</span>
+                  <Were>were</Were>
                   <Input
                     name={`samples['${variable}']`}
                     value={formik.values.samples[variable]}

editor.planx.uk/src/@planx/components/Confirmation/Public.tsx

@@ -1,7 +1,7 @@
 import Check from "@mui/icons-material/Check";
 import Box from "@mui/material/Box";
+import { styled } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
-import makeStyles from "@mui/styles/makeStyles";
 import Card from "@planx/components/shared/Preview/Card";
 import { PublicProps } from "@planx/components/ui";
 import { useStore } from "pages/FlowEditor/lib/store";
@@ -14,22 +14,17 @@ import ReactMarkdownOrHtml from "ui/ReactMarkdownOrHtml";
 import { makeCsvData } from "../Send/uniform";
 import type { Confirmation } from "./model";
 
-const useClasses = makeStyles((theme) => ({
-  table: {
-    width: "100%",
-    borderCollapse: "collapse",
-    "& tr": {
-      borderBottom: `1px solid ${theme.palette.grey[400]}`,
-      "&:last-of-type": {
-        border: "none",
-      },
-      "& td": {
-        padding: theme.spacing(1.5, 1),
-      },
+const Table = styled("table")(({ theme }) => ({
+  width: "100%",
+  borderCollapse: "collapse",
+  "& tr": {
+    borderBottom: `1px solid ${theme.palette.grey[400]}`,
+    "&:last-of-type": {
+      border: "none",
+    },
+    "& td": {
+      padding: theme.spacing(1.5, 1),
     },
-  },
-  listHeading: {
-    marginBottom: theme.spacing(2),
   },
 }));
 
@@ -55,8 +50,6 @@ export default function ConfirmationComponent(props: Props) {
     sessionId,
   });
 
-  const classes = useClasses();
-
   return (
     <Box width="100%">
       <Banner
@@ -73,7 +66,7 @@ export default function ConfirmationComponent(props: Props) {
       </Banner>
       <Card>
         {props.details && (
-          <table className={classes.table}>
+          <Table>
             <tbody>
               {Object.entries(props.details).map((item, i) => (
                 <tr key={i}>
@@ -84,7 +77,7 @@ export default function ConfirmationComponent(props: Props) {
                 </tr>
               ))}
             </tbody>
-          </table>
+          </Table>
         )}
 
         {
@@ -98,11 +91,7 @@ export default function ConfirmationComponent(props: Props) {
 
         {props.nextSteps && Boolean(props.nextSteps?.length) && (
           <Box pt={3}>
-            <Typography
-              variant="h3"
-              component="h2"
-              className={classes.listHeading}
-            >
+            <Typography variant="h3" component="h2" sx={{ mb: 2 }}>
               What happens next?
             </Typography>
             <NumberedList items={props.nextSteps} heading="h3" />

editor.planx.uk/src/@planx/components/DateInput/Public.tsx

@@ -1,4 +1,4 @@
-import makeStyles from "@mui/styles/makeStyles";
+import Box from "@mui/material/Box";
 import { visuallyHidden } from "@mui/utils";
 import {
   DateInput,
@@ -20,13 +20,6 @@ import { getPreviouslySubmittedData, makeData } from "../shared/utils";
 
 export type Props = PublicProps<DateInput, UserData>;
 
-const useClasses = makeStyles(() => ({
-  fieldset: {
-    border: 0,
-    padding: 0,
-  },
-}));
-
 const DateInputPublic: React.FC<Props> = (props) => {
   const formik = useFormik({
     initialValues: {
@@ -42,12 +35,11 @@ const DateInputPublic: React.FC<Props> = (props) => {
     }),
   });
 
-  const classes = useClasses();
-
   return (
     <Card handleSubmit={formik.handleSubmit}>
-      <fieldset
-        className={classes.fieldset}
+      <Box
+        component="fieldset"
+        sx={{ p: 0, border: 0 }}
         role="group"
         aria-describedby={[
           props.description ? DESCRIPTION_TEXT : "",
@@ -76,7 +68,7 @@ const DateInputPublic: React.FC<Props> = (props) => {
             id={props.id}
           />
         </InputRow>
-      </fieldset>
+      </Box>
     </Card>
   );
 };

editor.planx.uk/src/@planx/components/FileUpload/Public.tsx

@@ -291,7 +291,7 @@ function Dropzone(props: any) {
 
   return (
     <>
-      {slots.map(({ id, file, status, progress, url }: any, index: number) => {
+      {slots.map(({ id, file, progress, url }: any, index: number) => {
         return (
           <Box key={id} className={classes.file}>
             <IconButton

editor.planx.uk/src/@planx/components/Notice/Public.tsx

@@ -1,8 +1,8 @@
 import { mostReadable } from "@ctrl/tinycolor";
 import ErrorOutline from "@mui/icons-material/ErrorOutline";
+import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
-import { Theme } from "@mui/material/styles";
-import makeStyles from "@mui/styles/makeStyles";
+import { styled } from "@mui/material/styles";
 import type { Notice } from "@planx/components/Notice/model";
 import Card from "@planx/components/shared/Preview/Card";
 import QuestionHeader from "@planx/components/shared/Preview/QuestionHeader";
@@ -17,51 +17,54 @@ interface StyleProps {
   color: string;
 }
 
-const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
-  container: {
-    position: "relative",
-    width: "100%",
-    display: "flex",
-    alignItems: "flex-start",
-    justifyContent: "space-between",
-    backgroundColor: (props) => props.color,
-    color: (props) =>
-      mostReadable(props.color, ["#fff", "#000"])?.toHexString(),
-    "&:before": {
-      content: "' '",
-      position: "absolute",
-      top: 0,
-      left: 0,
-      width: 10,
-      bottom: 0,
-      backgroundColor: (props) =>
-        mostReadable(props.color, ["#fff", "#000"])?.toHexString(),
-      opacity: 0.3,
-    },
-    padding: theme.spacing(2),
-    paddingLeft: `calc(${theme.spacing(2)} + 10px)`,
-  },
-  content: {
-    flex: 1,
+const Container = styled(Box)<StyleProps>(({ theme, color }) => ({
+  position: "relative",
+  width: "100%",
+  display: "flex",
+  alignItems: "flex-start",
+  justifyContent: "space-between",
+  backgroundColor: color,
+  color: mostReadable(color, ["#fff", "#000"])?.toHexString(),
+  "&:before": {
+    content: "' '",
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: 10,
+    bottom: 0,
+    backgroundColor: mostReadable(color, ["#fff", "#000"])?.toHexString(),
+    opacity: 0.3,
   },
-  title: {
-    fontSize: theme.typography.pxToRem(25),
-    fontWeight: 700,
-    margin: 0,
-  },
-  description: {
+  padding: theme.spacing(2),
+  paddingLeft: `calc(${theme.spacing(2)} + 10px)`,
+}));
+
+const Content = styled(Box)(() => ({
+  flex: 1,
+}));
+
+const Title = styled("h3")(({ theme }) => ({
+  fontSize: theme.typography.pxToRem(25),
+  fontWeight: 700,
+  margin: 0,
+}));
+
+interface DescriptionProps {
+  color: string;
+}
+
+const Description = styled(ReactMarkdownOrHtml)<DescriptionProps>(
+  ({ theme, color }) => ({
     fontSize: theme.typography.pxToRem(15),
     fontWeight: 400,
     margin: theme.spacing(2, 0, 0, 0),
     "& a": {
-      color: (props) =>
-        getContrastTextColor(props.color, theme.palette.primary.main),
+      color: getContrastTextColor(color, theme.palette.primary.main),
     },
-  },
-}));
+  })
+);
 
 const NoticeComponent: React.FC<Props> = (props) => {
-  const styles = useStyles({ color: props.color || "#EFEFEF" });
   const handleSubmit = !props.resetButton
     ? () => props.handleSubmit?.()
     : undefined;
@@ -73,16 +76,13 @@ const NoticeComponent: React.FC<Props> = (props) => {
           policyRef={props.policyRef}
           howMeasured={props.howMeasured}
         />
-        <div className={styles.container}>
-          <div className={styles.content}>
-            <h3 className={styles.title}>{props.title}</h3>
-            <ReactMarkdownOrHtml
-              className={styles.description}
-              source={props.description}
-            />
-          </div>
+        <Container color={props.color || "#EFEFEF"}>
+          <Content>
+            <Title>{props.title}</Title>
+            <Description color={props.color} source={props.description} />
+          </Content>
           <ErrorOutline />
-        </div>
+        </Container>
         {props.resetButton && (
           <Button
             variant="contained"

editor.planx.uk/src/@planx/components/Question/Public/ButtonQuestion.tsx

@@ -1,6 +1,6 @@
+import Box from "@mui/material/Box";
 import Grid from "@mui/material/Grid";
-import { useTheme } from "@mui/material/styles";
-import makeStyles from "@mui/styles/makeStyles";
+import { styled, useTheme } from "@mui/material/styles";
 import { visuallyHidden } from "@mui/utils";
 import DecisionButton from "@planx/components/shared/Buttons/DecisionButton";
 import DescriptionButton from "@planx/components/shared/Buttons/DescriptionButton";
@@ -13,22 +13,15 @@ import React from "react";
 
 import { IQuestion, QuestionLayout } from "./Question";
 
-const useClasses = makeStyles(() => ({
-  fieldset: {
-    border: 0,
-    padding: 0,
-  },
-  gridContainer: {
-    // Overwrite Mui Grid style to align with "Continue" button
-    "& > .MuiGrid-item": {
-      padding: "0px 0px 8px 2px",
-    },
+const StyledGrid = styled(Grid)(() => ({
+  // Overwrite Mui Grid style to align with "Continue" button
+  "& > .MuiGrid-item": {
+    padding: "0px 0px 8px 2px",
   },
 }));
 
 const ButtonQuestion: React.FC<IQuestion> = (props) => {
   const theme = useTheme();
-  const classes = useClasses();
 
   const previousResponseId = props?.previouslySubmittedData?.answers?.[0];
   const previousResponseKey = props.responses.find(
@@ -67,8 +60,9 @@ const ButtonQuestion: React.FC<IQuestion> = (props) => {
       isValid={Boolean(formik.values.selected.id)}
     >
       <form>
-        <fieldset
-          className={classes.fieldset}
+        <Box
+          component="fieldset"
+          sx={{ p: 0, border: 0 }}
           aria-describedby={props.description ? DESCRIPTION_TEXT : ""}
         >
           <legend style={visuallyHidden}>{props.text}</legend>
@@ -81,10 +75,9 @@ const ButtonQuestion: React.FC<IQuestion> = (props) => {
             definitionImg={props.definitionImg}
             img={props.img}
           />
-          <Grid
+          <StyledGrid
             container
             spacing={layout === QuestionLayout.Descriptions ? 2 : 1}
-            className={classes.gridContainer}
           >
             {!props.text?.startsWith("Sorry") &&
               props.responses?.map((response) => {
@@ -129,8 +122,8 @@ const ButtonQuestion: React.FC<IQuestion> = (props) => {
                     );
                 }
               })}
-          </Grid>
-        </fieldset>
+          </StyledGrid>
+        </Box>
       </form>
     </Card>
   );