From 323879c452fb010bdff33a756b5d2067ca876d44 Mon Sep 17 00:00:00 2001
From: Shubham Gupta <shubham.gupta2956@gmail.com>
Date: Fri, 4 Oct 2024 13:56:04 +0530
Subject: [PATCH] ui: Update buttons styles

---
 src/assets/completeRecoveryIcon.svg           |  2 +-
 src/components/Button.tsx                     | 95 ++++++++++++++-----
 src/components/ConfigureGuardians.tsx         | 13 ++-
 src/components/ConnectWallets.tsx             |  2 +-
 src/components/EnableSafeModule.tsx           |  2 +-
 src/components/FlowsInfoCard.tsx              |  3 +-
 src/components/GuardianSetup.tsx              |  2 +-
 src/components/Navbar.tsx                     | 24 +----
 src/components/RequestedRecoveries.tsx        | 12 ++-
 src/components/WalletActions.tsx              |  2 +
 .../burnerWallet/ConfigureGuardians.tsx       | 12 ++-
 src/components/burnerWallet/GuardianSetup.tsx |  4 +-
 .../burnerWallet/RequestedRecoveries.tsx      | 19 ++--
 src/pages/burnerWalletFlow.tsx                |  3 +-
 src/pages/landingPage.tsx                     |  2 +-
 src/theme.tsx                                 |  5 +-
 16 files changed, 128 insertions(+), 74 deletions(-)

diff --git a/src/assets/completeRecoveryIcon.svg b/src/assets/completeRecoveryIcon.svg
index 045ce27..d762c8e 100644
--- a/src/assets/completeRecoveryIcon.svg
+++ b/src/assets/completeRecoveryIcon.svg
@@ -1,6 +1,6 @@
 <svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_0_3)">
