Update Header Menu Buttons to match figma

decentdao · Apr 18, 2024 · 17b6c00 · 17b6c00
1 parent 26ba235
commit 17b6c00
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 35 deletions.
diff --git a/src/components/ui/menus/AccountDisplay/MenuButtonDisplay.tsx b/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 } 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')}
+      <CaretDown
+        color="var(--chakra-colors-neutral-8)"
+        size="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}
+      <CaretDown
+        color="var(--chakra-colors-neutral-8)"
+        size="1.5rem"
+      />
     </Flex>
   );
 }

diff --git a/src/components/ui/menus/AccountDisplay/index.tsx b/src/components/ui/menus/AccountDisplay/index.tsx
@@ -1,21 +1,20 @@
-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>
+      <Button
+        as={MenuButton}
+        variant="tertiary"
+        data-testid="header-accountMenu"
+        pr="1rem"
+        my="0.75rem"
+      >
+        <MenuButtonDisplay />
+      </Button>
+      <MenuItems />
     </Menu>
   );
 }
diff --git a/src/components/ui/menus/FavoritesMenu/index.tsx b/src/components/ui/menus/FavoritesMenu/index.tsx
@@ -1,5 +1,5 @@
-import { Flex, Menu, MenuButton, Show, Text } from '@chakra-ui/react';
-import { ArrowDown, StarGoldSolid } from '@decent-org/fractal-ui';
+import { Button, Flex, Menu, MenuButton, Show, Text } from '@chakra-ui/react';
+import { CaretDown, Star } from '@phosphor-icons/react';
 import { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FavoritesList } from './FavoritesList';
@@ -10,31 +10,33 @@ export function FavoritesMenu() {
     <Menu>
       {({ isOpen }) => (
         <Fragment>
-          <MenuButton
+          <Button
+            as={MenuButton}
+            variant="tertiary"
             data-testid="header-favoritesMenuButton"
-            h="full"
-            mx="1.5rem"
-            color="gold.500"
-            _hover={{
-              color: 'gold.500-hover',
-            }}
+            my="0.75rem"
+            mx="1rem"
           >
             <Flex alignItems="center">
-              <StarGoldSolid
-                boxSize="1.5rem"
-                fill="currentColor"
+              <Star
+                size="1.5rem"
+                color="var(--chakra-colors-neutral-8)"
+                weight="fill"
               />
               <Show above="md">
                 <Text
                   mx="0.5rem"
-                  textStyle="text-sm-mono-medium"
+                  textStyle="button-base"
                 >
                   {t('titleFavorites')}
                 </Text>
-                <ArrowDown />
+                <CaretDown
+                  color="var(--chakra-colors-neutral-8)"
+                  size="1.5rem"
+                />
               </Show>
             </Flex>
-          </MenuButton>
+          </Button>
           {isOpen && <FavoritesList />}
         </Fragment>
       )}

diff --git a/src/components/ui/page/Navigation/index.tsx b/src/components/ui/page/Navigation/index.tsx
@@ -15,7 +15,7 @@ function Navigation() {
       justifyContent="space-between"
       flexGrow={1}
     >
-        <Box></Box>
+      <Box></Box>
       <Show above="md">
         <NavigationLinks
           showDAOLinks={showDAOLinks}