fix: no LoadingButton

Author: Holybasil

src/components/LoadingButton/index.tsx

@@ -1,12 +1,28 @@
 import { makeStyles } from "tss-react/mui"
 
 import { Button, CircularProgress, Stack } from "@mui/material"
+import { lighten } from "@mui/material/styles"
 
 const useStyles = makeStyles()(theme => ({
   loadingIndicator: {
     color: theme.vars.palette.primary.contrastText,
     width: "max-content",
   },
+  root: {
+    width: "15rem",
+    height: "4.4rem",
+    fontSize: "1.6rem",
+    fontWeight: 600,
+    borderRadius: "0.5rem",
+  },
+  containedPrimary: {
+    "&:hover": {
+      backgroundColor: lighten("#FF684B", 0.1),
+    },
+  },
+  loading: {
+    backgroundColor: lighten("#FF684B", 0.1) + " !important",
+  },
 }))
 
 const ScrollLoadingButton = props => {
@@ -25,7 +41,8 @@ const ScrollLoadingButton = props => {
 
   return (
     <Button
-      classes={{ loadingIndicator: classes.loadingIndicator }}
+      variant="contained"
+      classes={{ root: classes.root, loading: classes.loading, loadingIndicator: classes.loadingIndicator }}
       loadingIndicator={
         <Stack direction="row" alignItems="center" spacing={1}>
           <span>{renderLoadingText()}</span>

src/theme/light.tsx

@@ -1,6 +1,4 @@
-import { color } from "motion/react"
-
-import { alpha, lighten } from "@mui/material/styles"
+import { alpha } from "@mui/material/styles"
 
 import { boxShadowOptions, paletteOptions, typographyOptions } from "./options"
 
@@ -166,38 +164,6 @@ const lightTheme = {
         },
       ],
     },
-    MuiLoadingButton: {
-      styleOverrides: {
-        root: {
-          width: "15rem",
-          height: "4.4rem",
-          fontSize: "1.6rem",
-          fontWeight: 600,
-          borderRadius: "0.5rem",
-        },
-      },
-      defaultProps: {
-        variant: "contained",
-        color: "primary",
-      },
-      variants: [
-        {
-          props: { variant: "contained", color: "primary" },
-          style: {
-            backgroundColor: paletteOptions.primary.main,
-            "&:hover": {
-              backgroundColor: lighten(paletteOptions.primary.main, 0.1),
-            },
-          },
-        },
-        {
-          props: { variant: "contained", color: "primary", loading: true },
-          style: {
-            backgroundColor: `${paletteOptions.primary.main} !important`,
-          },
-        },
-      ],
-    },
     MuiMenuItem: {
       styleOverrides: {
         root: {