Feature/mui 6 and pigment css

frontend/.eslintrc.cjs

@@ -33,6 +33,8 @@ module.exports = {
     "react-hooks/rules-of-hooks": ERROR,
     eqeqeq: ERROR,
     "@typescript-eslint/array-type": [WARNING, { default: "array-simple" }],
+    // With Pigment CSS, the SX property is now available on html elements
+    "react/no-unknown-property": ["error", { ignore: ["sx"] }],
     // "sort-keys": WARNING,
   },
   settings: {
@@ -43,7 +45,7 @@ module.exports = {
   parserOptions: {
     ecmaVersion: "latest",
     sourceType: "module",
-    project: ["./tsconfig.eslint.json"],
+    project: ["./tsconfig.eslint.json", "./src/material-ui-pigment-css.d.ts"],
     tsconfigRootDir: __dirname,
   },
 };

frontend/package.json

@@ -14,10 +14,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
-    "@mui/icons-material": "5.15.21",
-    "@mui/material": "^5.15.21",
+    "@mui/icons-material": "^6.1.0",
+    "@mui/material": "^6.1.0",
+    "@mui/material-pigment-css": "^6.1.0",
     "axios": "^1.7.4",
     "classnames": "^2.5.1",
     "dayjs": "^1.11.11",
@@ -37,6 +36,7 @@
     "zustand": "^4.5.4"
   },
   "devDependencies": {
+    "@pigment-css/vite-plugin": "^0.0.23",
     "@types/classnames": "^2.3.1",
     "@types/node": "^20.14.9",
     "@types/qs": "^6.9.15",

frontend/src/app/components/accordion/Accordion.tsx

@@ -1,19 +1,15 @@
-import {
-  AccordionProps,
-  Accordion as MuiAccordion,
-  styled,
-} from "@mui/material";
-import style from "@styles/style.module.scss";
+import { AccordionProps, Accordion as MuiAccordion } from "@mui/material";
+import { styled } from "@mui/material-pigment-css";
 
-const StyledMuiAccordion = styled(MuiAccordion)({
-  border: `1px solid ${style["stone-veryLight"]}`,
+const StyledMuiAccordion = styled(MuiAccordion)(({ theme }) => ({
+  border: `1px solid ${theme.palette.grey[300]}`,
   "&:not(:last-child)": {
     borderBottom: 0,
   },
   "&::before": {
     display: "none",
   },
-});
+}));
 
 export default function Accordion({ children, ...props }: AccordionProps) {
   return (

frontend/src/app/components/accordionSummary/AccordionSummary.tsx

@@ -2,20 +2,19 @@ import CaretIcon from "@icons/CaretIcon";
 import {
   AccordionSummaryProps,
   AccordionSummary as MuiAccordionSummary,
-  styled,
 } from "@mui/material";
-import style from "@styles/style.module.scss";
+import { styled } from "@mui/material-pigment-css";
 
-const StyledMuiAccordionSummary = styled(MuiAccordionSummary)({
+const StyledMuiAccordionSummary = styled(MuiAccordionSummary)(({ theme }) => ({
   flexDirection: "row-reverse",
   "& .MuiAccordionSummary-expandIconWrapper.Mui-expanded": {
     transform: "rotate(90deg)",
   },
   "& .MuiAccordionSummary-content": {
-    marginLeft: style["spacing-md"],
+    marginLeft: theme.spacing(1),
     alignItems: "center",
   },
-});
+}));
 
 export default function AccordionSummary({
   children,

frontend/src/app/components/button/Button.tsx

@@ -1,10 +1,9 @@
-import { ButtonProps, Button as MuiButton, styled } from "@mui/material";
-import style from "@styles/style.module.scss";
-
-const StyledMuiButton = styled(MuiButton)({
-  borderRadius: style["border-radius-xs"],
-});
+import { ButtonProps, Button as MuiButton } from "@mui/material";
+import { styled } from "@mui/material-pigment-css";
 
+const StyledMuiButton = styled(MuiButton)(({ theme }) => ({
+  borderRadius: theme.customProperties.borderRadius.xs,
+}));
 interface IButton extends ButtonProps {
   target?: string;
 }

frontend/src/app/components/dialog/Dialog.tsx

@@ -1,12 +1,12 @@
 import Slide from "@components/slide/Slide";
-import { DialogProps, Dialog as MuiDialog, styled } from "@mui/material";
-import style from "@styles/style.module.scss";
+import { DialogProps, Dialog as MuiDialog } from "@mui/material";
+import { styled } from "@mui/material-pigment-css";
 
-const StyledMuiDialog = styled(MuiDialog)({
+const StyledMuiDialog = styled(MuiDialog)(({ theme }) => ({
   "& .MuiDialog-paper": {
-    margin: style["spacing-md"],
+    margin: theme.spacing(2),
   },
-});
+}));
 
 export default function Dialog({ ...props }: DialogProps) {
   return (

frontend/src/app/components/errorHelperText/ErrorHelperText.tsx

@@ -1,7 +1,7 @@
-import Typography from "@components/typography/Typography";
+import Typography from "@mui/material/Typography";
 import { RefObject, useEffect, useRef, useState } from "react";
 import { CSSTransition, TransitionGroup } from "react-transition-group";
-import "./error-helper-text.scss";
+import classes from "./error-helper-text.module.css";
 
 interface IErrorBox {
   message: string;
@@ -21,16 +21,23 @@ export default function ErrorHelperText({ message }: IErrorBox) {
       {activeMessage && (
         <CSSTransition
           classNames={{
-            enter: "error-helper-text__enter",
-            enterActive: "error-helper-text__enter-active",
-            exit: "error-helper-text__exit",
-            exitActive: "error-helper-text__exit-active",
+            enter: classes["enter"],
+            enterActive: classes["enter-active"],
+            exit: classes["exit"],
+            exitActive: classes["exit-active"],
           }}
           timeout={350}
           nodeRef={nodeRef}
         >
-          <div ref={nodeRef} className="error-helper-text__container">
-            <Typography.Caption>{activeMessage}</Typography.Caption>
+          <div
+            ref={nodeRef}
+            sx={(theme) => ({
+              marginTop: theme.spacing(0),
+              marginLeft: theme.spacing(1),
+              color: theme.palette.error.main,
+            })}
+          >
+            <Typography variant={"caption"}>{activeMessage}</Typography>
           </div>
         </CSSTransition>
       )}

frontend/src/app/components/errorHelperText/error-helper-text.module.css

@@ -0,0 +1,21 @@
+.enter {
+  opacity: 0;
+}
+
+.enter-active {
+  opacity: 1;
+  /* 
+    The time here is found in the theme.customProperties.time property.
+    Ideally we should be getting this value dynamically, from the theme.
+   */
+  transition: opacity 0.35s ease-in;
+}
+
+.exit {
+  opacity: 1;
+}
+
+.exit-active {
+  opacity: 0;
+  transition: opacity 0.35s ease-out;
+}

frontend/src/app/components/fieldHelperText/FieldHelperText.tsx

@@ -1,5 +1,5 @@
 import ErrorHelperText from "@components/errorHelperText/ErrorHelperText";
-import Typography from "@components/typography/Typography";
+import Typography from "@mui/material/Typography";
 import { useTranslation } from "react-i18next";
 import { ValidationError } from "yup";
 
@@ -44,8 +44,8 @@ export default function FieldHelperText({
   }
 
   return (
-    <Typography.Caption className="mt-xxs ml-md">
+    <Typography variant="caption" className="mt-xxs ml-md">
       {helperText}
-    </Typography.Caption>
+    </Typography>
   );
 }

frontend/src/app/components/layout/Layout.tsx

@@ -1,25 +1,74 @@
-import classnames from "classnames";
 import { ReactNode } from "react";
-import "./layout.scss";
+import { styled } from "@mui/material-pigment-css";
 
 interface ILayout {
   children: ReactNode;
   className?: string;
 }
 
+const LayoutContainer = styled("main")(({ theme }) => ({
+  width: "100%",
+  display: "flex",
+  flexDirection: "column",
+  flexGrow: 1,
+  padding: theme.spacing(2),
+  alignItems: "center",
+  backgroundColor: "#fafafb", // TODO: get this from theme
+
+  [theme.breakpoints.up("md")]: {
+    padding: theme.spacing(4),
+  },
+
+  [theme.breakpoints.up("lg")]: {
+    padding: theme.spacing(6),
+  },
+
+  [theme.breakpoints.up("xl")]: {
+    padding: theme.spacing(8),
+  },
+
+  "> .content": {
+    maxWidth: "82.5rem",
+    width: "100%",
+  },
+}));
+
 function Container({ children, className }: ILayout) {
   return (
-    <main className={classnames("layout__container", className)}>
-      <div className="layout__container-content">{children}</div>
-    </main>
+    <LayoutContainer className={className}>
+      <div className="content">{children}</div>
+    </LayoutContainer>
   );
 }
 
+const LayoutAuth = styled("main")(({ theme }) => ({
+  width: "100%",
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+  backgroundColor: "#fafafb", // TODO: get this from theme
+
+  [theme.breakpoints.up("xs")]: {
+    flex: "1 1 auto",
+  },
+
+  "> .content": {
+    maxWidth: "82.5rem",
+    width: "100%",
+
+    [theme.breakpoints.up("xs")]: {
+      maxWidth: 442,
+      padding: theme.spacing(2),
+    },
+  },
+}));
+
 function Auth({ children, className }: ILayout) {
   return (
-    <main className={classnames("layout__auth", className)}>
-      <div className="layout__auth-content">{children}</div>
-    </main>
+    <LayoutAuth className={className}>
+      <div className="content">{children}</div>
+    </LayoutAuth>
   );
 }
 

frontend/src/app/components/link/Link.tsx

@@ -1,13 +1,13 @@
 import ExternalLinkOutlined from "@icons/ExternalLinkOutlined";
-import { LinkProps, Link as MuiLink, styled } from "@mui/material";
-import style from "@styles/style.module.scss";
+import { LinkProps, Link as MuiLink } from "@mui/material";
+import { styled } from "@mui/material-pigment-css";
 
-const StyledMuiLink = styled(MuiLink)({
+const StyledMuiLink = styled(MuiLink)(({ theme }) => ({
   display: "flex",
-  color: style["primary-main"],
+  color: theme.palette.primary.main,
   textDecorationColor: "unset",
   cursor: "pointer",
-});
+}));
 
 interface ILink extends LinkProps {
   external?: boolean;