ui: Update buttons styles

src/components/Button.tsx

@@ -5,47 +5,97 @@ 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: '#EBEBEB20', // Set text color based on filled prop
+          border: "2px solid #EBEBEB",
+          ":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": {
+            background: "#EA1E80", // Set text color based on filled prop
+            // 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)",
+        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>

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

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 />}
                 >

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}

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>

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>

src/components/InputField.tsx

@@ -27,12 +27,6 @@ const CustomTextField = styled(TextField)(
       padding: "10px 12px",
       color: "#667085",
     },
-    "& .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline": {
-      borderColor: status ? statusColor : "#ABBEFF",
-    },
-    "& .Mui-focused .MuiOutlinedInput-notchedOutline": {
-      borderColor: status ? statusColor : "#ABBEFF",
-    },
   })
 );
 

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

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>

src/components/Toggle.tsx

@@ -5,16 +5,19 @@ import * as React from "react";
 
 const StyledToggleButtonGroup = styled(ToggleButtonGroup)(() => ({
   "&.MuiToggleButtonGroup-root": {
-    backgroundColor: "#F6F6F6",
-    borderRadius: "20px",
+    backgroundColor: "#F3F3F3",
+    borderRadius: "12px",
     padding: "4px",
   },
   "& .MuiToggleButton-root": {
     border: "none",
-    color: "#757575",
-    borderRadius: "20px",
+    color: "#000",
+    fontSize: '16px',
+    fontWeight: "semibold",
+    borderRadius: "12px",
     "&.Mui-selected": {
       backgroundColor: "white",
+      border: "2px solid #EBEBEB",
       color: "black",
     },
     "&:focus": {
@@ -29,7 +32,7 @@ export default function CustomizedToggleButton({ onFlowChange }) {
 
   const handleAlignment = (
     event: React.MouseEvent<HTMLElement>,
-    newAlignment: string,
+    newAlignment: string
   ) => {
     if (newAlignment !== null) {
       setAlignment(newAlignment);
@@ -47,7 +50,6 @@ export default function CustomizedToggleButton({ onFlowChange }) {
         marginY: "25px",
         paddingX: "30px",
         height: "40px",
-        width: "250px",
         justifyContent: "center",
         gap: "10px",
       }}