From d792f835753b628e4785c92c437b8311b24086f8 Mon Sep 17 00:00:00 2001
From: eightrice <astmobronsita@gmail.com>
Date: Thu, 16 Jul 2026 12:55:12 +0300
Subject: [PATCH] refactor: remove adaptV4Theme, rewrite theme in native MUI v6
 syntax

The adaptV4Theme adapter copied v4 overrides verbatim into styleOverrides
without translating JSS selectors, so every v4 state selector (&$checked,
&$active, $checked$checked + &, state-class keys like active/completed)
has been dead CSS since the v6 migration. This rewrite:

- converts props -> components.MuiX.defaultProps and
  overrides -> components.MuiX.styleOverrides in theme/index.ts and
  theme/legacy.ts
- translates v4 JSS selectors to global class equivalents
  (&$disabled -> &.Mui-disabled etc.), resurrecting the intended styling
  (visible change: creator stepper active step regains its green fill)
- folds state-class keys (active/completed) into their slot as
  &.Mui-active / &.Mui-completed nested selectors
- retypes themeOptions as ThemeOptions (DeprecatedThemeOptions removed)

Verified: tsc clean, production build passes, before/after screenshots
of /explorer/daos, /creator/build and /lite are pixel-identical except
the intended stepper fix.
---
 src/theme/index.ts  | 454 +++++++++++++++++++++++++-------------------
 src/theme/legacy.ts | 349 +++++++++++++++++++---------------
 2 files changed, 449 insertions(+), 354 deletions(-)

diff --git a/src/theme/index.ts b/src/theme/index.ts
index b5c151fd..11ae5470 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -1,253 +1,276 @@
-import { createTheme, adaptV4Theme, DeprecatedThemeOptions } from "@mui/material/styles"
+import { createTheme, ThemeOptions } from "@mui/material/styles"
 const defaultTheme = createTheme()
 const { breakpoints } = defaultTheme
 
