Re-Design (#62)

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

package.json

@@ -22,8 +22,10 @@
     "cz": "cz"
   },
   "dependencies": {
+    "@chakra-ui/anatomy": "^2.2.2",
     "@chakra-ui/icons": "^2.0.17",
     "@chakra-ui/react": "^2.4.9",
+    "@chakra-ui/styled-system": "^2.9.2",
     "@emotion/react": "^11.8.1",
     "@emotion/styled": "^11.8.1",
     "@hookform/resolvers": "^3.4.0",

src/App.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { createHashRouter, redirect, RouterProvider } from 'react-router-dom';
 
-import { ChakraProvider, ColorModeScript, Container } from '@chakra-ui/react';
+import { ChakraProvider, ColorModeScript, Flex } from '@chakra-ui/react';
 
 import IdleAlert from './components/IdleAlert';
 import CreateMnemonicScreen from './screens/createWallet/CreateMnemonicScreen';
@@ -17,6 +17,7 @@ import ImportScreen from './screens/welcome/ImportScreen';
 import WelcomeScreen from './screens/welcome/WelcomeScreen';
 import WelcomeWrapper from './screens/welcome/WelcomeWrapper';
 import useWallet from './store/useWallet';
+import Fonts from './theme/Fonts';
 import theme from './theme';
 
 function App(): JSX.Element {
@@ -104,17 +105,18 @@ function App(): JSX.Element {
 
   return (
     <ChakraProvider theme={theme}>
+      <Fonts />
       <ColorModeScript initialColorMode={theme.config.initialColorMode} />
       <IdleAlert />
-      <Container
-        display="flex"
+      <Flex
         flexDirection="column"
         alignItems="center"
         minH="100vh"
+        w="100vw"
         p={4}
       >
         <RouterProvider router={router} />
-      </Container>
+      </Flex>
     </ChakraProvider>
   );
 }

src/components/AccountSelection.tsx

@@ -5,7 +5,9 @@ import {
   MenuItemOption,
   MenuList,
   MenuOptionGroup,
+  useBreakpointValue,
 } from '@chakra-ui/react';
+import { IconChevronDown } from '@tabler/icons-react';
 
 import { useCurrentHRP } from '../hooks/useNetworkSelectors';
 import { useAccountsList } from '../hooks/useWalletSelectors';
@@ -23,19 +25,22 @@ function AccountSelection(): JSX.Element {
   const { selectedAccount, selectAccount } = useWallet();
   const hrp = useCurrentHRP();
   const accounts = useAccountsList(hrp);
+  const iconSize = useBreakpointValue({ base: 14, md: 24 }, { ssr: false });
 
   return (
     <Menu>
       <MenuButton
         as={Button}
-        variant="outline"
-        ml={2}
-        mb={2}
-        textTransform="uppercase"
-        fontSize="xx-small"
+        variant="ghostGreen"
+        fontSize={{ base: '18px', md: '22px' }}
         float="right"
+        rightIcon={<IconChevronDown size={iconSize} />}
+        px={0}
+        noOfLines={1}
+        justifyContent="center"
+        display="flex"
       >
-        Switch
+        {accounts[selectedAccount]?.displayName ?? 'Switch account'}
       </MenuButton>
       <MenuList minWidth={240} maxW="100vw" maxH="80vh" overflow="auto">
         <MenuOptionGroup

src/components/AddNetworkDrawer.tsx

@@ -140,7 +140,9 @@ function AddNetworkDrawer({ isOpen, onClose }: Props): JSX.Element {
               }
             >
               {!!apiError && (
-                <FormHelperText color="red">{apiError}</FormHelperText>
+                <FormHelperText textColor="brand.red">
+                  {apiError}
+                </FormHelperText>
               )}
             </FormInput>
             <FormInput
@@ -209,10 +211,10 @@ function AddNetworkDrawer({ isOpen, onClose }: Props): JSX.Element {
           </DrawerBody>
 
           <DrawerFooter>
-            <Button variant="outline" mr={3} onClick={close}>
+            <Button variant="whiteModal" mr={3} onClick={close}>
               Cancel
             </Button>
-            <Button type="submit" colorScheme="green" onClick={onSubmit}>
+            <Button type="submit" variant="whiteModal" onClick={onSubmit}>
               Save
             </Button>
           </DrawerFooter>

src/components/BackButton.tsx

@@ -19,6 +19,7 @@ function BackButton({ onClick = noop }: Props): JSX.Element {
         onClick();
         navigate(-1);
       }}
+      variant="ghostWhite"
     >
       Back
     </Button>

src/components/CopyButton.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'react';
 
-import { CopyIcon } from '@chakra-ui/icons';
-import { IconButton, Tooltip } from '@chakra-ui/react';
+import { IconButton, Tooltip, useBreakpointValue } from '@chakra-ui/react';
 import { useCopyToClipboard } from '@uidotdev/usehooks';
+import { IconCopy } from '@tabler/icons-react';
 
 type CopyButtonProps = {
   value: string;
@@ -11,12 +11,14 @@ type CopyButtonProps = {
 function CopyButton({ value }: CopyButtonProps): JSX.Element {
   const [isCopied, setIsCopied] = useState(false);
   const [, copy] = useCopyToClipboard();
+  const iconSize = useBreakpointValue({ base: 14, md: 18 }, { ssr: false });
 
   let timeout: ReturnType<typeof setTimeout>;
 
   return (
     <Tooltip label="Copied" isOpen={isCopied}>
       <IconButton
+        variant="ghostWhite"
         aria-label="Copy to clipboard"
         size="xs"
         onClick={() => {
@@ -28,7 +30,7 @@ function CopyButton({ value }: CopyButtonProps): JSX.Element {
           }, 5000);
         }}
         disabled={isCopied}
-        icon={<CopyIcon />}
+        icon={<IconCopy size={iconSize} />}
         ml={1}
       />
     </Tooltip>

src/components/CreateAccountModal.tsx

@@ -286,12 +286,12 @@ function CreateAccountModal({
   };
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose} isCentered>
+    <Modal isOpen={isOpen} onClose={onClose} isCentered size="lg">
       <Form control={control}>
         <ModalOverlay />
         <ModalContent>
           <ModalCloseButton />
-          <ModalHeader>Create a new Account</ModalHeader>
+          <ModalHeader textAlign="center">Create a new Account</ModalHeader>
           <ModalBody minH={0}>
             <FormInput
               label="Name"
@@ -319,12 +319,21 @@ function CreateAccountModal({
               errors={errors}
               isSubmitted={isSubmitted}
             />
-            <Card variant="outline">
-              <CardBody>{renderTemplateSpecificFields()}</CardBody>
+            <Card shadow={0}>
+              <CardBody
+                pt={2}
+                pr={0}
+                pb={1}
+                pl={0}
+                bg="brand.modalGreen"
+                color="brand.lightGray"
+              >
+                {renderTemplateSpecificFields()}
+              </CardBody>
             </Card>
           </ModalBody>
           <ModalFooter>
-            <Button colorScheme="blue" onClick={submit} ml={2}>
+            <Button onClick={submit} variant="whiteModal" w="full">
               Add
             </Button>
           </ModalFooter>

src/components/CreateKeyPairModal.tsx

@@ -68,12 +68,12 @@ function CreateKeyPairModal({
   );
 
   return (
-    <Modal isOpen={isOpen} onClose={close} isCentered>
+    <Modal isOpen={isOpen} onClose={close} isCentered size="lg">
       <Form control={control}>
         <ModalOverlay />
         <ModalContent>
           <ModalCloseButton />
-          <ModalHeader>Create a new Key Pair</ModalHeader>
+          <ModalHeader textAlign="center">Create a new Key Pair</ModalHeader>
           <ModalBody>
             <Text mb={4}>
               New key pair will be derived from your mnemonics using the
@@ -130,7 +130,13 @@ function CreateKeyPairModal({
             </Checkbox>
           </ModalBody>
           <ModalFooter>
-            <Button colorScheme="blue" onClick={submit} ml={2}>
+            <Button
+              colorScheme="blue"
+              onClick={submit}
+              ml={2}
+              variant="whiteModal"
+              px={10}
+            >
               Add
             </Button>
           </ModalFooter>

src/components/ExplorerButton.tsx

@@ -55,6 +55,8 @@ function ExplorerButton({
       target="_blank"
       icon={<IconWorldSearch size={iconSize} />}
       {...buttonProps}
+      variant="whiteOutline"
+      border="1px"
     />
   );
 }