From 67cebbd69199dd41decacf501f973a82c8ddfba7 Mon Sep 17 00:00:00 2001
From: Oleg Chendighelean <oleg.chendighelean@trili.tech>
Date: Thu, 17 Oct 2024 18:02:24 +0100
Subject: [PATCH] Fix ui

---
 apps/web/src/components/Header/Header.tsx            |  8 +++-----
 .../web/src/components/Menu/DrawerContentWrapper.tsx |  7 ++++++-
 apps/web/src/components/Menu/MenuItem.tsx            |  2 +-
 .../Onboarding/ImportWallet/ImportBackupTab.tsx      |  3 +++
 .../Onboarding/ImportWallet/SecretKeyTab.tsx         |  5 +++++
 .../Onboarding/ImportWallet/SeedPhraseTab.tsx        |  4 ++--
 .../Onboarding/OnboardOptions/OnboardOptions.tsx     |  1 -
 apps/web/src/styles/theme.ts                         | 12 +++++-------
 8 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/apps/web/src/components/Header/Header.tsx b/apps/web/src/components/Header/Header.tsx
index 9642378041..1fffe42d1f 100644
--- a/apps/web/src/components/Header/Header.tsx
+++ b/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")}
diff --git a/apps/web/src/components/Menu/DrawerContentWrapper.tsx b/apps/web/src/components/Menu/DrawerContentWrapper.tsx
index 6bcc86a029..d5370dd5d9 100644
--- a/apps/web/src/components/Menu/DrawerContentWrapper.tsx
+++ b/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}
diff --git a/apps/web/src/components/Menu/MenuItem.tsx b/apps/web/src/components/Menu/MenuItem.tsx
index 46d2bbb102..a7e1170df4 100644
--- a/apps/web/src/components/Menu/MenuItem.tsx
+++ b/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">
diff --git a/apps/web/src/components/Onboarding/ImportWallet/ImportBackupTab.tsx b/apps/web/src/components/Onboarding/ImportWallet/ImportBackupTab.tsx
index 144025b002..a927541a6c 100644
--- a/apps/web/src/components/Onboarding/ImportWallet/ImportBackupTab.tsx
+++ b/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"
diff --git a/apps/web/src/components/Onboarding/ImportWallet/SecretKeyTab.tsx b/apps/web/src/components/Onboarding/ImportWallet/SecretKeyTab.tsx
index 8d8f31d7e5..3decf10f81 100644
--- a/apps/web/src/components/Onboarding/ImportWallet/SecretKeyTab.tsx
+++ b/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>}
diff --git a/apps/web/src/components/Onboarding/ImportWallet/SeedPhraseTab.tsx b/apps/web/src/components/Onboarding/ImportWallet/SeedPhraseTab.tsx
index 868eae2328..cda74f3f2f 100644
--- a/apps/web/src/components/Onboarding/ImportWallet/SeedPhraseTab.tsx
+++ b/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"
diff --git a/apps/web/src/components/Onboarding/OnboardOptions/OnboardOptions.tsx b/apps/web/src/components/Onboarding/OnboardOptions/OnboardOptions.tsx
index c9c40164f8..f126a61acd 100644
--- a/apps/web/src/components/Onboarding/OnboardOptions/OnboardOptions.tsx
+++ b/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"
diff --git a/apps/web/src/styles/theme.ts b/apps/web/src/styles/theme.ts
index d08c2ec4a4..f70e1dd09a 100644
--- a/apps/web/src/styles/theme.ts
+++ b/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: {