Remove old styling dependencies

package.json

@@ -10,7 +10,6 @@
     "@mui/icons-material": "^5.11.16",
     "@mui/lab": "^5.0.0-alpha.130",
     "@mui/material": "^5.13.1",
-    "@mui/styles": "^5.13.1",
     "@mui/x-charts": "^6.0.0-alpha.12",
     "@mui/x-date-pickers": "^6.8.0",
     "@testing-library/jest-dom": "^5.16.5",
@@ -29,7 +28,6 @@
     "redux": "^4.2.1",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.4.2",
-    "styled-components": "^6.0.0-rc.3",
     "web-vitals": "^2.1.4"
   },
   "overrides": {

src/components/DataSubmissions/RadioInput.tsx

@@ -1,59 +1,73 @@
-import React, { FC, useState, useRef, useEffect } from 'react';
-import { Grid, FormControl, FormControlLabel, Radio, RadioGroup, RadioProps, RadioGroupProps, FormHelperText, Stack } from '@mui/material';
-import styled from "styled-components";
-import { updateInputValidity } from '../../utils';
-
-const GridStyled = styled(Grid)<{ $containerWidth?: string; }>`
-  width: ${(props) => props.$containerWidth};
-  .formControl{
-    margin-top: 8px;
-    margin-bottom: 4px;
-  }
-  .css-hsm3ra-MuiFormLabel-root {
-    color: rgba(0, 0, 0, 0.6) !important;
-  }
-  .MuiRadio-root {
-    color: #1D91AB !important;
-    margin-left: 10px;
-    padding-right: 7px;
-  }
-  #invisibleRadioInput {
-    height: 0;
-    border: none;
-    width: 0;
-  }
-  .MuiFormHelperText-root {
-    color: #083A50;
-    margin-left: 0;
-  }
-  .MuiFormHelperText-root.Mui-error {
-    color: #D54309 !important;
-  }
-  .displayNone {
-    display: none !important;
-  }
-`;
-
-const BpIcon = styled('span')(() => ({
-  borderRadius: '50%',
+import React, { FC, useState, useRef, useEffect } from "react";
+import {
+  Grid,
+  FormControl,
+  FormControlLabel,
+  Radio,
+  RadioGroup,
+  RadioProps,
+  RadioGroupProps,
+  FormHelperText,
+  Stack,
+  styled,
+  GridProps,
+} from "@mui/material";
+import { updateInputValidity } from "../../utils";
+
+const GridStyled = styled(Grid, {
+  shouldForwardProp: (prop) => prop !== "containerWidth",
+})<GridProps & { containerWidth?: string }>(({ containerWidth }) => ({
+  width: containerWidth,
+  "& .formControl": {
+    marginTop: "8px",
+    marginBottom: "4px",
+  },
+  "& .css-hsm3ra-MuiFormLabel-root": {
+    color: "rgba(0, 0, 0, 0.6) !important",
+  },
+  "& .MuiRadio-root": {
+    color: "#1D91AB !important",
+    marginLeft: "10px",
+    paddingRight: "7px",
+  },
+  "& #invisibleRadioInput": {
+    height: 0,
+    border: "none",
+    width: 0,
+  },
+  "& .MuiFormHelperText-root": {
+    color: "#083A50",
+    marginLeft: 0,
+  },
+  "& .MuiFormHelperText-root.Mui-error": {
+    color: "#D54309 !important",
+  },
+  "& .displayNone": {
+    display: "none !important",
+  },
+}));
+
+const BpIcon = styled("span")(() => ({
+  borderRadius: "50%",
   width: 24,
   height: 24,
-  outline: '6px auto #1D91AB',
-  'input:hover ~ &': {
+  outline: "6px auto #1D91AB",
+  "input:hover ~ &": {
     outlineOffset: "2px",
   },
 }));
 
 const BpCheckedIcon = styled(BpIcon)({
-  backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
-  '&:before': {
+  backgroundImage:
+    "linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))",
+  "&:before": {
     borderRadius: "50%",
-    display: 'block',
+    display: "block",
     marginTop: "4px",
     marginLeft: "4px",
     width: 16,
     height: 16,
-    backgroundImage: 'radial-gradient(#1D91AB, #1D91AB)',
+    backgroundImage: "radial-gradient(#1D91AB, #1D91AB)",
     content: '""',
   },
 });
@@ -77,13 +91,13 @@ const StyledRadio = styled(Radio)((props) => ({
   },
   "& .radio-icon": {
     backgroundColor: props.readOnly ? "#D2DFE9 !important" : "initial",
-  }
+  },
 }));
 
 const StyledFormControlLabel = styled(FormControlLabel)(() => ({
   "&.MuiFormControlLabel-root": {
     paddingRight: "10px",
-    marginRight: "2px"
+    marginRight: "2px",
   },
   "& .MuiFormControlLabel-label": {
     color: "#083A50",
@@ -92,7 +106,7 @@ const StyledFormControlLabel = styled(FormControlLabel)(() => ({
     fontStyle: "normal",
     fontWeight: 500,
     lineHeight: "19.6px",
-  }
+  },
 }));
 
 // Inspired by blueprintjs
@@ -102,9 +116,11 @@ const BpRadio = (props: RadioProps) => (
     color="default"
     checkedIcon={<BpCheckedIcon className="radio-icon" />}
     icon={<BpIcon className="radio-icon" />}
-    inputProps={{
-        "data-type": "auto"
-      } as unknown}
+    inputProps={
+      {
+        "data-type": "auto",
+      } as unknown
+    }
     {...props}
   />
 );
@@ -143,7 +159,11 @@ const RadioYesNoInput: FC<Props> = ({
   readOnly,
   ...rest
 }) => {
-  const [val, setVal] = useState<string>((value?.toString() === "" || value?.toString() === undefined) ? null : value?.toString());
+  const [val, setVal] = useState<string>(
+    value?.toString() === "" || value?.toString() === undefined
+      ? null
+      : value?.toString()
+  );
   const [error, setError] = useState(false);
   const radioGroupInputRef = useRef<HTMLInputElement>(null);
 
@@ -178,9 +198,17 @@ const RadioYesNoInput: FC<Props> = ({
   }, [value]);
 
   return (
-    <GridStyled md={gridWidth || 6} xs={12} item $containerWidth={containerWidth}>
+    <GridStyled
+      md={gridWidth || 6}
+      xs={12}
+      item
+      containerWidth={containerWidth}
+    >
       <FormControl className="formControl" error={error}>
-        <Stack direction={inline ? "row" : "column"} alignItems={inline ? "center" : "initial"}>
+        <Stack
+          direction={inline ? "row" : "column"}
+          alignItems={inline ? "center" : "initial"}
+        >
           <StyledFormLabel>
             {label}
             {required ? <StyledAsterisk>*</StyledAsterisk> : ""}