diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz new file mode 100644 index 0000000..a6ae3f6 Binary files /dev/null and b/.yarn/install-state.gz differ diff --git a/.yarnrc.yml b/.yarnrc.yml new file mode 100644 index 0000000..3186f3f --- /dev/null +++ b/.yarnrc.yml @@ -0,0 +1 @@ +nodeLinker: node-modules diff --git a/package.json b/package.json index 288b5a9..0ab5d5f 100644 --- a/package.json +++ b/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", diff --git a/public/fonts/Univers LT W01 45 Light.otf b/public/fonts/Univers LT W01 45 Light.otf new file mode 100644 index 0000000..e7afd28 Binary files /dev/null and b/public/fonts/Univers LT W01 45 Light.otf differ diff --git a/public/fonts/Univers LT W01 55 Roman.otf b/public/fonts/Univers LT W01 55 Roman.otf new file mode 100644 index 0000000..5a35bbd Binary files /dev/null and b/public/fonts/Univers LT W01 55 Roman.otf differ diff --git a/public/fonts/Univers LT W01 63 Bold Extended.otf b/public/fonts/Univers LT W01 63 Bold Extended.otf new file mode 100644 index 0000000..45ce85e Binary files /dev/null and b/public/fonts/Univers LT W01 63 Bold Extended.otf differ diff --git a/public/fonts/Univers LT W01 65 Bold.otf b/public/fonts/Univers LT W01 65 Bold.otf new file mode 100644 index 0000000..80fb6b4 Binary files /dev/null and b/public/fonts/Univers LT W01 65 Bold.otf differ diff --git a/public/fonts/Univers LT W01 93 X Black Ext.otf b/public/fonts/Univers LT W01 93 X Black Ext.otf new file mode 100644 index 0000000..ec3a338 Binary files /dev/null and b/public/fonts/Univers LT W01 93 X Black Ext.otf differ diff --git a/src/App.tsx b/src/App.tsx index 7947a53..1fbf897 100644 --- a/src/App.tsx +++ b/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 ( + - - + ); } diff --git a/src/assets/logo_white.svg b/src/assets/logo_white.svg index 607fdbc..9e7cb00 100644 --- a/src/assets/logo_white.svg +++ b/src/assets/logo_white.svg @@ -1,12 +1,20 @@ - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + diff --git a/src/components/AccountSelection.tsx b/src/components/AccountSelection.tsx index 2e8f713..5268b8d 100644 --- a/src/components/AccountSelection.tsx +++ b/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 ( } + px={0} + noOfLines={1} + justifyContent="center" + display="flex" > - Switch + {accounts[selectedAccount]?.displayName ?? 'Switch account'} {!!apiError && ( - {apiError} + + {apiError} + )} - - diff --git a/src/components/BackButton.tsx b/src/components/BackButton.tsx index aca4fc2..59fa34b 100644 --- a/src/components/BackButton.tsx +++ b/src/components/BackButton.tsx @@ -19,6 +19,7 @@ function BackButton({ onClick = noop }: Props): JSX.Element { onClick(); navigate(-1); }} + variant="ghostWhite" > Back diff --git a/src/components/CopyButton.tsx b/src/components/CopyButton.tsx index e75afb7..6231f7a 100644 --- a/src/components/CopyButton.tsx +++ b/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; return ( { @@ -28,7 +30,7 @@ function CopyButton({ value }: CopyButtonProps): JSX.Element { }, 5000); }} disabled={isCopied} - icon={} + icon={} ml={1} /> diff --git a/src/components/CreateAccountModal.tsx b/src/components/CreateAccountModal.tsx index 95769e3..06b1a65 100644 --- a/src/components/CreateAccountModal.tsx +++ b/src/components/CreateAccountModal.tsx @@ -286,12 +286,12 @@ function CreateAccountModal({ }; return ( - +
- Create a new Account + Create a new Account - - {renderTemplateSpecificFields()} + + + {renderTemplateSpecificFields()} + - diff --git a/src/components/CreateKeyPairModal.tsx b/src/components/CreateKeyPairModal.tsx index c1de680..7fa5227 100644 --- a/src/components/CreateKeyPairModal.tsx +++ b/src/components/CreateKeyPairModal.tsx @@ -68,12 +68,12 @@ function CreateKeyPairModal({ ); return ( - + - Create a new Key Pair + Create a new Key Pair New key pair will be derived from your mnemonics using the @@ -130,7 +130,13 @@ function CreateKeyPairModal({ - diff --git a/src/components/ExplorerButton.tsx b/src/components/ExplorerButton.tsx index a52a8fe..9cc328f 100644 --- a/src/components/ExplorerButton.tsx +++ b/src/components/ExplorerButton.tsx @@ -55,6 +55,8 @@ function ExplorerButton({ target="_blank" icon={} {...buttonProps} + variant="whiteOutline" + border="1px" /> ); } diff --git a/src/components/FormAddressSelect.tsx b/src/components/FormAddressSelect.tsx index 9fb36c5..5c3b6c6 100644 --- a/src/components/FormAddressSelect.tsx +++ b/src/components/FormAddressSelect.tsx @@ -91,6 +91,7 @@ function FormAddressSelect>({ case Origin.Foreign: return ( >({ case Origin.Local: default: return ( - {accounts.map((acc) => (