-<path d="M4.5 19H7.5M13.5 19H16.5M16 4.5V12.5M1.5 4.2V12.8C1.5 13.9201 1.5 14.4802 1.71799 14.908C1.90973 15.2843 2.21569 15.5903 2.59202 15.782C3.01984 16 3.57989 16 4.7 16H16.3C17.4201 16 17.9802 16 18.408 15.782C18.7843 15.5903 19.0903 15.2843 19.282 14.908C19.5 14.4802 19.5 13.9201 19.5 12.8V4.2C19.5 3.0799 19.5 2.51984 19.282 2.09202C19.0903 1.7157 18.7843 1.40974 18.408 1.21799C17.9802 1 17.4201 1 16.3 1H4.7C3.5799 1 3.01984 1 2.59202 1.21799C2.2157 1.40973 1.90973 1.71569 1.71799 2.09202C1.5 2.51984 1.5 3.07989 1.5 4.2ZM10 8.5C10 9.88071 8.88071 11 7.5 11C6.11929 11 5 9.88071 5 8.5C5 7.11929 6.11929 6 7.5 6C8.88071 6 10 7.11929 10 8.5Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.5 19H7.5M13.5 19H16.5M16 4.5V12.5M1.5 4.2V12.8C1.5 13.9201 1.5 14.4802 1.71799 14.908C1.90973 15.2843 2.21569 15.5903 2.59202 15.782C3.01984 16 3.57989 16 4.7 16H16.3C17.4201 16 17.9802 16 18.408 15.782C18.7843 15.5903 19.0903 15.2843 19.282 14.908C19.5 14.4802 19.5 13.9201 19.5 12.8V4.2C19.5 3.0799 19.5 2.51984 19.282 2.09202C19.0903 1.7157 18.7843 1.40974 18.408 1.21799C17.9802 1 17.4201 1 16.3 1H4.7C3.5799 1 3.01984 1 2.59202 1.21799C2.2157 1.40973 1.90973 1.71569 1.71799 2.09202C1.5 2.51984 1.5 3.07989 1.5 4.2ZM10 8.5C10 9.88071 8.88071 11 7.5 11C6.11929 11 5 9.88071 5 8.5C5 7.11929 6.11929 6 7.5 6C8.88071 6 10 7.11929 10 8.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </g>
 <defs>
 <clipPath id="clip0_0_3">
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 3d7fcd4..6fd0f24 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -5,47 +5,96 @@ type CustomButtonProps = {
   endIcon?: ReactNode;
   loading?: boolean;
   filled?: boolean; // Add the filled prop
+  variant?: "text" | "outlined" | "contained";
 } & React.ComponentPropsWithoutRef<"button">; // Ensure compatibility with standard button props
 
 export function Button({
   children,
   endIcon,
   loading,
-  filled = false,
+  variant = "text",
   ...buttonProps
 }: CustomButtonProps) {
   const theme = useTheme();
 
+  const getStyles = () => {
+    switch (variant) {
+      case "text":
+        return {
+          color: theme.palette.text.primary, // Set text color based on filled prop
+          ":hover": {
+            // backgroundColor: filled ? "#FD4BA1" : "#E0F6FF", // Background color on hover
+          },
+          ":focus": {
+            outline: "none", // Remove outline on focus
+          },
+          ":active": {
+            outline: "none", // Remove outline on active
+          },
+          ":disabled": {
+            backgroundColor: "#FAC5DF",
+            color: "#ffffff",
+          },
+        };
+
+      case "outlined":
+        return {
+          color: theme.palette.text.primary, // Set text color based on filled prop
+          background: theme.palette.background.default, // Set text color based on filled prop
+          ":hover": {
+            // backgroundColor: filled ? "#FD4BA1" : "#E0F6FF", // Background color on hover
+          },
+          ":focus": {
+            outline: "none", // Remove outline on focus
+          },
+          ":active": {
+            outline: "none", // Remove outline on active
+          },
+          ":disabled": {
+            backgroundColor: "#FAC5DF",
+            color: "#ffffff",
+          },
+        };
+
+      case "contained":
+        return {
+          color: 'white', // Set text color based on filled prop
+          background: theme.palette.primary.main, // Set text color based on filled prop
+          ":hover": {
+            // backgroundColor: filled ? "#FD4BA1" : "#E0F6FF", // Background color on hover
+          },
+          ":focus": {
+            outline: "none", // Remove outline on focus
+          },
+          ":active": {
+            outline: "none", // Remove outline on active
+          },
+          ":disabled": {
+            backgroundColor: "#FAC5DF",
+            color: "#ffffff",
+          },
+        };
+
+      default:
+        break;
+    }
+  };
+
   return (
     <MuiButton
+      {...buttonProps}
       sx={{
-        borderColor: filled ? "transparent" : "#94969C",
-        borderWidth: "1px",
-        borderRadius: "26px",
-        paddingX: "26px",
-        paddingY: "13px",
-        borderStyle: "solid",
-        backgroundColor: filled ? "#FD4BA1" : "rgba(255, 255, 255, 0.87)",
+        border: variant === "outlined" ? "2px solid #EBEBEB" : "none",
+        borderRadius: "12px",
+        paddingX: "36px",
+        paddingY: "12px",
         textTransform: "none",
-        color: filled ? "#FFFFFF" : theme.palette.primary.main, // Set text color based on filled prop
-        ":hover": {
-          backgroundColor: filled ? "#FD4BA1" : "#E0F6FF", // Background color on hover
-        },
-        ":focus": {
-          outline: "none", // Remove outline on focus
-        },
-        ":active": {
-          outline: "none", // Remove outline on active
-        },
-        ":disabled": {
-          backgroundColor: "#FAC5DF",
-          color: "#ffffff",
-        },
+        ...getStyles(),
+        ...buttonProps.sx,
       }}
       fullWidth
       endIcon={loading ? <CircularProgress size={24} /> : endIcon}
       disabled={loading || buttonProps.disabled}
-      {...buttonProps}
     >
       {children}
     </MuiButton>
diff --git a/src/components/ConfigureGuardians.tsx b/src/components/ConfigureGuardians.tsx
index 80774cc..43fb8c9 100644
--- a/src/components/ConfigureGuardians.tsx
+++ b/src/components/ConfigureGuardians.tsx
@@ -81,16 +81,20 @@ const AddGuardianModal = ({
             />
           </Grid>
           <Grid item xs={6}>
-            <Button onClick={handleClose} disabled={isAddGuardianLoading}>
+            <Button
+              variant="outlined"
+              onClick={handleClose}
+              disabled={isAddGuardianLoading}
+            >
               Cancel
             </Button>
           </Grid>
           <Grid item xs={6}>
             <Button
+              variant="contained"
               onClick={handleAddGuardian}
               disabled={isAddGuardianLoading}
               loading={isAddGuardianLoading}
-              filled={true}
             >
               Add Guardian
             </Button>
@@ -216,6 +220,7 @@ const ConfigureGuardians = () => {
       >
         <Grid item xs={12} textAlign={"start"}>
           <Button
+            variant="text"
             onClick={() => {
               stepsContext?.setStep(STEPS.WALLET_ACTIONS);
             }}
@@ -239,12 +244,13 @@ const ConfigureGuardians = () => {
             </Grid>
             <Grid item>
               <Button
+                variant="contained"
                 onClick={() => {
                   setNewGuardianAddress("");
                   setNewGuardianEmail("");
                   setIsAddGuardianModalOpen(true);
                 }}
-                filled={true}
+                variant={"contained"}
               >
                 + Add Guardian
               </Button>
@@ -268,6 +274,7 @@ const ConfigureGuardians = () => {
                 </Grid>
                 <Grid item>
                   <Button
+                    variant="contained"
                     disabled={
                       activeGuardianAddressRemoval !== "" &&
                       activeGuardianAddressRemoval !== guardianInfo.guardianAddr
diff --git a/src/components/ConnectWallets.tsx b/src/components/ConnectWallets.tsx
index f3c946f..634cd61 100644
--- a/src/components/ConnectWallets.tsx
+++ b/src/components/ConnectWallets.tsx
@@ -32,7 +32,7 @@ const ConnectWallets = () => {
             return (
               <Box width="200px" margin="auto">
                 <Button
-                  filled={true}
+                  variant="contained"
                   onClick={show}
                   endIcon={<AccountBalanceWalletOutlinedIcon />}
                 >
diff --git a/src/components/EnableSafeModule.tsx b/src/components/EnableSafeModule.tsx
index fcb70a5..2a44f0b 100644
--- a/src/components/EnableSafeModule.tsx
+++ b/src/components/EnableSafeModule.tsx
@@ -72,7 +72,7 @@ const EnableSafeModule = () => {
         {!isModuleEnabled ? (
           <Box sx={{ marginX: "auto", width: "18.75rem" }}>
             <Button
-              filled={true}
+              variant={"contained"}
               disabled={isEnableModalLoading}
               loading={isEnableModalLoading}
               onClick={enableEmailRecoveryModule}
diff --git a/src/components/FlowsInfoCard.tsx b/src/components/FlowsInfoCard.tsx
index a71fe78..c1f7024 100644
--- a/src/components/FlowsInfoCard.tsx
+++ b/src/components/FlowsInfoCard.tsx
@@ -80,9 +80,10 @@ const FlowInfoCard = ({
           <Tooltip title="Under Audit" placement="top">
             <span>
               <Button
+                variant="outlined"
                 onClick={handleButtonClick}
                 disabled={isButtonDisabled ?? false}
-                style={{padding: '0.5rem 2rem'}}
+                style={{ padding: "0.5rem 2rem" }}
               >
                 {buttonText}
               </Button>
diff --git a/src/components/GuardianSetup.tsx b/src/components/GuardianSetup.tsx
index afb0457..902f5de 100644
--- a/src/components/GuardianSetup.tsx
+++ b/src/components/GuardianSetup.tsx
@@ -379,7 +379,7 @@ const GuardianSetup = () => {
             disabled={!guardianEmail || loading}
             loading={loading}
             onClick={configureRecoveryAndRequestGuardian}
-            filled={true}
+            variant={"contained"}
           >
             Configure Recovery & Request Guardian
           </Button>
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index bd3e438..ed37986 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -129,23 +129,13 @@ const MobileNav = ({
         style={{ marginTop: "auto", marginBottom: "2rem" }}
       >
         <Button
-          color="secondary"
           variant="outlined"
           href="https://prove.email/blog/recovery"
           target="_blank"
           sx={{
             marginRight: theme.spacing(2),
+            color: 'white',
             textTransform: "none",
-            borderRadius: "26px",
-            ":hover": {
-              backgroundColor: "#E0F6FF", // Background color on hover
-            },
-            ":focus": {
-              outline: "none", // Remove outline on focus
-            },
-            ":active": {
-              outline: "none", // Remove outline on active
-            },
           }}
         >
           Learn More
@@ -280,18 +270,8 @@ const NavBar: React.FC = () => {
                 target="_blank"
                 sx={{
                   display: { xs: "none", lg: "block" },
-                  marginRight: theme.spacing(2),
                   textTransform: "none",
-                  borderRadius: "26px",
-                  ":hover": {
-                    backgroundColor: "#E0F6FF", // Background color on hover
-                  },
-                  ":focus": {
-                    outline: "none", // Remove outline on focus
-                  },
-                  ":active": {
-                    outline: "none", // Remove outline on active
-                  },
+                  lineHeight: '14px'
                 }}
               >
                 Learn More
diff --git a/src/components/RequestedRecoveries.tsx b/src/components/RequestedRecoveries.tsx
index 212114b..c09cb2f 100644
--- a/src/components/RequestedRecoveries.tsx
+++ b/src/components/RequestedRecoveries.tsx
@@ -57,6 +57,7 @@ const RequestedRecoveries = () => {
 
   // Checks whether recovery has been triggered.
   const checkIfRecoveryCanBeCompleted = useCallback(async () => {
+    if (!address) return;
     setIsRecoveryStatusLoading(true);
     const getRecoveryRequest = await readContract(config, {
       abi: safeEmailRecoveryModuleAbi,
@@ -221,11 +222,13 @@ const RequestedRecoveries = () => {
         return (
           <Button
             loading={isTriggerRecoveryLoading}
+            variant="contained"
             onClick={requestRecovery}
             disabled={
               safeOwnersData?.includes(newOwner) ||
               !newOwner ||
-              !guardianEmailAddress
+              !guardianEmailAddress ||
+              !address
             }
           >
             {isTriggerRecoveryLoading
@@ -237,6 +240,7 @@ const RequestedRecoveries = () => {
         return (
           <Button
             loading={isCompleteRecoveryLoading}
+            variant="contained"
             onClick={completeRecovery}
             endIcon={<img src={completeRecoveryIcon} />}
           >
@@ -245,7 +249,7 @@ const RequestedRecoveries = () => {
         );
       case BUTTON_STATES.RECOVERY_COMPLETED:
         return (
-          <Button filled={true} onClick={() => navigate("/")}>
+          <Button variant={"contained"} onClick={() => navigate("/")}>
             Complete! Connect new wallet to set new guardians ➔
           </Button>
         );
@@ -273,6 +277,7 @@ const RequestedRecoveries = () => {
     >
       <Grid item xs={12} textAlign={"start"}>
         <Button
+          variant="text"
           onClick={() => {
             navigate("/");
           }}
@@ -438,18 +443,19 @@ const RequestedRecoveries = () => {
             margin: "auto",
           }}
         >
-          <div style={{ minWidth: "300px" }}>{getButtonComponent()}</div>
           {buttonState === BUTTON_STATES.COMPLETE_RECOVERY ? (
             <div style={{ minWidth: "300px" }}>
               <Button
                 onClick={() => handleCancelRecovery()}
                 endIcon={<img src={cancelRecoveryIcon} />}
                 loading={isCancelRecoveryLoading}
+                variant="outlined"
               >
                 Cancel Recovery
               </Button>
             </div>
           ) : null}
+          <div style={{ minWidth: "300px" }}>{getButtonComponent()}</div>
         </div>
       </div>
     </Box>
diff --git a/src/components/WalletActions.tsx b/src/components/WalletActions.tsx
index a59d2b3..5adab9b 100644
--- a/src/components/WalletActions.tsx
+++ b/src/components/WalletActions.tsx
@@ -21,6 +21,7 @@ const WalletActions = () => {
         >
           <Grid item>
             <Button
+              variant="outlined"
               onClick={() => stepsContext?.setStep(STEPS.CONFIGURE_GUARDIANS)}
               disabled
             >
@@ -29,6 +30,7 @@ const WalletActions = () => {
           </Grid>
           <Grid>
             <Button
+              variant="outlined"
               onClick={() => stepsContext?.setStep(STEPS.REQUESTED_RECOVERIES)}
             >
               Trigger Recovery
diff --git a/src/components/burnerWallet/ConfigureGuardians.tsx b/src/components/burnerWallet/ConfigureGuardians.tsx
index 07c5172..37054fd 100644
--- a/src/components/burnerWallet/ConfigureGuardians.tsx
+++ b/src/components/burnerWallet/ConfigureGuardians.tsx
@@ -83,7 +83,11 @@ const AddGuardianModal = ({
             />
           </Grid>
           <Grid item xs={6}>
-            <Button onClick={handleClose} disabled={isAddGuardianLoading}>
+            <Button
+              variant="outlined"
+              onClick={handleClose}
+              disabled={isAddGuardianLoading}
+            >
               Cancel
             </Button>
           </Grid>
@@ -92,7 +96,7 @@ const AddGuardianModal = ({
               onClick={handleAddGuardian}
               disabled={isAddGuardianLoading}
               loading={isAddGuardianLoading}
-              filled={true}
+              variant={"contained"}
             >
               Add Guardian
             </Button>
@@ -220,6 +224,7 @@ const ConfigureGuardians = () => {
       >
         <Grid item xs={12} textAlign={"start"}>
           <Button
+            variant="text"
             onClick={() => {
               stepsContext?.setStep(STEPS.WALLET_ACTIONS);
             }}
@@ -248,7 +253,7 @@ const ConfigureGuardians = () => {
                   setNewGuardianEmail("");
                   setIsAddGuardianModalOpen(true);
                 }}
-                filled={true}
+                variant={"contained"}
               >
                 + Add Guardian
               </Button>
@@ -272,6 +277,7 @@ const ConfigureGuardians = () => {
                 </Grid>
                 <Grid item>
                   <Button
+                    variant="contained"
                     disabled={
                       activeGuardianAddressRemoval !== "" &&
                       activeGuardianAddressRemoval !== guardianInfo.guardianAddr
diff --git a/src/components/burnerWallet/GuardianSetup.tsx b/src/components/burnerWallet/GuardianSetup.tsx
index ca6016b..cf7eca1 100644
--- a/src/components/burnerWallet/GuardianSetup.tsx
+++ b/src/components/burnerWallet/GuardianSetup.tsx
@@ -449,7 +449,7 @@ const GuardianSetup = () => {
               disabled={!guardianEmail || loading}
               loading={loading}
               onClick={configureRecoveryAndRequestGuardian}
-              filled={true}
+              variant={"contained"}
             >
               Configure Recovery & Request Guardian
             </Button>
@@ -463,7 +463,7 @@ const GuardianSetup = () => {
                 // await new Promise((resolve) => setTimeout(resolve, 10000)); // 5000 ms = 5 seconds
                 configureRecoveryAndRequestGuardian();
               }}
-              filled={true}
+              variant={"contained"}
             >
               Create burner wallet
             </Button>
diff --git a/src/components/burnerWallet/RequestedRecoveries.tsx b/src/components/burnerWallet/RequestedRecoveries.tsx
index 93c4520..9213ec1 100644
--- a/src/components/burnerWallet/RequestedRecoveries.tsx
+++ b/src/components/burnerWallet/RequestedRecoveries.tsx
@@ -3,9 +3,7 @@ import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import toast from "react-hot-toast";
 import { useNavigate } from "react-router-dom";
 import { readContract } from "wagmi/actions";
-import {
-  universalEmailRecoveryModule,
-} from "../../../contracts.base-sepolia.json";
+import { universalEmailRecoveryModule } from "../../../contracts.base-sepolia.json";
 import { safeAbi } from "../../abi/Safe";
 import { abi as universalEmailRecoveryModuleAbi } from "../../abi/UniversalEmailRecoveryModule.json";
 import { StepsContext } from "../../App";
@@ -235,7 +233,11 @@ const RequestedRecoveries = () => {
     switch (buttonState) {
       case BUTTON_STATES.TRIGGER_RECOVERY:
         return (
-          <Button loading={isTriggerRecoveryLoading} onClick={requestRecovery}>
+          <Button
+            loading={isTriggerRecoveryLoading}
+            variant="contained"
+            onClick={requestRecovery}
+          >
             Trigger Recovery
           </Button>
         );
@@ -244,6 +246,7 @@ const RequestedRecoveries = () => {
           <Button
             loading={isCompleteRecoveryLoading}
             disabled={!newOwner}
+            variant="contained"
             onClick={completeRecovery}
             endIcon={<img src={completeRecoveryIcon} />}
           >
@@ -252,7 +255,7 @@ const RequestedRecoveries = () => {
         );
       case BUTTON_STATES.RECOVERY_COMPLETED:
         return (
-          <Button filled={true} onClick={() => navigate("/")}>
+          <Button variant={"contained"} onClick={() => navigate("/")}>
             Complete! Connect new wallet to set new guardians ➔
           </Button>
         );
@@ -282,10 +285,11 @@ const RequestedRecoveries = () => {
     >
       <Grid item xs={12} textAlign={"start"}>
         <Button
+          variant="text"
           onClick={() => {
             stepsContext?.setStep(STEPS.WALLET_ACTIONS);
           }}
-          sx={{ textAlign: "left", cursor: "pointer", width: "auto" }}
+          sx={{ textAlign: "left", width: "auto" }}
         >
           ← Back
         </Button>
@@ -370,18 +374,19 @@ const RequestedRecoveries = () => {
             margin: "auto",
           }}
         >
-          <div style={{ minWidth: "300px" }}>{getButtonComponent()}</div>
           {buttonState === BUTTON_STATES.COMPLETE_RECOVERY ? (
             <div style={{ minWidth: "300px" }}>
               <Button
                 onClick={() => handleCancelRecovery()}
                 endIcon={<img src={cancelRecoveryIcon} />}
+                variant="outlined"
                 loading={isCancelRecoveryLoading}
               >
                 Cancel Recovery
               </Button>
             </div>
           ) : null}
+          <div style={{ minWidth: "300px" }}>{getButtonComponent()}</div>
         </div>
       </div>
     </Box>
diff --git a/src/pages/burnerWalletFlow.tsx b/src/pages/burnerWalletFlow.tsx
index 6e946cd..4e4331a 100644
--- a/src/pages/burnerWalletFlow.tsx
+++ b/src/pages/burnerWalletFlow.tsx
@@ -62,7 +62,6 @@ const BurnerWalletFlow = () => {
     };
   }, []);
 
-
   const renderBody = () => {
     switch (stepsContext?.step) {
       // Step to create a new safe and install the universal email recovery module. This step requires guardian emails before the recovery module can be installed
@@ -131,11 +130,13 @@ const BurnerWalletFlow = () => {
           </DialogContent>
           <DialogActions>
             <Button
+              variant="outlined"
               onClick={() => setIsResetBurnerWalletConfirmationModalOpen(false)}
             >
               Cancel
             </Button>
             <Button
+              variant="contained"
               onClick={async () => {
                 setIsResetBurnerWalletConfirmationModalOpen(false); // Remove these values from localStorage to prevent conflicts with the safe wallet flow.
                 await localStorage.removeItem("accountCode");
diff --git a/src/pages/landingPage.tsx b/src/pages/landingPage.tsx
index fd1a7f6..a2e445b 100644
--- a/src/pages/landingPage.tsx
+++ b/src/pages/landingPage.tsx
@@ -76,7 +76,7 @@ const LandingPage = () => {
             </Typography>
           </Box>
         </Link> */}
-        <Typography variant="h1" sx={{ color: theme.palette.primary.main }}>
+        <Typography variant="h1">
           Email Recovery Demo
         </Typography>
         <Typography
diff --git a/src/theme.tsx b/src/theme.tsx
index 6563e86..3de6336 100644
--- a/src/theme.tsx
+++ b/src/theme.tsx
@@ -5,14 +5,11 @@ import { createTheme } from "@mui/material/styles";
 const theme = createTheme({
   palette: {
     primary: {
-      main: "#000000",
+      main: "#FD3E9A",
     },
     secondary: {
       main: "#8E8E8E",
     },
-    accent: {
-      main: "#FF4081", // Choose your accent color here
-    },
   },
   typography: {
     fontFamily: "Fustat",