Fix ui issues (#2022)

apps/web/src/components/AccountCard/AccountBalance.test.tsx

@@ -91,8 +91,8 @@ describe("<AccountBalance />", () => {
     it("doesn't render balance if it's not available", () => {
       render(<AccountBalance />, { store });
 
-      expect(screen.queryByTestId("tez-balance")).not.toBeInTheDocument();
-      expect(screen.queryByTestId("usd-balance")).not.toBeInTheDocument();
+      expect(screen.getByTestId("tez-balance")).toHaveTextContent("0 ꜩ");
+      expect(screen.getByTestId("usd-balance")).toHaveTextContent("$0.00");
     });
   });
 

apps/web/src/components/AccountCard/AccountBalance.tsx

@@ -1,7 +1,7 @@
 import { Box, Flex, Link, Text } from "@chakra-ui/react";
 import { useDynamicModalContext } from "@umami/components";
 import { useCurrentAccount, useGetAccountBalance, useGetDollarBalance } from "@umami/state";
-import { prettyTezAmount } from "@umami/tezos";
+import { TEZ, prettyTezAmount } from "@umami/tezos";
 
 import { SendTezButton } from "./SendTezButton";
 import { ArrowDownLeftIcon, WalletIcon } from "../../assets/icons";
@@ -21,6 +21,15 @@ export const AccountBalance = () => {
 
   const buyTezUrl = `https://widget.wert.io/default/widget/?commodity=XTZ&address=${address}&network=tezos&commodity_id=xtz.simple.tezos`;
 
+  const getUsdBalance = () => {
+    if (balance === undefined) {
+      return "$0.00";
+    } else if (usdBalance === undefined) {
+      return;
+    }
+    return `$${usdBalance}`;
+  };
+
   return (
     <Box data-testid="account-balance" paddingX="12px">
       <Flex flexDirection="column" gap="4px">
@@ -35,14 +44,12 @@ export const AccountBalance = () => {
         >
           Tez Balance
         </Text>
-        {balance !== undefined && (
-          <Text color={color("900")} fontWeight="600" data-testid="tez-balance" size="2xl">
-            {prettyTezAmount(balance)}
-          </Text>
-        )}
-        {usdBalance !== undefined && (
+        <Text color={color("900")} fontWeight="600" data-testid="tez-balance" size="2xl">
+          {balance ? prettyTezAmount(balance) : `0 ${TEZ}`}
+        </Text>
+        {getUsdBalance() && (
           <Text color={color("700")} data-testid="usd-balance" size="sm">
-            {`$${usdBalance}`}
+            {getUsdBalance()}
           </Text>
         )}
       </Flex>

apps/web/src/components/AccountSelectorModal/RenameAccountModal.tsx

@@ -56,7 +56,7 @@ export const RenameAccountPage = ({ account }: RenameAccountPageProps) => {
       <form onSubmit={handleSubmit(onSubmit)}>
         <ModalHeader>
           <VStack gap="18px">
-            <EditIcon width="22px" color={color("blue")} />
+            <EditIcon width="22px" color={color("400")} />
             <Heading size="xl">Edit name</Heading>
           </VStack>
         </ModalHeader>

apps/web/src/components/AccountTile/AccountTileWrapper.tsx

@@ -8,12 +8,13 @@ export const AccountTileWrapper = ({
   children,
   ...props
 }: PropsWithChildren<Omit<SquareProps, "size">> & {
-  size?: "xs" | "sm";
+  size?: "xs" | "sm" | "md";
 }) => {
   const color = useColor();
   const sizes = {
     xs: "30px",
     sm: "48px",
+    md: "60px",
   };
 
   return (

apps/web/src/components/ColorSchemeModeToggle/ColorSchemeModeToggle.tsx

@@ -1,7 +1,10 @@
 import { Flex, Switch, useColorMode } from "@chakra-ui/react";
 
+import { useColor } from "../../styles/useColor";
+
 export const ColorSchemeModeToggle = () => {
   const { colorMode, toggleColorMode } = useColorMode();
+  const color = useColor();
 
   const switchText = colorMode === "light" ? "Light mode" : "Dark mode";
 
@@ -13,6 +16,7 @@ export const ColorSchemeModeToggle = () => {
         base: "none",
         md: "flex",
       }}
+      color={color("500")}
     >
       {switchText}
       <Switch isChecked={colorMode === "dark"} onChange={toggleColorMode} />

apps/web/src/components/CustomToast/CustomToast.tsx

@@ -51,9 +51,9 @@ export const CustomToast = (props: CustomToastProps): ReactNode => {
   };
 
   return (
-    <Alert addRole={false} id={ids?.root} status={status}>
+    <Alert alignItems="flex-start" addRole={false} id={ids?.root} status={status}>
       <Icon as={AlertIcon} />
-      <Flex width="full" marginLeft="6px">
+      <Flex flexDirection="column" width="full" marginLeft="6px">
         {title && <AlertTitle id={ids?.title}>{title}</AlertTitle>}
         {description && (
           <AlertDescription marginRight="12px" id={ids?.description}>

apps/web/src/components/MasterPasswordModal/MasterPasswordModal.tsx

@@ -37,7 +37,7 @@ export const MasterPasswordModal = ({ onSubmit }: MasterPasswordModalProps) => {
         <ModalBackButton />
         <ModalCloseButton />
         <Center flexDirection="column" gap="12px">
-          <Icon as={LockIcon} boxSize="24px" marginBottom="4px" color={color("blue")} />
+          <Icon as={LockIcon} boxSize="24px" marginBottom="4px" color={color("400")} />
           <Heading size="xl">Confirm password</Heading>
           <Text width="full" color={color("700")} fontWeight="400" textAlign="center" size="md">
             Enter your master password

apps/web/src/components/NameAccountModal/NameAccountModal.tsx

@@ -58,7 +58,7 @@ export const NameAccountModal = ({
         <ModalBackButton />
         <ModalCloseButton />
         <Center flexDirection="column" gap="12px">
-          <Icon as={UserIcon} boxSize="24px" marginBottom="4px" color={color("blue")} />
+          <Icon as={UserIcon} boxSize="24px" marginBottom="4px" color={color("400")} />
           <Heading size="xl">{title}</Heading>
           {subtitle && (
             <Text

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

@@ -32,7 +32,7 @@ export const ImportWallet = () => {
       <ModalHeader>
         <ModalCloseButton />
         <Center flexDirection="column" gap="16px">
-          <Icon as={LoginIcon} width="24px" height="24px" color={color("blue")} />
+          <Icon as={LoginIcon} width="24px" height="24px" color={color("400")} />
           <Heading size="xl">Import Wallet</Heading>
         </Center>
       </ModalHeader>

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

@@ -43,19 +43,19 @@ export const OnboardOptions = ({ children }: PropsWithChildren) => {
 
       <Center flexDirection="column" gap="36px" width="full" height="full">
         <Flex gap={{ base: "24px", md: "30px" }} marginTop="30px" color={color("white", "black")}>
-          <AccountTileWrapper>
+          <AccountTileWrapper size="md">
             <OnboardWithGoogleButton />
           </AccountTileWrapper>
 
-          <AccountTileWrapper>
+          <AccountTileWrapper size="md">
             <OnboardWithFacebookButton />
           </AccountTileWrapper>
 
-          <AccountTileWrapper>
+          <AccountTileWrapper size="md">
             <OnboardWithTwitterButton />
           </AccountTileWrapper>
 
-          <AccountTileWrapper>
+          <AccountTileWrapper size="md">
             <OnboardWithRedditButton />
           </AccountTileWrapper>
         </Flex>

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

@@ -11,9 +11,10 @@ export const OnboardWithFacebookButton = ({
 
   return (
     <IconButton
+      boxSize="full"
       aria-label="Facebook SSO"
       data-testid="login-button-facebook"
-      icon={<FacebookIcon />}
+      icon={<FacebookIcon width="60px" height="60px" />}
       isLoading={isLoading}
       onClick={onboard}
       variant="socialLogin"

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

@@ -11,9 +11,10 @@ export const OnboardWithGoogleButton = ({
 
   return (
     <IconButton
+      boxSize="full"
       aria-label="Google SSO"
       data-testid="login-button-google"
-      icon={<GoogleIcon />}
+      icon={<GoogleIcon width="60px" height="60px" />}
       isLoading={isLoading}
       onClick={onboard}
       variant="socialLogin"

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

@@ -11,9 +11,10 @@ export const OnboardWithRedditButton = ({
 
   return (
     <IconButton
+      boxSize="full"
       aria-label="Reddit SSO"
       data-testid="login-button-reddit"
-      icon={<RedditIcon />}
+      icon={<RedditIcon width="30px" height="30px" />}
       isLoading={isLoading}
       onClick={onboard}
       variant="socialLogin"

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

@@ -11,10 +11,11 @@ export const OnboardWithTwitterButton = ({
 
   return (
     <IconButton
+      boxSize="full"
       color="black"
       aria-label="Twitter SSO"
       data-testid="login-button-twitter"
-      icon={<TwitterIcon fill="currentColor" />}
+      icon={<TwitterIcon width="24px" height="22px" fill="currentColor" />}
       isLoading={isLoading}
       onClick={onboard}
       variant="socialLogin"

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

@@ -42,7 +42,8 @@ const getModeConfig = (mode: Mode) => {
         icon: UserIcon,
         title: "Create Password",
         buttonLabel: "Create Account",
-        subtitle: "Set a password to unlock your wallet. Make sure to store your password safely.",
+        subtitle:
+          "Set a password to unlock your wallet.\n Make sure to store your password safely.",
       };
     case "save_backup":
       return {
@@ -92,9 +93,11 @@ export const SetupPassword = ({ mode }: SetupPasswordProps) => {
       <ModalHeader>
         <ModalBackButton />
         <ModalCloseButton />
-        <Center flexDirection="column" gap="16px">
-          <Icon as={icon} width="24px" height="24px" color={color("blue")} />
-          <Heading size="xl">{title}</Heading>
+        <Center flexDirection="column" gap="12px" whiteSpace="break-spaces">
+          <Icon as={icon} width="24px" height="24px" color={color("400")} />
+          <Heading marginTop="4px" size="xl">
+            {title}
+          </Heading>
           {subtitle && (
             <Text width="full" color={color("700")} fontWeight="400" textAlign="center" size="md">
               {subtitle}

apps/web/src/components/Onboarding/VerificationFlow/ImportantNoticeModal.tsx

@@ -57,7 +57,7 @@ export const ImportantNoticeModal = ({ mnemonic }: ImportantNoticeModalProps) =>
       <ModalHeader>
         <ModalBackButton />
         <Center flexDirection="column" gap="12px">
-          <Icon as={AlertIcon} boxSize="24px" marginBottom="4px" color={color("blue")} />
+          <Icon as={AlertIcon} boxSize="24px" marginBottom="4px" color={color("400")} />
           <Heading size="xl">Important Notice</Heading>
           <Text width="full" color={color("700")} fontWeight="400" textAlign="center" size="md">
             Please read the following before you continue to see your secret Seed Phrase.

apps/web/src/components/Onboarding/VerificationFlow/RecordSeedphraseModal.tsx

@@ -36,7 +36,7 @@ export const RecordSeedphraseModal = ({ seedPhrase }: CopySeedphraseModalProps)
         <ModalBackButton />
         <ModalCloseButton />
         <Center flexDirection="column" gap="12px">
-          <Icon as={KeyIcon} boxSize="24px" marginBottom="4px" color={color("blue")} />
+          <Icon as={KeyIcon} boxSize="24px" marginBottom="4px" color={color("400")} />
           <Heading size="xl">Record Seed Phrase</Heading>
           <Text width="full" color={color("700")} fontWeight="400" textAlign="center" size="md">
             Record these 24 words in order to restore your wallet in the future

apps/web/src/components/Onboarding/VerificationFlow/VerificationInfoModal.tsx

@@ -45,7 +45,7 @@ export const VerificationInfoModal = () => {
     <ModalContent>
       <ModalHeader>
         <Flex alignItems="center" justifyContent="center" flexDirection="column" gap="16px">
-          <AlertIcon width="22px" color="blue" />
+          <AlertIcon width="22px" color={color("400")} />
           <Heading size="xl">How does Verification Work?</Heading>
         </Flex>
         <ModalCloseButton />

apps/web/src/components/Onboarding/VerificationFlow/VerifyMessage.tsx

@@ -24,7 +24,7 @@ export const VerifyMessage = ({ ...props }: Omit<EmptyMessageProps, "title">) =>
       />
       <Link
         marginTop="16px"
-        color={color("600")}
+        color={color("500")}
         fontSize="12px"
         onClick={() => openWith(<VerificationInfoModal />)}
         textDecor="underline"

apps/web/src/components/Onboarding/VerificationFlow/VerifySeedphraseModal.tsx

@@ -69,7 +69,7 @@ export const VerifySeedphraseModal = ({ seedPhrase }: VerifySeedphraseModalProps
         <ModalBackButton />
         <ModalCloseButton />
         <Center flexDirection="column" gap="12px">
-          <Icon as={KeyIcon} boxSize="24px" marginBottom="4px" color={color("blue")} />
+          <Icon as={KeyIcon} boxSize="24px" marginBottom="4px" color={color("400")} />
           <Heading size="xl">Verify Seed Phrase</Heading>
           <Text width="full" color={color("700")} fontWeight="400" textAlign="center" size="md">
             To verify, please type in the word that corresponds to each sequence number.

apps/web/src/components/PasswordInput/PasswordInput.tsx

@@ -79,6 +79,11 @@ export const PasswordInput = <T extends FieldValues, U extends Path<T>>({
       <FormLabel>{label}</FormLabel>
       <InputGroup marginTop="12px">
         <Input
+          color={color("400")}
+          fontSize="18px"
+          _focusWithin={{
+            color: color("900"),
+          }}
           aria-label={label}
           autoComplete="off"
           placeholder={placeholder}

apps/web/src/components/ViewOverlay/ViewOverlay.tsx

@@ -27,7 +27,7 @@ export const ViewOverlay = ({ iconType }: ViewOverlayProps) => {
     }
   };
 
-  const currentColor = color("50");
+  const currentColor = color("400");
 
   return (
     <Box
@@ -37,35 +37,13 @@ export const ViewOverlay = ({ iconType }: ViewOverlayProps) => {
       overflow="hidden"
       width="100%"
       height="100%"
+      color={currentColor}
+      opacity="0.1"
       z-index="0"
     >
-      <Icon
-        as={getIcon()}
-        position="absolute"
-        top="30%"
-        left="-20%"
-        width="50%"
-        height="auto"
-        color={currentColor}
-      />
-      <Icon
-        as={getIcon()}
-        position="absolute"
-        top="5%"
-        left="50%"
-        width="20%"
-        height="auto"
-        color={currentColor}
-      />
-      <Icon
-        as={getIcon()}
-        position="absolute"
-        top="78%"
-        right="5%"
-        width="30%"
-        height="auto"
-        color={currentColor}
-      />
+      <Icon as={getIcon()} position="absolute" top="30%" left="-20%" width="50%" height="auto" />
+      <Icon as={getIcon()} position="absolute" top="5%" left="50%" width="20%" height="auto" />
+      <Icon as={getIcon()} position="absolute" top="78%" right="5%" width="30%" height="auto" />
     </Box>
   );
 };