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: {