Merge pull request #507 from trilitech/ui-fixes-before-release

UI fixes before release

src/components/Onboarding/ModalContentWrapper.tsx

@@ -19,7 +19,7 @@ export default function ModalContentWrapper({ children, icon, title, subtitle }:
       <Center mb="32px" flexDirection="column">
         <Heading size="xl">{title}</Heading>
         {subtitle && (
-          <Text textAlign="center" size="sm" mt="10px" color={colors.gray[400]} mb="20px">
+          <Text textAlign="center" size="sm" mt="10px" color={colors.gray[400]}>
             {subtitle}
           </Text>
         )}

src/components/Onboarding/derivationPath/DerivationPath.tsx

@@ -50,7 +50,7 @@ export const DerivationPath = ({
       subtitle="Choose a custom derivation path or select the default derivation path and use the default key."
     >
       <form onSubmit={handleSubmit(onSubmit)} style={{ width: "100%" }}>
-        <FormControl mb="12px">
+        <FormControl>
           <Center>
             <HStack spacing="10px">
               <Text fontWeight="bold">Default Path</Text>
@@ -68,7 +68,7 @@ export const DerivationPath = ({
             </HStack>
           </Center>
         </FormControl>
-        <FormControl isInvalid={!isValid}>
+        <FormControl isInvalid={!isValid} my="20px">
           <Input
             data-testid="custom-path"
             isDisabled={useDefault}

src/components/Onboarding/masterPassword/password/EnterAndConfirmPassword.tsx

@@ -61,7 +61,7 @@ export const EnterAndConfirmPassword: React.FC<{
             {errors.confirm && <FormErrorMessage>{errors.confirm.message}</FormErrorMessage>}
           </FormControl>
           <Button
-            mt={5}
+            mt="32px"
             isDisabled={!isValid || isLoading}
             isLoading={isLoading}
             type="submit"

src/components/Onboarding/masterPassword/password/EnterPassword.tsx

@@ -1,4 +1,4 @@
-import { Button, FormControl, Heading } from "@chakra-ui/react";
+import { Button, FormControl } from "@chakra-ui/react";
 import { FormProvider, useForm } from "react-hook-form";
 import ModalContentWrapper from "../../ModalContentWrapper";
 import { FormErrorMessage } from "../../../FormErrorMessage";
@@ -35,14 +35,13 @@ const EnterPassword = ({
     >
       <FormProvider {...form}>
         <form onSubmit={handleSubmit(onSubmit)} style={{ width: "100%" }}>
-          <Heading>Enter Password to continue</Heading>
           <FormControl isInvalid={!!errors.password}>
             <PasswordInput inputName="password" data-testid="password" />
             {errors.password && <FormErrorMessage>{errors.password.message}</FormErrorMessage>}
           </FormControl>
 
           <Button
-            mt="12px"
+            mt="32px"
             width="100%"
             isDisabled={!isValid}
             isLoading={isLoading}

src/components/Onboarding/nameAccount/NameAccountDisplay.tsx

@@ -32,7 +32,7 @@ const NameAccountDisplay = ({
           />
         </FormControl>
 
-        <Button mt="12px" w="100%" size="lg" type="submit">
+        <Button mt="32px" w="100%" size="lg" type="submit">
           Continue
         </Button>
       </form>

src/components/Onboarding/notice/Notice.tsx

@@ -1,4 +1,4 @@
-import { VStack, Button, ListItem, OrderedList } from "@chakra-ui/react";
+import { Button, ListItem, OrderedList, Box } from "@chakra-ui/react";
 import React from "react";
 import { generate24WordMnemonic } from "../../../utils/mnemonic";
 import ModalContentWrapper from "../ModalContentWrapper";
@@ -28,15 +28,16 @@ const Notice: React.FC<{
       title="Important Notice"
       subtitle="Please read the following before you continue to see your secret Seed Phrase."
     >
-      <VStack spacing="16px" overflowX="hidden" overflowY="auto" p="4px">
-        <OrderedList spacing={4}>
+      <Box>
+        <OrderedList spacing="12px">
           {noticeItems.map((item, index) => {
             return <ListItem key={index}>{item.content}</ListItem>;
           })}
         </OrderedList>
         <Button
           w="100%"
           size="lg"
+          mt="28px"
           onClick={() =>
             goToStep({
               type: StepType.showSeedphrase,
@@ -49,12 +50,13 @@ const Notice: React.FC<{
         <Button
           w="100%"
           size="lg"
+          mt="16px"
           variant="tertiary"
           onClick={() => goToStep({ type: StepType.restoreMnemonic })}
         >
           I already have a Seed Phrase
         </Button>
-      </VStack>
+      </Box>
     </ModalContentWrapper>
   );
 };

src/components/Onboarding/restoreMnemonic/RestoreMnemonic.tsx

@@ -1,8 +1,8 @@
-import { VStack, Text, Input, Box, Button, GridItem, Grid, Select } from "@chakra-ui/react";
+import { VStack, Input, Box, Button, GridItem, Grid, Select, Heading } from "@chakra-ui/react";
 import { useState } from "react";
 import ModalContentWrapper from "../ModalContentWrapper";
 import { FieldValues, useForm } from "react-hook-form";
-import { WarningIcon } from "@chakra-ui/icons";
+import { ChevronDownIcon, WarningIcon } from "@chakra-ui/icons";
 import { Step, StepType } from "../useOnboardingModal";
 import { mnemonic1 } from "../../../mocks/mockMnemonic";
 import { useAsyncActionHandler } from "../../../utils/hooks/useAsyncActionHandler";
@@ -84,6 +84,9 @@ const RestoreMnemonic = ({ goToStep }: { goToStep: (step: Step) => void }) => {
           <VStack w="100%" spacing={4}>
             <Select
               data-testid="select"
+              icon={<ChevronDownIcon />}
+              height="48px"
+              color={colors.gray[450]}
               onChange={event => handleMnemonicSizeChange(event.target.value)}
               value={mnemonicSize}
             >
@@ -102,14 +105,24 @@ const RestoreMnemonic = ({ goToStep }: { goToStep: (step: Step) => void }) => {
                   <GridItem
                     key={index}
                     fontSize="sm"
-                    border="1px dashed #D6D6D6;"
+                    border="1px solid"
+                    borderColor={colors.gray[500]}
                     borderRadius="4px"
+                    bg={colors.gray[800]}
                     p="4px"
+                    height="38px"
                     display="flex"
                   >
-                    <Text p="1px" mr="1px">
+                    <Heading
+                      pt="6px"
+                      width="18px"
+                      textAlign="right"
+                      color={colors.gray[400]}
+                      size="sm"
+                      mr="6px"
+                    >
                       {index + 1}
-                    </Text>
+                    </Heading>
                     <Input
                       autoComplete="off"
                       onPaste={async e => {
@@ -119,7 +132,7 @@ const RestoreMnemonic = ({ goToStep }: { goToStep: (step: Step) => void }) => {
                       }}
                       size="xsmall"
                       border="none"
-                      placeholder="Type here"
+                      placeholder="Type here..."
                       {...register(`word${index}`, {
                         required: true,
                       })}

src/components/Onboarding/showSeedphrase/ShowSeedphrase.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, SimpleGrid, VStack } from "@chakra-ui/react";
+import { Button, Flex, Heading, SimpleGrid, Text, VStack } from "@chakra-ui/react";
 import ModalContentWrapper from "../ModalContentWrapper";
 import { ShowSeedphraseStep, Step, StepType } from "../useOnboardingModal";
 import colors from "../../../style/colors";
@@ -21,19 +21,26 @@ export const ShowSeedphrase = ({
         <SimpleGrid columns={3} spacing={2}>
           {account.mnemonic.split(" ").map((item, index) => {
             return (
-              <Box
+              <Flex
                 key={index}
-                fontSize="sm"
                 width="126px"
-                border="1px dashed #D6D6D6;"
+                border="1px dashed"
+                borderColor={colors.gray[500]}
                 borderRadius="4px"
                 p="6px"
               >
-                <Box float="left" width="30px" textAlign="right" pr="10px" color={colors.gray[450]}>
+                <Heading
+                  width="18px"
+                  textAlign="right"
+                  mr="10px"
+                  pt="2px"
+                  size="sm"
+                  color={colors.gray[450]}
+                >
                   {index + 1}
-                </Box>
-                {item}
-              </Box>
+                </Heading>
+                <Text size="sm">{item}</Text>
+              </Flex>
             );
           })}
         </SimpleGrid>

src/components/Onboarding/verifySeedphrase/VerifySeedphrase.tsx

@@ -51,7 +51,7 @@ const VerifySeedphrase = ({
               </FormControl>
             );
           })}
-          <Button type="submit" w="100%" size="lg" isDisabled={!isValid}>
+          <Button type="submit" w="100%" size="lg" mt="20px" isDisabled={!isValid}>
             Continue
           </Button>
 

src/components/SideNavbar.tsx

@@ -68,13 +68,13 @@ const TotalBalance = () => {
 
 export const SideNavbar = () => {
   return (
-    <Flex flexDirection="column" bg={colors.gray[900]} w="236px" p="20px 30px 30px 30px">
+    <Flex flexDirection="column" bg={colors.gray[900]} w="236px" p="30px 30px 30px 30px">
       <Box>
         <Flex height="30px" justifyContent="space-between" alignItems="center">
           <MakiLogo size={38} />
           <NetworkSelector />
         </Flex>
-        <Divider mt="38px" />
+        <Divider mt="28px" />
       </Box>
       <Flex flexDirection="column" justifyContent="space-between" flex={1}>
         <Box>

src/views/home/AccountsList.test.tsx

@@ -138,8 +138,9 @@ describe("<AccountList />", () => {
     fireEvent.change(nameInput, { target: { value: LABEL } });
     fireEvent.click(screen.getByRole("button", { name: /continue/i }));
 
-    await screen.findByText(/Enter Password to continue/i);
-
+    await waitFor(() => {
+      expect(screen.getByLabelText(/password/i)).toBeInTheDocument();
+    });
     const passwordInput = screen.getByLabelText(/password/i);
 
     fireEvent.change(passwordInput, { target: { value: "myPassword" } });
@@ -158,7 +159,7 @@ describe("<AccountList />", () => {
     fireEvent.click(screen.getByRole("button", { name: /submit/i }));
 
     await waitFor(() => {
-      expect(screen.queryByText(/Enter Password to continue/i)).not.toBeInTheDocument();
+      expect(screen.queryByLabelText(/password/i)).not.toBeInTheDocument();
     });
 
     {