Fix ui

apps/web/src/components/Header/Header.tsx

@@ -1,18 +1,16 @@
-import { Card, Icon, SlideFade, useBreakpointValue, useColorMode } from "@chakra-ui/react";
-import { mode } from "@chakra-ui/theme-tools";
+import { Card, Icon, SlideFade, useBreakpointValue } from "@chakra-ui/react";
 import { useDynamicModalContext } from "@umami/components";
 import { useCurrentAccount } from "@umami/state";
 import { useEffect, useState } from "react";
 
 import { Actions } from "./Actions";
-import { LogoDarkIcon, LogoLightIcon } from "../../assets/icons";
+import { LogoLightIcon } from "../../assets/icons";
 import { useColor } from "../../styles/useColor";
 import { AccountSelectorModal } from "../AccountSelectorModal";
 import { AccountTile } from "../AccountTile";
 
 export const Header = () => {
   const color = useColor();
-  const colorMode = useColorMode();
   const currentAccount = useCurrentAccount()!;
   const { openWith } = useDynamicModalContext();
 
@@ -59,7 +57,7 @@ export const Header = () => {
         md: "2px 4px 12px 0px rgba(45, 55, 72, 0.05)",
       }}
     >
-      {mode(<Icon as={LogoLightIcon} {...size} />, <Icon as={LogoDarkIcon} {...size} />)(colorMode)}
+      <Icon as={LogoLightIcon} {...size} />
       <SlideFade in={isVisible} offsetY="20px" unmountOnExit>
         <AccountTile
           background={color("100")}

apps/web/src/components/Menu/DrawerContentWrapper.tsx

@@ -19,7 +19,12 @@ export const DrawerContentWrapper = ({
     <>
       <DrawerBackButton />
       <DrawerCloseButton />
-      <DrawerBody as={Flex} flexDirection="column" paddingTop={{ base: "78px", md: "90px" }}>
+      <DrawerBody
+        as={Flex}
+        flexDirection="column"
+        paddingTop={{ base: "66px", md: "90px" }}
+        paddingX={{ base: "24px", md: "40px" }}
+      >
         {title && (
           <Heading color={color("900")} size="2xl">
             {title}

apps/web/src/components/Menu/MenuItem.tsx

@@ -17,7 +17,7 @@ export const MenuItem = ({ label, icon, onClick, rightElement, hasArrow }: TMenu
       color={color("400")}
       data-group
       onClick={onClick}
-      variant="ghost"
+      variant="dropdownOption"
     >
       {icon}
       <Text marginRight="auto" color="gray.900" fontWeight="600" size="lg">

apps/web/src/components/Onboarding/ImportWallet/ImportBackupTab.tsx

@@ -85,6 +85,9 @@ export const ImportBackupTab = () => {
                 width="full"
                 height="72px"
                 borderRadius="0"
+                _hover={{
+                  bg: color("100"),
+                }}
                 onClick={() => inputRef.current?.click()}
                 rightIcon={<Icon as={FileUploadIcon} color={color("400")} />}
                 variant="ghost"

apps/web/src/components/Onboarding/ImportWallet/SecretKeyTab.tsx

@@ -47,6 +47,11 @@ export const SecretKeyTab = () => {
                 required: "Secret Key is required",
                 onChange: event => setIsEncrypted(isEncryptedSecretKeyPrefix(event.target.value)),
               })}
+              _focusVisible={{
+                outline: "none",
+                borderColor: "gray.400",
+                boxShadow: "none",
+              }}
               placeholder="Type here..."
             />
             {errors.secretKey && <FormErrorMessage>{errors.secretKey.message}</FormErrorMessage>}

apps/web/src/components/Onboarding/ImportWallet/SeedPhraseTab.tsx

@@ -99,14 +99,14 @@ export const SeedPhraseTab = () => {
                 gap="10px"
                 color={color("900")}
                 borderBottom="1px solid"
-                borderBottomColor={color("300")}
+                borderBottomColor={color("100")}
                 _expanded={{ borderBottomColor: "transparent" }}
               >
                 <Heading size="md">{mnemonicSize} word seed phrase</Heading>
                 <AccordionIcon />
               </AccordionButton>
 
-              <AccordionPanel borderBottom="1px solid" borderBottomColor={color("300")}>
+              <AccordionPanel borderBottom="1px solid" borderBottomColor={color("100")}>
                 <Flex gap="8px">
                   <RadioButtons
                     inputName="mnemonicSize"

apps/web/src/components/Onboarding/OnboardOptions/OnboardOptions.tsx

@@ -86,7 +86,6 @@ export const OnboardOptions = ({ children }: PropsWithChildren) => {
               trackButtonClick("onboarding", "use_existing_wallet");
               return openWith(<ImportWallet />, {
                 size: "xl",
-                variant: "onboarding",
               });
             }}
             size="lg"

apps/web/src/styles/theme.ts

@@ -77,6 +77,7 @@ const theme = extendTheme({
           },
         },
         container: {
+          borderColor: "gray.100",
           _last: {
             borderBottomWidth: 0,
           },
@@ -536,6 +537,10 @@ const theme = extendTheme({
           paddingBottom: "20px",
           paddingX: { base: "12px", md: "30px" },
         },
+        overlay: {
+          background: "rgba(22, 22, 43, 0.80)",
+          backdropFilter: "blur(5px)",
+        },
       },
     },
     Modal: {
@@ -603,13 +608,6 @@ const theme = extendTheme({
           marginTop: "30px",
         },
       },
-      variants: {
-        onboarding: {
-          dialog: {
-            marginBottom: { base: 0, md: "100px" },
-          },
-        },
-      },
     },
     Checkbox: {
       baseStyle: {