-export const theme = createTheme(
-  adaptV4Theme({
-    props: {
-      MuiButtonBase: {
-        disableRipple: true
-      },
-      // MUI v5+ changed the default TextField variant from "standard" to "outlined".
-      // This app's fields and theme overrides are all written for the standard
-      // (underline) variant, so restore it globally to avoid the stray outlined border.
-      MuiTextField: {
-        variant: "standard"
+export const theme = createTheme({
+  palette: {
+    mode: "dark",
+    primary: {
+      main: "#2F3438",
+      dark: "#1C1F23",
+      light: "#bfc5ca",
+      contrastText: "#24282d"
+    },
+    secondary: {
+      main: "#81FEB7",
+      dark: "#6AE9A720",
+      contrastText: "#1C1F23",
+      light: "#24282D"
+    },
+    text: {
+      primary: "#FDFDFD"
+    },
+    error: {
+      main: "#ED254E"
+    },
+    info: {
+      main: "#3866F9"
+    },
+    warning: {
+      main: "#FFC839"
+    }
+  },
+  typography: {
+    fontFamily: "Roboto Flex",
+    h1: {
+      fontSize: 30,
+      [breakpoints.down("xs")]: {
+        fontSize: 22
+      }
+    },
+    subtitle1: {
+      fontSize: 32,
+      [breakpoints.down("xs")]: {
+        fontSize: 26
+      }
+    },
+    subtitle2: {
+      fontSize: 16,
+      fontWeight: 300
+    },
+    h3: {
+      fontSize: 21,
+      fontWeight: 400
+    },
+    h2: {
+      fontSize: 24
+    },
+    h4: {
+      fontSize: 21,
+      [breakpoints.down("xs")]: {
+        fontSize: 16
+      }
+    },
+    h5: {
+      fontSize: 35,
+      [breakpoints.down("xs")]: {
+        fontSize: 21
       }
     },
-    palette: {
-      mode: "dark",
-      primary: {
-        main: "#2F3438",
-        dark: "#1C1F23",
-        light: "#bfc5ca",
-        contrastText: "#24282d"
-      },
-      secondary: {
-        main: "#81FEB7",
-        dark: "#6AE9A720",
-        contrastText: "#1C1F23",
-        light: "#24282D"
-      },
-      text: {
-        primary: "#FDFDFD"
-      },
-      error: {
-        main: "#ED254E"
-      },
-      info: {
-        main: "#3866F9"
-      },
-      warning: {
-        main: "#FFC839"
-      }
-    },
-    typography: {
-      fontFamily: "Roboto Flex",
-      h1: {
-        fontSize: 30,
-        [breakpoints.down("xs")]: {
-          fontSize: 22
-        }
-      },
-      subtitle1: {
-        fontSize: 32,
-        [breakpoints.down("xs")]: {
-          fontSize: 26
-        }
-      },
-      subtitle2: {
-        fontSize: 16,
-        fontWeight: 300
-      },
-      h3: {
-        fontSize: 21,
-        fontWeight: 400
-      },
-      h2: {
-        fontSize: 24
-      },
-      h4: {
-        fontSize: 21,
-        [breakpoints.down("xs")]: {
-          fontSize: 16
-        }
-      },
-      h5: {
-        fontSize: 35,
-        [breakpoints.down("xs")]: {
-          fontSize: 21
-        }
-      },
-      body1: {
-        fontSize: 18,
-        [breakpoints.down("xs")]: {
-          fontSize: 16
-        }
-      },
-      body2: {
-        fontSize: 16,
-        [breakpoints.down("xs")]: {
-          fontSize: 14
-        }
-      },
-      h6: {
+    body1: {
+      fontSize: 18,
+      [breakpoints.down("xs")]: {
+        fontSize: 16
+      }
+    },
+    body2: {
+      fontSize: 16,
+      [breakpoints.down("xs")]: {
         fontSize: 14
       }
     },
-    overrides: {
-      MuiSvgIcon: {
+    h6: {
+      fontSize: 14
+    }
+  },
+  components: {
+    MuiButtonBase: {
+      defaultProps: {
+        disableRipple: true
+      }
+    },
+    // MUI v5+ changed the default TextField variant from "standard" to "outlined".
+    // This app's fields and theme overrides are all written for the standard
+    // (underline) variant, so restore it globally to avoid the stray outlined border.
+    MuiTextField: {
+      defaultProps: {
+        variant: "standard"
+      }
+    },
+    MuiSvgIcon: {
+      styleOverrides: {
         root: {
           color: "#fff"
         },
         colorSecondary: {
           color: "#81FEB7 !important"
         }
-      },
-      MuiTypography: {
+      }
+    },
+    MuiTypography: {
+      styleOverrides: {
         root: {
           letterSpacing: "-0.03em !important"
         }
-      },
-      MuiMenu: {
+      }
+    },
+    MuiMenu: {
+      styleOverrides: {
         paper: {
           backgroundColor: "#2f3438",
           zIndex: 1000002,
           pointerEvents: "auto"
         }
-      },
-      MuiMenuItem: {
+      }
+    },
+    MuiMenuItem: {
+      styleOverrides: {
         root: {
           pointerEvents: "auto"
         }
-      },
-      MuiListItem: {
+      }
+    },
+    MuiListItem: {
+      styleOverrides: {
         root: {
           pointerEvents: "auto"
         }
-      },
-      MuiSlider: {
+      }
+    },
+    MuiSlider: {
+      styleOverrides: {
         root: {
           color: "#3D3D3D"
         }
-      },
-      MuiTab: {
+      }
+    },
+    MuiTab: {
+      styleOverrides: {
         root: {
           maxWidth: "100%"
         }
-      },
-      MuiTooltip: {
+      }
+    },
+    MuiTooltip: {
+      styleOverrides: {
         tooltip: {
           backgroundColor: "#62eda5",
           fontSize: 14,
           padding: "10px 15px",
           color: "#1C1F23"
         }
-      },
-      MuiStepLabel: {
+      }
+    },
+    MuiStepLabel: {
+      styleOverrides: {
         label: {
           "cursor": "pointer",
           "color": "#FDFDFD",
           "opacity": 0.5,
           "marginLeft": 15,
           "lineHeight": "40px",
-          "&$completed": {
+          "&.Mui-completed": {
             fontWeight: 300
           },
-          "&$active": {
+          "&.Mui-active": {
+            color: "#FDFDFD !important",
+            opacity: 1,
             fontWeight: 300
           },
           "& .MuiStepLabel-completed": {
             fontWeight: 300
           }
-        },
-        active: {
-          color: "#FDFDFD !important",
-          opacity: 1
-        },
-        completed: {
-          color: "#FDFDFD !important",
-          opacity: 0.5,
-          fontWeight: 300
         }
-      },
-      MuiStepConnector: {
+      }
+    },
+    MuiStepConnector: {
+      styleOverrides: {
         lineVertical: {
           display: "none"
         }
-      },
-      MuiStepContent: {
+      }
+    },
+    MuiStepContent: {
+      styleOverrides: {
         root: {
           borderLeft: "none"
         }
-      },
-      MuiStep: {
+      }
+    },
+    MuiStep: {
+      styleOverrides: {
         root: {
           marginBottom: 15
         }
-      },
-      MuiStepIcon: {
-        active: {
-          color: "#1C1F23 !important"
-        },
-        completed: {
-          color: "#FDFDFD !important"
-        },
+      }
+    },
+    MuiStepIcon: {
+      styleOverrides: {
         root: {
           "height": 32,
           "width": 32,
           "color": "#1C1F23",
           "border": "1px solid #3D3D3D",
           "borderRadius": "50%",
-          "&$active": {
+          "&.Mui-active": {
+            "color": "#1C1F23 !important",
             "fill": "#FDFDFD",
             "border": "1px solid #3D3D3D",
             "borderRadius": "50%",
-            "& $text": {
+            "& .MuiStepIcon-text": {
               fill: "#1C1F23",
               border: "1px solid #3D3D3D"
             }
+          },
+          "&.Mui-completed": {
+            color: "#FDFDFD !important"
           }
         },
         text: {
           fill: "#FDFDFD"
         }
-      },
-      MuiIconButton: {
+      }
+    },
+    MuiIconButton: {
+      styleOverrides: {
         colorSecondary: {
           "&:hover": {
             background: "inherit !important"
           }
         }
-      },
-      MuiInput: {
+      }
+    },
+    MuiInput: {
+      styleOverrides: {
         underline: {
           "&:after": {
             borderBottom: "none"
           },
-          "&$focused:after": {
+          "&.Mui-focused:after": {
             borderBottom: "none"
           },
-          "&$error:after": {
+          "&.Mui-error:after": {
             borderBottom: "none"
           },
           "&:before": {
             borderBottom: "none",
             transition: "none"
           },
-          "&:hover:not($disabled):not($focused):not($error):before": {
+          "&:hover:not(.Mui-disabled):not(.Mui-focused):not(.Mui-error):before": {
             borderBottom: "none"
           },
-          "&$disabled:before": {
+          "&.Mui-disabled:before": {
             borderBottom: "none"
           },
-          "&:active:not($disabled):not($focused):not($error):before": {
+          "&:active:not(.Mui-disabled):not(.Mui-focused):not(.Mui-error):before": {
             borderBottom: "none"
           }
         }
-      },
+      }
+    },
 
-      MuiButton: {
+    MuiButton: {
+      styleOverrides: {
         root: {
           "textTransform": "capitalize",
           "fontWeight": 500,
@@ -260,13 +283,13 @@ export const theme = createTheme(
             boxShadow: "none"
           },
 
-          "&$disabled": {
+          "&.Mui-disabled": {
             color: "#2F3438 !important",
             background: "#41484d !important"
           }
         },
         outlined: {
-          "&$disabled": {
+          "&.Mui-disabled": {
             border: "2px solid #3d3d3d"
           },
           "borderWidth": "2px !important",
@@ -274,10 +297,9 @@ export const theme = createTheme(
           "padding": "1px 8px",
           "fontSize": "1rem"
         },
-        disabled: {},
         text: {
           "color": "#81FEB7",
-          "&$disabled": {
+          "&.Mui-disabled": {
             color: "#bfc5ca !important",
             background: "inherit !important"
           }
@@ -285,25 +307,33 @@ export const theme = createTheme(
         containedSecondary: {
           backgroundColor: "#4ed092"
         }
-      },
-      MuiInputBase: {
+      }
+    },
+    MuiInputBase: {
+      styleOverrides: {
         input: {
           textAlign: "center",
           color: "#FDFDFD"
         }
-      },
-      MuiRadio: {
+      }
+    },
+    MuiRadio: {
+      styleOverrides: {
         root: {
           color: "#FDFDFD"
         }
-      },
-      MuiDivider: {
+      }
+    },
+    MuiDivider: {
+      styleOverrides: {
         root: {
           marginTop: 16,
           marginBottom: 16
         }
-      },
-      MuiDialog: {
+      }
+    },
+    MuiDialog: {
+      styleOverrides: {
         paper: {
           background: "#1C1F23",
           width: 615,
@@ -316,21 +346,27 @@ export const theme = createTheme(
           maxWidth: 615,
           height: "auto"
         }
-      },
-      MuiFormControl: {
+      }
+    },
+    MuiFormControl: {
+      styleOverrides: {
         root: {
           width: "100%"
         }
-      },
-      MuiDialogContent: {
+      }
+    },
+    MuiDialogContent: {
+      styleOverrides: {
         root: {
           "padding": "42px 54px",
           "&:first-child": {
             paddingTop: "42px"
           }
         }
-      },
-      MuiSelect: {
+      }
+    },
+    MuiSelect: {
+      styleOverrides: {
         select: {
           textAlign: "right",
           textTransform: "capitalize"
@@ -338,13 +374,17 @@ export const theme = createTheme(
         icon: {
           color: "#FDFDFD"
         }
-      },
-      MuiDialogContentText: {
+      }
+    },
+    MuiDialogContentText: {
+      styleOverrides: {
         root: {
           marginBottom: 0
         }
-      },
-      MuiSwitch: {
+      }
+    },
+    MuiSwitch: {
+      styleOverrides: {
         root: {
           width: 75,
           height: 50
@@ -353,7 +393,7 @@ export const theme = createTheme(
           "color": "red",
           "top": 8,
           "left": 8,
-          "$checked$checked + &": {
+          ".Mui-checked.Mui-checked + &": {
             opacity: 1,
             backgroundColor: "#1C1F23",
             color: "#81FEB7"
@@ -364,7 +404,7 @@ export const theme = createTheme(
           "backgroundColor": "inherit",
           "border": "1px solid #FDFDFD",
           "opacity": 0.5,
-          "$checked$checked + &": {
+          ".Mui-checked.Mui-checked + &": {
             opacity: 1,
             backgroundColor: "#1C1F23",
             color: "#81FEB7",
@@ -374,33 +414,39 @@ export const theme = createTheme(
         thumb: {
           "width": 18,
           "height": 18,
-          "$checked$checked + &": {
+          ".Mui-checked.Mui-checked + &": {
             color: "#81FEB7"
           }
         },
         colorSecondary: {
           "color": "#FDFDFD",
-          "$checked$checked + &": {
+          ".Mui-checked.Mui-checked + &": {
             color: "#81FEB7"
           },
           "& .Mui-checked": {
             color: "#81FEB7"
           }
         }
-      },
-      MuiFormHelperText: {
+      }
+    },
+    MuiFormHelperText: {
+      styleOverrides: {
         root: {
           display: "none"
         }
-      },
-      MuiTable: {
+      }
+    },
+    MuiTable: {
+      styleOverrides: {
         root: {
           borderRadius: "8px",
           backgroundColor: "#2F3438",
           overflow: "hidden"
         }
-      },
-      MuiTableHead: {
+      }
+    },
+    MuiTableHead: {
+      styleOverrides: {
         root: {
           minHeight: 58,
           fontSize: 16,
@@ -408,8 +454,10 @@ export const theme = createTheme(
           letterSpacing: "-0.01em",
           color: "#FFFFFF"
         }
-      },
-      MuiTableFooter: {
+      }
+    },
+    MuiTableFooter: {
+      styleOverrides: {
         root: {
           minHeight: 60,
           fontSize: 16,
@@ -418,16 +466,20 @@ export const theme = createTheme(
           color: "##81FEB7",
           borderTop: "0.3px solid rgba(125,140,139, 0.2)"
         }
-      },
-      MuiTableBody: {
+      }
+    },
+    MuiTableBody: {
+      styleOverrides: {
         root: {
           "& > *:not(:last-child)": {
             borderBottom: "0.3px solid #575757",
             minHeight: 90
           }
         }
-      },
-      MuiTableCell: {
+      }
+    },
+    MuiTableCell: {
+      styleOverrides: {
         root: {
           borderBottom: "unset"
         },
@@ -437,8 +489,10 @@ export const theme = createTheme(
         body: {
           fontWeight: 300
         }
-      },
-      MuiTableRow: {
+      }
+    },
+    MuiTableRow: {
+      styleOverrides: {
         root: {
           "height": 70,
           "& th:first-child, & td:first-child": {
@@ -459,16 +513,20 @@ export const theme = createTheme(
           backgroundColor: "#383E43 !important",
           borderBottom: "0.3px solid #575757"
         }
-      },
-      MuiLink: {
+      }
+    },
+    MuiLink: {
+      styleOverrides: {
         underlineHover: {
           "&:hover": {
             textUnderlineOffset: "4px",
             textDecorationColor: "#fdfdfd"
           }
         }
-      },
-      MuiLinearProgress: {
+      }
+    },
+    MuiLinearProgress: {
+      styleOverrides: {
         root: {
           borderRadius: 50,
           background: "rgba(125,140,139, 0.2) !important"
@@ -476,13 +534,17 @@ export const theme = createTheme(
         barColorPrimary: {
           backgroundColor: "#3866f9"
         }
-      },
-      MuiPaper: {
+      }
+    },
+    MuiPaper: {
+      styleOverrides: {
         rounded: {
           borderRadius: "8px"
         }
-      },
-      MuiAccordionSummary: {
+      }
+    },
+    MuiAccordionSummary: {
+      styleOverrides: {
         root: {
           "minHeight": 91,
           "& .Mui-expanded": {
@@ -493,8 +555,8 @@ export const theme = createTheme(
         }
       }
     }
-  })
-)
+  }
+})
 
 declare module "@mui/material/styles" {
   interface BreakpointOverrides {
@@ -503,7 +565,7 @@ declare module "@mui/material/styles" {
   }
 }
 
-export const themeOptions: DeprecatedThemeOptions = {
+export const themeOptions: ThemeOptions = {
   breakpoints: {
     values: {
       xs: 0,
diff --git a/src/theme/legacy.ts b/src/theme/legacy.ts
index 2acffcb0..040710e6 100644
--- a/src/theme/legacy.ts
+++ b/src/theme/legacy.ts
@@ -1,101 +1,109 @@
-import { createTheme, adaptV4Theme } from "@mui/material/styles"
-export const legacyTheme = createTheme(
-  adaptV4Theme({
-    palette: {
-      primary: {
-        main: "#1C1F23",
-        light: "#3D3D3D",
-        dark: "#2F3438"
-      },
-      secondary: {
-        main: "#81FEB7",
-        light: "#81FEB7",
-        dark: "#BFC5CA"
-      },
-      text: {
-        primary: "#000000",
-        secondary: "#FDFDFD"
-      },
-      error: {
-        main: "#ED254E"
-      },
-      info: {
-        main: "#3866F9"
-      },
-      warning: {
-        main: "#FFC839"
-      }
+import { createTheme } from "@mui/material/styles"
+export const legacyTheme = createTheme({
+  palette: {
+    primary: {
+      main: "#1C1F23",
+      light: "#3D3D3D",
+      dark: "#2F3438"
     },
-    typography: {
-      fontFamily: "Roboto Flex",
-      h1: {
-        fontSize: 35,
-        letterSpacing: "-0.01em"
-      },
-      subtitle1: {
-        fontSize: 18,
-        fontWeight: 300,
-        lineHeight: "26.33px",
-        letterSpacing: "-0.01em"
-      },
-      subtitle2: {
-        fontSize: 16,
-        fontWeight: 300,
-        lineHeight: "26.33px",
-        letterSpacing: "-0.01em"
-      },
-      h3: {
-        fontSize: 32,
-        fontWeight: 600,
-        fontFamily: "Roboto Flex"
-      },
-      h2: {
-        color: "#000000",
-        fontSize: 25,
-        fontWeight: 500
-      },
-      h4: {
-        fontSize: 24,
-        fontWeight: 600
-      },
-      h5: {
-        fontSize: 35
-      },
-      body1: {
-        fontSize: 16
-      },
-      body2: {
-        fontSize: 16,
-        fontWeight: 300,
-        lineHeight: "413.4%",
-        opacity: 0.8
-      }
+    secondary: {
+      main: "#81FEB7",
+      light: "#81FEB7",
+      dark: "#BFC5CA"
+    },
+    text: {
+      primary: "#000000",
+      secondary: "#FDFDFD"
+    },
+    error: {
+      main: "#ED254E"
+    },
+    info: {
+      main: "#3866F9"
+    },
+    warning: {
+      main: "#FFC839"
+    }
+  },
+  typography: {
+    fontFamily: "Roboto Flex",
+    h1: {
+      fontSize: 35,
+      letterSpacing: "-0.01em"
+    },
+    subtitle1: {
+      fontSize: 18,
+      fontWeight: 300,
+      lineHeight: "26.33px",
+      letterSpacing: "-0.01em"
+    },
+    subtitle2: {
+      fontSize: 16,
+      fontWeight: 300,
+      lineHeight: "26.33px",
+      letterSpacing: "-0.01em"
     },
-    overrides: {
-      MuiLinearProgress: {
+    h3: {
+      fontSize: 32,
+      fontWeight: 600,
+      fontFamily: "Roboto Flex"
+    },
+    h2: {
+      color: "#000000",
+      fontSize: 25,
+      fontWeight: 500
+    },
+    h4: {
+      fontSize: 24,
+      fontWeight: 600
+    },
+    h5: {
+      fontSize: 35
+    },
+    body1: {
+      fontSize: 16
+    },
+    body2: {
+      fontSize: 16,
+      fontWeight: 300,
+      lineHeight: "413.4%",
+      opacity: 0.8
+    }
+  },
+  components: {
+    MuiLinearProgress: {
+      styleOverrides: {
         colorSecondary: {
           borderRadius: 8,
           height: 8
         }
-      },
-      MuiSlider: {
+      }
+    },
+    MuiSlider: {
+      styleOverrides: {
         root: {
           color: "#3D3D3D"
         }
-      },
-      MuiTab: {
+      }
+    },
+    MuiTab: {
+      styleOverrides: {
         root: {
           maxWidth: "100%"
         }
-      },
-      MuiTooltip: {
+      }
+    },
+    MuiTooltip: {
+      styleOverrides: {
         tooltip: {
           backgroundColor: "#4BCF93",
           fontSize: 14,
           padding: "10px 15px"
         }
-      },
-      MuiStepLabel: {
+      }
+    },
+    MuiStepLabel: {
+      styleOverrides: {
         root: {
           marginTop: -3
         },
@@ -108,27 +116,22 @@ export const legacyTheme = createTheme(
           "height": 40,
           "display": "flex",
           "alignItems": "center",
-          "&$completed": {
+          "&.Mui-completed": {
             fontWeight: 300
           },
-          "&$active": {
+          "&.Mui-active": {
+            color: "#FDFDFD !important",
+            opacity: 1,
             fontWeight: 300
           },
           "& .MuiStepLabel-completed": {
             fontWeight: 300
           }
-        },
-        active: {
-          color: "#FDFDFD !important",
-          opacity: 1
-        },
-        completed: {
-          color: "#FDFDFD !important",
-          opacity: 0.5,
-          fontWeight: 300
         }
-      },
-      MuiStepConnector: {
+      }
+    },
+    MuiStepConnector: {
+      styleOverrides: {
         vertical: {
           padding: "0px",
           marginLeft: 17,
@@ -143,52 +146,56 @@ export const legacyTheme = createTheme(
           borderColor: "#FDFDFD",
           opacity: 0.2
         },
-        active: {
-          "& span": {
-            borderLeftColor: "#81feb7",
-            opacity: 1
-          }
-        },
-        completed: {
-          "& span": {
-            borderLeftColor: "#81feb7",
-            opacity: 1
+        root: {
+          "&.Mui-active": {
+            "& span": {
+              borderLeftColor: "#81feb7",
+              opacity: 1
+            }
+          },
+          "&.Mui-completed": {
+            "& span": {
+              borderLeftColor: "#81feb7",
+              opacity: 1
+            }
           }
         }
-      },
-      MuiStepContent: {
+      }
+    },
+    MuiStepContent: {
+      styleOverrides: {
         root: {
           borderLeft: "none"
         }
-      },
-      MuiStep: {
+      }
+    },
+    MuiStep: {
+      styleOverrides: {
         root: {
           marginBottom: 15
         }
-      },
-      MuiStepIcon: {
-        active: {
-          color: "#1C1F23 !important"
-        },
-        completed: {
-          color: "#FDFDFD !important"
-        },
+      }
+    },
+    MuiStepIcon: {
+      styleOverrides: {
         root: {
           "height": 32,
           "width": 32,
           "color": "#2f3438",
           "border": "3px solid rgba(255, 255, 255, 0.2)",
           "borderRadius": "50%",
-          "&$active": {
+          "&.Mui-active": {
+            "color": "#1C1F23 !important",
             "fill": "#81feb7",
             "border": "3px solid #81feb7",
             "borderRadius": "50%",
-            "& $text": {
+            "& .MuiStepIcon-text": {
               fill: "#1C1F23",
               border: "1px solid #2f3438"
             }
           },
-          "&$completed": {
+          "&.Mui-completed": {
+            color: "#FDFDFD !important",
             fill: "#81feb7",
             border: "3px solid #81feb7"
           }
@@ -196,45 +203,51 @@ export const legacyTheme = createTheme(
         text: {
           fill: "#FDFDFD"
         }
-      },
-      MuiInput: {
+      }
+    },
+    MuiInput: {
+      styleOverrides: {
         underline: {
           "&:after": {
             borderBottom: "none"
           },
-          "&$focused:after": {
+          "&.Mui-focused:after": {
             borderBottom: "none"
           },
-          "&$error:after": {
+          "&.Mui-error:after": {
             borderBottom: "none"
           },
           "&:before": {
             borderBottom: "none"
           },
-          "&:hover:not($disabled):not($focused):not($error):before": {
+          "&:hover:not(.Mui-disabled):not(.Mui-focused):not(.Mui-error):before": {
             borderBottom: "none"
           },
-          "&$disabled:before": {
+          "&.Mui-disabled:before": {
             borderBottom: "none"
           },
-          "&:active:not($disabled):not($focused):not($error):before": {
+          "&:active:not(.Mui-disabled):not(.Mui-focused):not(.Mui-error):before": {
             borderBottom: "none"
           }
         }
-      },
-      MuiInputAdornment: {
+      }
+    },
+    MuiInputAdornment: {
+      styleOverrides: {
         positionStart: {
           marginLeft: 8
         }
-      },
-      MuiButton: {
+      }
+    },
+    MuiButton: {
+      styleOverrides: {
         root: {
-          "&$disabled": {
+          "&.Mui-disabled": {
             color: "#3d3d3d"
           }
         },
         outlined: {
-          "&$disabled": {
+          "&.Mui-disabled": {
             border: "2px solid #3d3d3d"
           },
           "borderWidth": "2px !important",
@@ -242,8 +255,10 @@ export const legacyTheme = createTheme(
           "padding": "1px 8px",
           "fontSize": "1rem"
         }
-      },
-      MuiInputBase: {
+      }
+    },
+    MuiInputBase: {
+      styleOverrides: {
         input: {
           textAlign: "start",
           color: "#FDFDFD"
@@ -251,14 +266,18 @@ export const legacyTheme = createTheme(
         root: {
           fontWeight: 300
         }
-      },
-      MuiDivider: {
+      }
+    },
+    MuiDivider: {
+      styleOverrides: {
         root: {
           marginTop: 16,
           marginBottom: 16
         }
-      },
-      MuiDialog: {
+      }
+    },
+    MuiDialog: {
+      styleOverrides: {
         paper: {
           background: "#1C1F23",
           width: 570,
@@ -272,28 +291,38 @@ export const legacyTheme = createTheme(
           minHeight: 600,
           height: "auto"
         }
-      },
-      MuiFormControl: {
+      }
+    },
+    MuiFormControl: {
+      styleOverrides: {
         root: {
           width: "100%"
         }
-      },
-      MuiDialogContent: {
+      }
+    },
+    MuiDialogContent: {
+      styleOverrides: {
         root: {
           padding: 0
         }
-      },
-      MuiSelect: {
+      }
+    },
+    MuiSelect: {
+      styleOverrides: {
         select: {
           textAlign: "right"
         }
-      },
-      MuiDialogContentText: {
+      }
+    },
+    MuiDialogContentText: {
+      styleOverrides: {
         root: {
           marginBottom: 0
         }
-      },
-      MuiSwitch: {
+      }
+    },
+    MuiSwitch: {
+      styleOverrides: {
         root: {
           width: 75,
           height: 50
@@ -302,7 +331,7 @@ export const legacyTheme = createTheme(
           "color": "red",
           "top": 8,
           "left": 8,
-          "$checked$checked + &": {
+          ".Mui-checked.Mui-checked + &": {
             opacity: 1,
             backgroundColor: "#1C1F23",
             color: "#81FEB7"
@@ -313,7 +342,7 @@ export const legacyTheme = createTheme(
           "backgroundColor": "inherit",
           "border": "1px solid #FDFDFD",
           "opacity": 0.5,
-          "$checked$checked + &": {
+          ".Mui-checked.Mui-checked + &": {
             opacity: 1,
             backgroundColor: "#1C1F23",
             color: "#81FEB7"
@@ -322,26 +351,30 @@ export const legacyTheme = createTheme(
         thumb: {
           "width": 18,
           "height": 18,
-          "$checked$checked + &": {
+          ".Mui-checked.Mui-checked + &": {
             color: "#81FEB7"
           }
         },
         colorSecondary: {
           "color": "#FDFDFD",
-          "$checked$checked + &": {
+          ".Mui-checked.Mui-checked + &": {
             color: "#81FEB7"
           },
           "& .Mui-checked": {
             color: "#81FEB7"
           }
         }
-      },
-      MuiFormHelperText: {
+      }
+    },
+    MuiFormHelperText: {
+      styleOverrides: {
         root: {
           display: "none"
         }
-      },
-      MuiAccordionSummary: {
+      }
+    },
+    MuiAccordionSummary: {
+      styleOverrides: {
         root: {
           "& .Mui-expanded": {
             minHeight: 91
@@ -349,5 +382,5 @@ export const legacyTheme = createTheme(
         }
       }
     }
-  })
-)
+  }
+})