Reskin | App Layout and Header

src/components/ui/menus/AccountDisplay/MenuButtonDisplay.tsx

@@ -1,5 +1,5 @@
-import { Box, Flex, Text } from '@chakra-ui/react';
-import { ArrowDown } from '@decent-org/fractal-ui';
+import { Box, Flex, Icon } from '@chakra-ui/react';
+import { CaretDown } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
 import useAvatar from '../../../../hooks/utils/useAvatar';
 import useDisplayName from '../../../../hooks/utils/useDisplayName';
@@ -13,8 +13,11 @@ export function NotConnected() {
       alignItems="center"
       gap="1"
     >
-      <Text textStyle="text-sm-mono-medium">{t('connectWallet')}</Text>
-      <ArrowDown fill="currentColor" />
+      {t('connectWallet')}
+      <Icon
+        as={CaretDown}
+        boxSize="1.5rem"
+      />
     </Flex>
   );
 }
@@ -36,14 +39,17 @@ export function Connected() {
       alignItems="center"
       gap="0.75rem"
     >
-      <Box mt="0.125rem">
+      <Box>
         <Avatar
           address={account}
           url={avatarURL}
         />
       </Box>
-      <Text textStyle="text-sm-mono-semibold">{accountDisplayName}</Text>
-      <ArrowDown fill="currentColor" />
+      {accountDisplayName}
+      <Icon
+        as={CaretDown}
+        boxSize="1.5rem"
+      />
     </Flex>
   );
 }

src/components/ui/menus/AccountDisplay/MenuItemButton.tsx

@@ -1,5 +1,4 @@
-import { Flex, MenuItem, Text } from '@chakra-ui/react';
-import { Fragment } from 'react';
+import { Box, Button, MenuItem, Text } from '@chakra-ui/react';
 
 /**
  * Used to display a simple clickable item to the menu.
@@ -17,27 +16,24 @@ export function MenuItemButton({
   onClick?: () => void;
 }) {
   return (
-    <Fragment>
+    <Box bg="neutral-3">
       <MenuItem
+        as={Button}
+        variant="tertiary"
         cursor="pointer"
-        p="1.5rem"
         data-testid={testId}
         onClick={onClick}
-        border="1px solid"
-        borderColor="chocolate.700"
-        _hover={{
-          color: 'gold.500-hover',
-        }}
+        h="3rem"
+        justifyContent="space-between"
+        rightIcon={
+          <Icon
+            size="1.5rem"
+            data-testid="walletMenu-avatar"
+          />
+        }
       >
-        <Flex
-          alignItems="center"
-          justifyContent="space-between"
-          w="full"
-        >
-          <Text textStyle="text-base-mono-medium">{label}</Text>
-          <Icon boxSize="1.5rem" />
-        </Flex>
+        <Text textStyle="button-base">{label}</Text>
       </MenuItem>
-    </Fragment>
+    </Box>
   );
 }

src/components/ui/menus/AccountDisplay/MenuItemNetwork.tsx

@@ -1,4 +1,5 @@
 import { Box, Flex, Select, Text } from '@chakra-ui/react';
+import { CaretDown } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
 import { useSwitchChain } from 'wagmi';
 import {
@@ -17,41 +18,70 @@ export function MenuItemNetwork() {
   return (
     <Box
       cursor="default"
-      p="1rem 1.5rem"
+      bg="neutral-3"
+      pt="0.5rem"
     >
       <Flex
         direction="column"
         gap="2"
       >
         <Text
-          textStyle="text-sm-sans-regular"
-          color="chocolate.100"
+          px="0.5rem"
+          textStyle="helper-text-small"
+          color="neutral-7"
         >
           {t('network')}
         </Text>
-        <Select
-          mt={4}
-          width="100%"
-          bgColor="#2c2c2c"
-          borderColor="#4d4d4d"
-          data-testid="accountMenu-network"
-          rounded="sm"
-          cursor="pointer"
-          onChange={async e => {
-            e.preventDefault();
-            switchChain({ chainId: Number(e.target.value) });
+        <Box
+          // @dev workaround to style the select component
+          sx={{
+            '.chakra-select__icon-wrapper': {
+              'margin-right': '0.5rem',
+            },
+            '*:hover': {
+              color: 'lilac--1',
+            },
           }}
-          value={chain.id}
         >
-          {supportedNetworks.map(network => (
-            <option
-              key={network.chain.id}
-              value={network.chain.id}
-            >
-              {network.chain.name}
-            </option>
-          ))}
-        </Select>
+          <Select
+            h="3rem"
+            bgColor="transparent"
+            border="none"
+            _hover={{
+              bg: 'white-alpha-04',
+            }}
+            _focus={{
+              border: 'none',
+              bg: 'white-alpha-08',
+              color: 'lilac--2',
+              boxShadow: 'none',
+            }}
+            _active={{
+              border: 'none',
+              bg: 'white-alpha-08',
+              color: 'lilac--2',
+            }}
+            data-testid="accountMenu-network"
+            cursor="pointer"
+            iconSize="1.5rem"
+            icon={<CaretDown />}
+            borderRadius="4px"
+            onChange={async e => {
+              e.preventDefault();
+              switchChain({ chainId: Number(e.target.value) });
+            }}
+            value={chain.id}
+          >
+            {supportedNetworks.map(network => (
+              <option
+                key={network.chain.id}
+                value={network.chain.id}
+              >
+                {network.chain.name}
+              </option>
+            ))}
+          </Select>
+        </Box>
       </Flex>
     </Box>
   );

src/components/ui/menus/AccountDisplay/MenuItemWallet.tsx

@@ -1,11 +1,10 @@
-import { Box, Flex, MenuItem, Text } from '@chakra-ui/react';
-import { Copy } from '@decent-org/fractal-ui';
+import { Box, Button, Flex, MenuItem, Text } from '@chakra-ui/react';
+import { CopySimple } from '@phosphor-icons/react/dist/ssr';
 import { useTranslation } from 'react-i18next';
 import useAvatar from '../../../../hooks/utils/useAvatar';
 import { useCopyText } from '../../../../hooks/utils/useCopyText';
 import useDisplayName from '../../../../hooks/utils/useDisplayName';
 import { useFractal } from '../../../../providers/App/AppProvider';
-import EtherscanLinkAddress from '../../links/EtherscanLinkAddress';
 import Avatar from '../../page/Header/Avatar';
 
 /**
@@ -28,58 +27,46 @@ export function MenuItemWallet() {
   return (
     <Box
       data-testid="accountMenu-wallet"
-      bg="black.900"
       cursor="default"
-      p="1rem 1.5rem"
-      borderBottomRadius="lg"
+      pt="0.5rem"
+      bg="neutral-3"
     >
-      <Flex
-        alignItems="center"
-        justifyContent="space-between"
-        w="full"
+      <Text
+        px="0.5rem"
+        textStyle="helper-text-small"
+        color="neutral-7"
       >
-        <Flex
-          direction="column"
-          gap="2"
-        >
-          <Text
-            textStyle="text-sm-sans-regular"
-            color="chocolate.100"
-          >
-            {t('wallet')}
-          </Text>
-          <MenuItem
-            padding={0}
-            alignItems="center"
-            gap="2"
-            aria-label="copy address"
-            data-testid="walletmenu-copyAddress"
-            onClick={() => copyTextToClipboard(account)}
-            cursor="pointer"
-          >
-            <Text
-              maxWidth="8rem"
-              whiteSpace="nowrap"
-              overflowX="hidden"
-              textOverflow="ellipsis"
-              data-testid="walletMenu-accountDisplay"
-              textStyle="text-base-mono-medium"
-              color="grayscale.100"
-            >
-              {accountDisplayName}
-            </Text>
-            <Copy boxSize="1.5rem" />
-          </MenuItem>
-        </Flex>
-        <EtherscanLinkAddress address={account}>
+        {t('wallet')}
+      </Text>
+      <MenuItem
+        as={Button}
+        variant="tertiary"
+        alignItems="center"
+        aria-label="copy address"
+        data-testid="walletmenu-copyAddress"
+        onClick={() => copyTextToClipboard(account)}
+        whiteSpace="pre-wrap"
+        wordBreak="break-all"
+        h="3rem"
+        textOverflow="ellipsis"
+        rightIcon={
           <Avatar
             size="lg"
             address={account}
             url={avatarURL}
             data-testid="walletMenu-avatar"
           />
-        </EtherscanLinkAddress>
-      </Flex>
+        }
+      >
+        <Flex
+          alignItems="center"
+          gap={2}
+          w="full"
+        >
+          {accountDisplayName}
+          <CopySimple size="1.5rem" />
+        </Flex>
+      </MenuItem>
     </Box>
   );
 }

src/components/ui/menus/AccountDisplay/MenuItems.tsx

@@ -1,5 +1,5 @@
-import { MenuList } from '@chakra-ui/react';
-import { Connect, Disconnect } from '@decent-org/fractal-ui';
+import { Divider, MenuList } from '@chakra-ui/react';
+import { Link, Plugs } from '@phosphor-icons/react';
 import { useWeb3Modal } from '@web3modal/wagmi/react';
 import { useTranslation } from 'react-i18next';
 import { useDisconnect } from 'wagmi';
@@ -18,37 +18,34 @@ export function MenuItems() {
 
   return (
     <MenuList
-      p="0"
       w="16.25rem"
-      rounded="lg"
-      shadow="menu-gold"
-      mr={['auto', '1rem']}
-      bg="grayscale.black"
-      border="none"
-      sx={{
-        '& > :nth-of-type(1)': {
-          borderTopRadius: 'lg',
-        },
-        '& > :last-child': {
-          borderBottomRadius: 'lg',
-        },
-      }}
+      rounded="0.5rem"
+      boxShadow="0px 1px 0px 0px var(--chakra-colors-neutral-1)"
+      bg="rgba(38, 33, 42, 0.74)"
+      border="1px solid"
+      borderColor="neutral-3"
     >
-      {user.address && <MenuItemWallet />}
+      {user.address && (
+        <>
+          <MenuItemWallet />
+          <Divider color="neutral-3" />
+        </>
+      )}
       <MenuItemNetwork />
+      <Divider color="neutral-3" />
       {!user.address && (
         <MenuItemButton
           testId="accountMenu-connect"
           label={t('connect')}
-          Icon={Connect}
+          Icon={Link}
           onClick={() => open()}
         />
       )}
       {user.address && (
         <MenuItemButton
           testId="accountMenu-disconnect"
           label={t('disconnect')}
-          Icon={Disconnect}
+          Icon={Plugs}
           onClick={disconnect}
         />
       )}

src/components/ui/menus/AccountDisplay/index.tsx

@@ -1,21 +1,22 @@
-import { Menu, MenuButton } from '@chakra-ui/react';
-import { Fragment } from 'react';
+import { Button, Menu, MenuButton } from '@chakra-ui/react';
 import { MenuButtonDisplay } from './MenuButtonDisplay';
 import { MenuItems } from './MenuItems';
 
 export function AccountDisplay() {
   return (
-    <Menu>
-      <Fragment>
-        <MenuButton
-          data-testid="header-accountMenu"
-          pr="1rem"
-          _hover={{ color: 'gold.200' }}
-        >
-          <MenuButtonDisplay />
-        </MenuButton>
-        <MenuItems />
-      </Fragment>
+    <Menu
+      placement="bottom-end"
+      offset={[0, 16]}
+    >
+      <Button
+        as={MenuButton}
+        variant="tertiary"
+        data-testid="header-accountMenu"
+        pr="1rem"
+      >
+        <MenuButtonDisplay />
+      </Button>
+      <MenuItems />
     </Menu>
   );
 }