From 3da016e35eec7459304f4148acfd2d5402e3cb8b Mon Sep 17 00:00:00 2001
From: David Colon <38386583+Da-Colon@users.noreply.github.com>
Date: Wed, 17 Apr 2024 15:37:08 -0400
Subject: [PATCH 01/17] reaarange header and footer

---
 src/components/ui/page/Header/index.tsx     | 117 +++++++++++++++++-
 src/components/ui/page/Layout/index.tsx     |  10 +-
 src/components/ui/page/Navigation/index.tsx | 126 +++-----------------
 3 files changed, 135 insertions(+), 118 deletions(-)

diff --git a/src/components/ui/page/Header/index.tsx b/src/components/ui/page/Header/index.tsx
index 1b6595da76..bfe1a63f96 100644
--- a/src/components/ui/page/Header/index.tsx
+++ b/src/components/ui/page/Header/index.tsx
@@ -1,8 +1,122 @@
-import { Flex, Show } from '@chakra-ui/react';
+import {
+  Box,
+  Divider,
+  Drawer,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerOverlay,
+  Flex,
+  Hide,
+  IconButton,
+  Show,
+  useDisclosure,
+} from '@chakra-ui/react';
+import { FractalBrandBurger, FractalBrand } from '@decent-org/fractal-ui';
+import { useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { BASE_ROUTES } from '../../../../constants/routes';
+import { useFractal } from '../../../../providers/App/AppProvider';
 import { AccountDisplay } from '../../menus/AccountDisplay';
 import { DAOSearch } from '../../menus/DAOSearch';
 import { FavoritesMenu } from '../../menus/FavoritesMenu';
+import { NavigationLinks } from '../Navigation/NavigationLinks';
 
+function HeaderLogo() {
+  const { t } = useTranslation('navigation');
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const btnRef = useRef<HTMLButtonElement | null>(null);
+
+  const {
+    node: { daoAddress },
+  } = useFractal();
+
+  const showDAOLinks = !!daoAddress;
+  return (
+    <Flex
+      alignItems="center"
+      direction="column"
+      justifyContent="space-between"
+      flexGrow={1}
+    >
+      <Hide above="md">
+        <>
+          <IconButton
+            ref={btnRef}
+            onClick={onOpen}
+            display="flex"
+            boxSize="4rem"
+            justifyContent="center"
+            alignItems="center"
+            aria-label="navigation"
+            minW={0}
+            variant="unstyled"
+            icon={
+              <FractalBrandBurger
+                aria-hidden
+                boxSize="2rem"
+              />
+            }
+          />
+          <Drawer
+            placement="left"
+            isOpen={isOpen}
+            onClose={onClose}
+            size="full"
+            isFullHeight
+          >
+            <DrawerOverlay />
+            <DrawerContent
+              bg="chocolate.900"
+              border="none"
+            >
+              <DrawerCloseButton
+                size="lg"
+                zIndex="banner"
+              />
+
+              <Box
+                mt={12}
+                px={8}
+                position="relative"
+              >
+                <DAOSearch closeDrawer={onClose} />
+              </Box>
+              <Flex
+                alignItems="center"
+                direction="column"
+                justifyContent={showDAOLinks ? 'space-evenly' : 'flex-start'}
+                flexGrow={1}
+                overflowY="auto"
+                px={8}
+                pt={8}
+              >
+                <Divider color="chocolate.700" />
+                <NavigationLinks
+                  showDAOLinks={showDAOLinks}
+                  address={daoAddress}
+                  closeDrawer={onClose}
+                />
+              </Flex>
+            </DrawerContent>
+          </Drawer>
+        </>
+      </Hide>
+      <Show above="md">
+        <Link
+          data-testid="navigationLogo-homeLink"
+          to={BASE_ROUTES.landing}
+          aria-label={t('ariaLabelFractalBrand')}
+        >
+          <FractalBrand
+            aria-hidden
+            boxSize="4.25rem"
+          />
+        </Link>
+      </Show>
+    </Flex>
+  );
+}
 function Header() {
   return (
     <Flex
@@ -12,6 +126,7 @@ function Header() {
       pe="0.5rem"
       alignItems="center"
     >
+      <HeaderLogo />
       <Show above="md">
         <DAOSearch />
       </Show>
diff --git a/src/components/ui/page/Layout/index.tsx b/src/components/ui/page/Layout/index.tsx
index d267c0f34f..389244764e 100644
--- a/src/components/ui/page/Layout/index.tsx
+++ b/src/components/ui/page/Layout/index.tsx
@@ -8,9 +8,9 @@ export default function Layout() {
   return (
     <Grid
       templateAreas={{
-        base: `"nav header"
+        base: `"header header"
 "main main"`,
-        md: `"nav header"
+        md: `"header header"
 "nav main"`,
       }}
       gridTemplateColumns="4.25rem 1fr"
@@ -33,12 +33,11 @@ export default function Layout() {
       </GridItem>
       <GridItem area={'header'}>
         <Box
-          as="header"
-          bg="chocolate.900"
+          bg="#26212AD6"
           h="4rem"
           position="fixed"
           zIndex={5}
-          w="calc(100% - 4.25rem)"
+          w="full"
         >
           <Header />
         </Box>
@@ -49,7 +48,6 @@ export default function Layout() {
         display="flex"
         flexDirection="column"
         flexGrow="1"
-        bg="chocolate.900"
         position="fixed"
         w="4.25rem"
         minHeight={{ base: undefined, md: '100vh' }}
diff --git a/src/components/ui/page/Navigation/index.tsx b/src/components/ui/page/Navigation/index.tsx
index e83bec9175..daa7151fea 100644
--- a/src/components/ui/page/Navigation/index.tsx
+++ b/src/components/ui/page/Navigation/index.tsx
@@ -1,124 +1,28 @@
-import {
-  Box,
-  Divider,
-  Drawer,
-  DrawerCloseButton,
-  DrawerContent,
-  DrawerOverlay,
-  Flex,
-  Hide,
-  IconButton,
-  Show,
-  useDisclosure,
-} from '@chakra-ui/react';
-import { FractalBrandBurger, FractalBrand } from '@decent-org/fractal-ui';
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
-import { BASE_ROUTES } from '../../../../constants/routes';
+import { Box, Flex, Show } from '@chakra-ui/react';
 import { useFractal } from '../../../../providers/App/AppProvider';
-import { DAOSearch } from '../../menus/DAOSearch';
 import { NavigationLinks } from './NavigationLinks';
 
 function Navigation() {
-  const { t } = useTranslation('navigation');
-  const { isOpen, onOpen, onClose } = useDisclosure();
-  const btnRef = React.useRef<HTMLButtonElement | null>(null);
-
   const {
     node: { daoAddress },
   } = useFractal();
 
   const showDAOLinks = !!daoAddress;
   return (
-    <>
-      <Flex
-        alignItems="center"
-        direction="column"
-        justifyContent="space-between"
-        flexGrow={1}
-      >
-        <Hide above="md">
-          <>
-            <IconButton
-              ref={btnRef}
-              onClick={onOpen}
-              display="flex"
-              boxSize="4rem"
-              justifyContent="center"
-              alignItems="center"
-              aria-label="navigation"
-              minW={0}
-              variant="unstyled"
-              icon={
-                <FractalBrandBurger
-                  aria-hidden
-                  boxSize="2rem"
-                />
-              }
-            />
-            <Drawer
-              placement="left"
-              isOpen={isOpen}
-              onClose={onClose}
-              size="full"
-              isFullHeight
-            >
-              <DrawerOverlay />
-              <DrawerContent
-                bg="chocolate.900"
-                border="none"
-              >
-                <DrawerCloseButton
-                  size="lg"
-                  zIndex="banner"
-                />
-
-                <Box
-                  mt={12}
-                  px={8}
-                  position="relative"
-                >
-                  <DAOSearch closeDrawer={onClose} />
-                </Box>
-                <Flex
-                  alignItems="center"
-                  direction="column"
-                  justifyContent={showDAOLinks ? 'space-evenly' : 'flex-start'}
-                  flexGrow={1}
-                  overflowY="auto"
-                  px={8}
-                  pt={8}
-                >
-                  <Divider color="chocolate.700" />
-                  <NavigationLinks
-                    showDAOLinks={showDAOLinks}
-                    address={daoAddress}
-                    closeDrawer={onClose}
-                  />
-                </Flex>
-              </DrawerContent>
-            </Drawer>
-          </>
-        </Hide>
-        <Show above="md">
-          <Link
-            data-testid="navigationLogo-homeLink"
-            to={BASE_ROUTES.landing}
-            aria-label={t('ariaLabelFractalBrand')}
-          >
-            <FractalBrand
-              aria-hidden
-              boxSize="4.25rem"
-            />
-          </Link>
-          <NavigationLinks
-            showDAOLinks={showDAOLinks}
-            address={daoAddress}
-          />
-        </Show>
-      </Flex>
-    </>
+    <Flex
+      alignItems="center"
+      direction="column"
+      justifyContent="space-between"
+      flexGrow={1}
+    >
+        <Box></Box>
+      <Show above="md">
+        <NavigationLinks
+          showDAOLinks={showDAOLinks}
+          address={daoAddress}
+        />
+      </Show>
+    </Flex>
   );
 }
 

From 0f54af645bd532a0d2991f7820939b56a530eb82 Mon Sep 17 00:00:00 2001
From: David Colon <38386583+Da-Colon@users.noreply.github.com>
Date: Wed, 17 Apr 2024 15:42:36 -0400
Subject: [PATCH 02/17] replace logo

---
 src/components/ui/page/Header/index.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/ui/page/Header/index.tsx b/src/components/ui/page/Header/index.tsx
index bfe1a63f96..a7f42f9c5f 100644
--- a/src/components/ui/page/Header/index.tsx
+++ b/src/components/ui/page/Header/index.tsx
@@ -11,7 +11,7 @@ import {
   Show,
   useDisclosure,
 } from '@chakra-ui/react';
-import { FractalBrandBurger, FractalBrand } from '@decent-org/fractal-ui';
+import { DecentLogo } from '@decent-org/fractal-ui';
 import { useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
@@ -52,7 +52,7 @@ function HeaderLogo() {
             minW={0}
             variant="unstyled"
             icon={
-              <FractalBrandBurger
+              <DecentLogo
                 aria-hidden
                 boxSize="2rem"
               />
@@ -108,7 +108,7 @@ function HeaderLogo() {
           to={BASE_ROUTES.landing}
           aria-label={t('ariaLabelFractalBrand')}
         >
-          <FractalBrand
+          <DecentLogo
             aria-hidden
             boxSize="4.25rem"
           />

From 11c06973c230218b77fa27a46e3a5d120c353f0b Mon Sep 17 00:00:00 2001
From: David Colon <38386583+Da-Colon@users.noreply.github.com>
Date: Wed, 17 Apr 2024 20:52:39 -0400
Subject: [PATCH 03/17] adjust header height; adjust DecentLogo size

---
 src/components/ui/page/Header/index.tsx | 7 +++++--
 src/constants/common.ts                 | 2 +-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/ui/page/Header/index.tsx b/src/components/ui/page/Header/index.tsx
index a7f42f9c5f..8bf946c0cf 100644
--- a/src/components/ui/page/Header/index.tsx
+++ b/src/components/ui/page/Header/index.tsx
@@ -54,7 +54,8 @@ function HeaderLogo() {
             icon={
               <DecentLogo
                 aria-hidden
-                boxSize="2rem"
+                h="2.5rem"
+                w="2.125rem"
               />
             }
           />
@@ -110,7 +111,9 @@ function HeaderLogo() {
         >
           <DecentLogo
             aria-hidden
-            boxSize="4.25rem"
+            h="2.5rem"
+            w="2.125rem"
+            mx="2rem"
           />
         </Link>
       </Show>
diff --git a/src/constants/common.ts b/src/constants/common.ts
index c50e79f836..3c481ffe9d 100644
--- a/src/constants/common.ts
+++ b/src/constants/common.ts
@@ -1,4 +1,4 @@
-export const HEADER_HEIGHT = '4rem';
+export const HEADER_HEIGHT = '4.5rem';
 export const CONTENT_HEIGHT = `calc(100vh - ${HEADER_HEIGHT})`;
 export const BACKGROUND_SEMI_TRANSPARENT = 'black.900-semi-transparent';
 /**

From 26ba23553b5318af4b1f57ad229778e0ba12dd69 Mon Sep 17 00:00:00 2001
From: David Colon <38386583+Da-Colon@users.noreply.github.com>
Date: Wed, 17 Apr 2024 20:53:01 -0400
Subject: [PATCH 04/17] update DAO Search position and Update icon

---
 src/components/ui/menus/DAOSearch/index.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/ui/menus/DAOSearch/index.tsx b/src/components/ui/menus/DAOSearch/index.tsx
index e6c1fca388..bab64f7f98 100644
--- a/src/components/ui/menus/DAOSearch/index.tsx
+++ b/src/components/ui/menus/DAOSearch/index.tsx
@@ -8,7 +8,7 @@ import {
   useDisclosure,
   useOutsideClick,
 } from '@chakra-ui/react';
-import { Search } from '@decent-org/fractal-ui';
+import { MagnifyingGlass } from '@phosphor-icons/react';
 import React, { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSearchDao } from '../../../../hooks/DAO/useSearchDao';
@@ -41,7 +41,7 @@ export function DAOSearch({ closeDrawer }: { closeDrawer?: () => void }) {
       ref={ref}
       width="full"
       maxW={{ base: 'full', md: '31.125rem' }}
-      height="4rem"
+      height="full"
     >
       <Popover
         matchWidth
@@ -54,9 +54,9 @@ export function DAOSearch({ closeDrawer }: { closeDrawer?: () => void }) {
             justifyContent="center"
           >
             <InputLeftElement mt="3">
-              <Search
-                boxSize="1.5rem"
-                color="grayscale.300"
+              <MagnifyingGlass
+                size="1.5rem"
+                color="var(--chakra-colors-neutral-5)"
               />
             </InputLeftElement>
             <Input

From 17b6c00780ecaff1dec7f4975ecc16269c94fc7f Mon Sep 17 00:00:00 2001
From: David Colon <38386583+Da-Colon@users.noreply.github.com>
Date: Wed, 17 Apr 2024 22:39:12 -0400
Subject: [PATCH 05/17] Update Header Menu Buttons to match figma

---
 .../AccountDisplay/MenuButtonDisplay.tsx      | 20 ++++++++----
 .../ui/menus/AccountDisplay/index.tsx         | 23 +++++++------
 .../ui/menus/FavoritesMenu/index.tsx          | 32 ++++++++++---------
 src/components/ui/page/Navigation/index.tsx   |  2 +-
 4 files changed, 42 insertions(+), 35 deletions(-)

diff --git a/src/components/ui/menus/AccountDisplay/MenuButtonDisplay.tsx b/src/components/ui/menus/AccountDisplay/MenuButtonDisplay.tsx
index 91030b445a..e66368a4ce 100644
--- 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
index d4e1da528c..346eba0384 100644
--- 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
index d2f4a4ed33..0b01639f87 100644
--- 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
index daa7151fea..61c600b5a4 100644
--- 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}

From eff489f0debfc16bd82e162575e5d13646bb8e38 Mon Sep 17 00:00:00 2001
From: David Colon <38386583+Da-Colon@users.noreply.github.com>
Date: Thu, 18 Apr 2024 22:36:23 -0400
Subject: [PATCH 06/17] centers header content

---
 src/components/ui/menus/DAOSearch/index.tsx | 2 +-
 src/components/ui/page/Header/index.tsx     | 4 +---
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/ui/menus/DAOSearch/index.tsx b/src/components/ui/menus/DAOSearch/index.tsx
index bab64f7f98..f74c08904d 100644
--- a/src/components/ui/menus/DAOSearch/index.tsx
+++ b/src/components/ui/menus/DAOSearch/index.tsx
@@ -53,7 +53,7 @@ export function DAOSearch({ closeDrawer }: { closeDrawer?: () => void }) {
             flexDirection="column"
             justifyContent="center"
           >
-            <InputLeftElement mt="3">
+            <InputLeftElement>
               <MagnifyingGlass
                 size="1.5rem"
                 color="var(--chakra-colors-neutral-5)"
diff --git a/src/components/ui/page/Header/index.tsx b/src/components/ui/page/Header/index.tsx
index 8bf946c0cf..a2d2956a47 100644
--- a/src/components/ui/page/Header/index.tsx
+++ b/src/components/ui/page/Header/index.tsx
@@ -123,10 +123,9 @@ function HeaderLogo() {
 function Header() {
   return (
     <Flex
-      h="full"
       w="full"
       justifyContent="space-between"
-      pe="0.5rem"
+      pr="1.5rem"
       alignItems="center"
     >
       <HeaderLogo />
@@ -134,7 +133,6 @@ function Header() {
         <DAOSearch />
       </Show>
       <Flex
-        h="full"
         w="full"
         justifyContent="flex-end"
       >

From 9d8722e74006b877d2438c47dc530d026a491b27 Mon Sep 17 00:00:00 2001
From: David Colon <38386583+Da-Colon@users.noreply.github.com>
Date: Thu, 18 Apr 2024 22:40:21 -0400
Subject: [PATCH 07/17] adjust decent logo

---
 src/components/ui/page/Header/index.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/ui/page/Header/index.tsx b/src/components/ui/page/Header/index.tsx
index a2d2956a47..9f8de3a01b 100644
--- a/src/components/ui/page/Header/index.tsx
+++ b/src/components/ui/page/Header/index.tsx
@@ -44,10 +44,8 @@ function HeaderLogo() {
           <IconButton
             ref={btnRef}
             onClick={onOpen}
-            display="flex"
             boxSize="4rem"
-            justifyContent="center"
-            alignItems="center"
+            w={0}
             aria-label="navigation"
             minW={0}
             variant="unstyled"
@@ -56,6 +54,7 @@ function HeaderLogo() {
                 aria-hidden
                 h="2.5rem"
                 w="2.125rem"
+                mx="1.75rem"
               />
             }
           />
@@ -113,7 +112,7 @@ function HeaderLogo() {
             aria-hidden
             h="2.5rem"
             w="2.125rem"
-            mx="2rem"
+            mx="1.75rem"
           />
         </Link>
       </Show>

From f86e2a0b61c7feeef6a32b1841f3a9554ddc84c4 Mon Sep 17 00:00:00 2001
From: David Colon <38386583+Da-Colon@users.noreply.github.com>
Date: Thu, 18 Apr 2024 22:52:38 -0400
Subject: [PATCH 08/17] small header adjustment

---
 src/components/ui/menus/AccountDisplay/index.tsx | 1 -
 src/components/ui/menus/FavoritesMenu/index.tsx  | 1 -
 src/components/ui/page/Header/index.tsx          | 5 ++++-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/ui/menus/AccountDisplay/index.tsx b/src/components/ui/menus/AccountDisplay/index.tsx
index 346eba0384..d93a92b90c 100644
--- a/src/components/ui/menus/AccountDisplay/index.tsx
+++ b/src/components/ui/menus/AccountDisplay/index.tsx
@@ -10,7 +10,6 @@ export function AccountDisplay() {
         variant="tertiary"
         data-testid="header-accountMenu"
         pr="1rem"
-        my="0.75rem"
       >
         <MenuButtonDisplay />
       </Button>
diff --git a/src/components/ui/menus/FavoritesMenu/index.tsx b/src/components/ui/menus/FavoritesMenu/index.tsx
index 0b01639f87..ae2c18a9b5 100644
--- a/src/components/ui/menus/FavoritesMenu/index.tsx
+++ b/src/components/ui/menus/FavoritesMenu/index.tsx
@@ -14,7 +14,6 @@ export function FavoritesMenu() {
             as={MenuButton}
             variant="tertiary"
             data-testid="header-favoritesMenuButton"
-            my="0.75rem"
             mx="1rem"
           >
             <Flex alignItems="center">
diff --git a/src/components/ui/page/Header/index.tsx b/src/components/ui/page/Header/index.tsx
index 9f8de3a01b..94e7d822e9 100644
--- a/src/components/ui/page/Header/index.tsx
+++ b/src/components/ui/page/Header/index.tsx
@@ -15,6 +15,7 @@ import { DecentLogo } from '@decent-org/fractal-ui';
 import { useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
+import { HEADER_HEIGHT } from '../../../../constants/common';
 import { BASE_ROUTES } from '../../../../constants/routes';
 import { useFractal } from '../../../../providers/App/AppProvider';
 import { AccountDisplay } from '../../menus/AccountDisplay';
@@ -124,8 +125,8 @@ function Header() {
     <Flex
       w="full"
       justifyContent="space-between"
-      pr="1.5rem"
       alignItems="center"
+      pr="1.5rem"
     >
       <HeaderLogo />
       <Show above="md">
@@ -133,7 +134,9 @@ function Header() {
       </Show>
       <Flex
         w="full"
+        h={HEADER_HEIGHT}
         justifyContent="flex-end"
+        alignItems="center"
       >
         <FavoritesMenu />
         <AccountDisplay />

From 29ee8b3bd83a25936ca8bf4e79ad82eb5fafad83 Mon Sep 17 00:00:00 2001
From: David Colon <38386583+Da-Colon@users.noreply.github.com>
Date: Thu, 18 Apr 2024 23:22:21 -0400
Subject: [PATCH 09/17] add blur to header

---
 src/components/ui/page/Layout/index.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/ui/page/Layout/index.tsx b/src/components/ui/page/Layout/index.tsx
index 389244764e..cf993b2899 100644
--- a/src/components/ui/page/Layout/index.tsx
+++ b/src/components/ui/page/Layout/index.tsx
@@ -35,6 +35,11 @@ export default function Layout() {
         <Box
           bg="#26212AD6"
           h="4rem"
+          sx={{
+            '& > *': {
+              backdropFilter: 'blur(12px)',
+            },
+          }}
           position="fixed"
           zIndex={5}
           w="full"

From 805afe1a9da2008e567173ae31989b1c72b4bddd Mon Sep 17 00:00:00 2001
From: David Colon <38386583+Da-Colon@users.noreply.github.com>
Date: Fri, 19 Apr 2024 21:22:52 -0400
Subject: [PATCH 10/17] replace `sx` property with `backdropFilter`

---
 src/components/ui/page/Layout/index.tsx | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/components/ui/page/Layout/index.tsx b/src/components/ui/page/Layout/index.tsx
index cf993b2899..1098e8ac30 100644
--- a/src/components/ui/page/Layout/index.tsx
+++ b/src/components/ui/page/Layout/index.tsx
@@ -34,12 +34,7 @@ export default function Layout() {
       <GridItem area={'header'}>
         <Box
           bg="#26212AD6"
-          h="4rem"
-          sx={{
-            '& > *': {
-              backdropFilter: 'blur(12px)',
-            },
-          }}
+          backdropFilter="blur(12px)"
           position="fixed"
           zIndex={5}
           w="full"

From 0de9cadd6fdd0b4cdcef2784778b17d0d50bf8a8 Mon Sep 17 00:00:00 2001
From: David Colon <38386583+Da-Colon@users.noreply.github.com>
Date: Thu, 18 Apr 2024 22:32:30 -0400
Subject: [PATCH 11/17] Update Wallet Menu with new styles

---
 .../menus/AccountDisplay/MenuItemButton.tsx   | 32 ++++----
 .../menus/AccountDisplay/MenuItemNetwork.tsx  | 43 ++++++++--
 .../menus/AccountDisplay/MenuItemWallet.tsx   | 79 ++++++++-----------
 .../ui/menus/AccountDisplay/MenuItems.tsx     | 25 +++---
 4 files changed, 97 insertions(+), 82 deletions(-)

diff --git a/src/components/ui/menus/AccountDisplay/MenuItemButton.tsx b/src/components/ui/menus/AccountDisplay/MenuItemButton.tsx
index 7c869082be..7a47140e44 100644
--- a/src/components/ui/menus/AccountDisplay/MenuItemButton.tsx
+++ b/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>
   );
 }
diff --git a/src/components/ui/menus/AccountDisplay/MenuItemNetwork.tsx b/src/components/ui/menus/AccountDisplay/MenuItemNetwork.tsx
index b86d21dd58..e8f70f62b7 100644
--- a/src/components/ui/menus/AccountDisplay/MenuItemNetwork.tsx
+++ b/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,26 +18,52 @@ export function MenuItemNetwork() {
   return (
     <Box
       cursor="default"
-      p="1rem 1.5rem"
+      bg="neutral-3"
+      pt="0.5rem"
     >
       <Flex
         direction="column"
         gap="2"
+        // @dev Not my favorite way to do this, but it's the only way to target the icon and adjust the margin without using a custom theme
+        sx={{
+          '.chakra-select__icon-wrapper': {
+            'margin-right': '0.5rem',
+          },
+          '*:hover': {
+            'color': 'lilac--1',
+          },
+        }}
       >
         <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"
+          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"
-          rounded="sm"
           cursor="pointer"
+          iconSize="1.5rem"
+          icon={<CaretDown />}
+          borderRadius="4px"
           onChange={async e => {
             e.preventDefault();
             switchChain({ chainId: Number(e.target.value) });
diff --git a/src/components/ui/menus/AccountDisplay/MenuItemWallet.tsx b/src/components/ui/menus/AccountDisplay/MenuItemWallet.tsx
index 10b4657bae..8e108b4fd6 100644
--- a/src/components/ui/menus/AccountDisplay/MenuItemWallet.tsx
+++ b/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"
+      bg="neutral-3"
       cursor="default"
-      p="1rem 1.5rem"
-      borderBottomRadius="lg"
+      pt="0.5rem"
     >
-      <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>
   );
 }
diff --git a/src/components/ui/menus/AccountDisplay/MenuItems.tsx b/src/components/ui/menus/AccountDisplay/MenuItems.tsx
index e295992612..2e44b64b59 100644
--- a/src/components/ui/menus/AccountDisplay/MenuItems.tsx
+++ b/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,13 +18,12 @@ export function MenuItems() {
 
   return (
     <MenuList
-      p="0"
       w="16.25rem"
       rounded="lg"
-      shadow="menu-gold"
-      mr={['auto', '1rem']}
-      bg="grayscale.black"
-      border="none"
+      boxShadow="0px 1px 0px 0px var(--chakra-colors-neutral-1)"
+      bg="rgba(38, 33, 42, 0.74)"
+      border="1px solid"
+      borderColor="neutral-3"
       sx={{
         '& > :nth-of-type(1)': {
           borderTopRadius: 'lg',
@@ -34,13 +33,19 @@ export function MenuItems() {
         },
       }}
     >
-      {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()}
         />
       )}
@@ -48,7 +53,7 @@ export function MenuItems() {
         <MenuItemButton
           testId="accountMenu-disconnect"
           label={t('disconnect')}
-          Icon={Disconnect}
+          Icon={Plugs}
           onClick={disconnect}
         />
       )}

From f5a484842f9b4189ba54f6412c0874a597f14c22 Mon Sep 17 00:00:00 2001
From: David Colon <38386583+Da-Colon@users.noreply.github.com>
Date: Fri, 19 Apr 2024 21:21:50 -0400
Subject: [PATCH 12/17] update favorites menu to new style

---
 .../ui/menus/FavoritesMenu/Favorite.tsx       | 43 +++++++------------
 .../ui/menus/FavoritesMenu/FavoritesList.tsx  | 34 +++++++--------
 .../ui/menus/FavoritesMenu/index.tsx          | 37 ++++++++--------
 3 files changed, 52 insertions(+), 62 deletions(-)

diff --git a/src/components/ui/menus/FavoritesMenu/Favorite.tsx b/src/components/ui/menus/FavoritesMenu/Favorite.tsx
index 6ccb8f0700..1df2294532 100644
--- a/src/components/ui/menus/FavoritesMenu/Favorite.tsx
+++ b/src/components/ui/menus/FavoritesMenu/Favorite.tsx
@@ -1,5 +1,5 @@
-import { MenuItem, Text } from '@chakra-ui/react';
-import { StarGoldSolid } from '@decent-org/fractal-ui';
+import { Box, Button, MenuItem } from '@chakra-ui/react';
+import { Star } from '@phosphor-icons/react';
 import { useNavigate } from 'react-router-dom';
 import { DAO_ROUTES } from '../../../../constants/routes';
 import useDAOName from '../../../../hooks/DAO/useDAOName';
@@ -20,33 +20,22 @@ export function Favorite({ network, address }: IFavorite) {
   };
 
   return (
-    <MenuItem
-      display="flex"
-      alignItems="center"
-      gap="2"
-      my={1}
-      width="full"
-      px="0px"
-      onClick={onClickNav}
-      data-testid={'favorites-' + daoRegistryName}
-    >
-      <StarGoldSolid
-        color="gold.500"
-        _hover={{
-          color: 'gold.500-hover',
-        }}
-      />
-      <Text
-        maxWidth="9rem"
+    <Box bg="neutral-3">
+      <MenuItem
+        as={Button}
+        variant="tertiary"
+        h="3rem"
+        onClick={onClickNav}
         noOfLines={1}
-        color="grayscale.100"
-        textStyle="text-base-sans-medium"
-        _hover={{
-          color: 'gold.500-hover',
-        }}
+        data-testid={'favorites-' + daoRegistryName}
+        maxWidth="12rem"
+        display="flex"
+        alignItems="center"
+        gap={2}
       >
+        <Star size="1.5rem" weight="fill" />
         {daoRegistryName}
-      </Text>
-    </MenuItem>
+      </MenuItem>
+    </Box>
   );
 }
diff --git a/src/components/ui/menus/FavoritesMenu/FavoritesList.tsx b/src/components/ui/menus/FavoritesMenu/FavoritesList.tsx
index c3227c02af..d02029b79f 100644
--- a/src/components/ui/menus/FavoritesMenu/FavoritesList.tsx
+++ b/src/components/ui/menus/FavoritesMenu/FavoritesList.tsx
@@ -11,46 +11,46 @@ export function FavoritesList() {
   const { t } = useTranslation('dashboard');
   return (
     <MenuList
-      rounded="lg"
-      shadow="menu-gold"
-      mr={['auto', '1rem']}
-      bg="grayscale.black"
-      border="none"
-      padding="0rem"
+      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"
     >
       <Box>
         {favoritesList.length === 0 ? (
           <Box p="1rem 1rem">{t('emptyFavorites')}</Box>
         ) : (
           <Box
-            p="0.5rem 1rem"
             maxHeight="20rem"
             overflowY="scroll"
             sx={{
               '&::-webkit-scrollbar': {
-                background: 'transparent',
+                background: 'neutral-3',
                 width: '0.5rem',
                 height: '0.5rem',
               },
               '&::-webkit-scrollbar-thumb': {
                 border: 'none',
                 boxShadow: 'none',
-                background: 'grayscale.500',
+                background: 'neutral-4',
                 borderRadius: '0.5rem',
                 minHeight: '2.5rem',
               },
               '&::-webkit-scrollbar-thumb:hover': {
-                backgroundColor: 'grayscale.300',
+                backgroundColor: 'neutral-4',
               },
             }}
           >
-            {favoritesList.map(favorite => (
-              <Favorite
-                key={favorite}
-                network={addressPrefix}
-                address={favorite}
-              />
-            ))}
+            {favoritesList.map(
+              favorite => (
+                <Favorite
+                  key={favorite}
+                  network={addressPrefix}
+                  address={favorite}
+                />
+              ),
+            )}
           </Box>
         )}
       </Box>
diff --git a/src/components/ui/menus/FavoritesMenu/index.tsx b/src/components/ui/menus/FavoritesMenu/index.tsx
index ae2c18a9b5..cdd123b09f 100644
--- a/src/components/ui/menus/FavoritesMenu/index.tsx
+++ b/src/components/ui/menus/FavoritesMenu/index.tsx
@@ -1,4 +1,4 @@
-import { Button, Flex, Menu, MenuButton, Show, Text } from '@chakra-ui/react';
+import { Button, Flex, Icon, Menu, MenuButton, Show, Text } from '@chakra-ui/react';
 import { CaretDown, Star } from '@phosphor-icons/react';
 import { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -7,35 +7,36 @@ import { FavoritesList } from './FavoritesList';
 export function FavoritesMenu() {
   const { t } = useTranslation('dashboard');
   return (
-    <Menu>
+    <Menu
+      placement="bottom-end"
+      offset={[0, 16]}
+    >
       {({ isOpen }) => (
         <Fragment>
-          <Button
-            as={MenuButton}
+          <MenuButton
+            as={Button}
             variant="tertiary"
             data-testid="header-favoritesMenuButton"
             mx="1rem"
           >
-            <Flex alignItems="center">
-              <Star
-                size="1.5rem"
-                color="var(--chakra-colors-neutral-8)"
+            <Flex
+              alignItems="center"
+              gap={2}
+            >
+              <Icon
+                as={Star}
+                boxSize="1.5rem"
                 weight="fill"
               />
               <Show above="md">
-                <Text
-                  mx="0.5rem"
-                  textStyle="button-base"
-                >
-                  {t('titleFavorites')}
-                </Text>
-                <CaretDown
-                  color="var(--chakra-colors-neutral-8)"
-                  size="1.5rem"
+                <Text>{t('titleFavorites')}</Text>
+                <Icon
+                  as={CaretDown}
+                  boxSize="1.5rem"
                 />
               </Show>
             </Flex>
-          </Button>
+          </MenuButton>
           {isOpen && <FavoritesList />}
         </Fragment>
       )}

From 8ed41e40ce9c62b441b2b975741c22a56fbe5e1c Mon Sep 17 00:00:00 2001
From: David Colon <38386583+Da-Colon@users.noreply.github.com>
Date: Fri, 19 Apr 2024 21:22:07 -0400
Subject: [PATCH 13/17] updates wallet menu with new styles

---
 .../AccountDisplay/MenuButtonDisplay.tsx      | 14 +--
 .../menus/AccountDisplay/MenuItemNetwork.tsx  | 98 ++++++++++---------
 .../menus/AccountDisplay/MenuItemWallet.tsx   |  3 +-
 .../ui/menus/AccountDisplay/MenuItems.tsx     | 10 +-
 .../ui/menus/AccountDisplay/index.tsx         |  2 +-
 5 files changed, 62 insertions(+), 65 deletions(-)

diff --git a/src/components/ui/menus/AccountDisplay/MenuButtonDisplay.tsx b/src/components/ui/menus/AccountDisplay/MenuButtonDisplay.tsx
index e66368a4ce..13b797b403 100644
--- a/src/components/ui/menus/AccountDisplay/MenuButtonDisplay.tsx
+++ b/src/components/ui/menus/AccountDisplay/MenuButtonDisplay.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex } from '@chakra-ui/react';
+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';
@@ -14,9 +14,9 @@ export function NotConnected() {
       gap="1"
     >
       {t('connectWallet')}
-      <CaretDown
-        color="var(--chakra-colors-neutral-8)"
-        size="1.5rem"
+      <Icon
+        as={CaretDown}
+        boxSize="1.5rem"
       />
     </Flex>
   );
@@ -46,9 +46,9 @@ export function Connected() {
         />
       </Box>
       {accountDisplayName}
-      <CaretDown
-        color="var(--chakra-colors-neutral-8)"
-        size="1.5rem"
+      <Icon
+        as={CaretDown}
+        boxSize="1.5rem"
       />
     </Flex>
   );
diff --git a/src/components/ui/menus/AccountDisplay/MenuItemNetwork.tsx b/src/components/ui/menus/AccountDisplay/MenuItemNetwork.tsx
index e8f70f62b7..d4f3499bc4 100644
--- a/src/components/ui/menus/AccountDisplay/MenuItemNetwork.tsx
+++ b/src/components/ui/menus/AccountDisplay/MenuItemNetwork.tsx
@@ -24,61 +24,65 @@ export function MenuItemNetwork() {
       <Flex
         direction="column"
         gap="2"
-        // @dev Not my favorite way to do this, but it's the only way to target the icon and adjust the margin without using a custom theme
-        sx={{
-          '.chakra-select__icon-wrapper': {
-            'margin-right': '0.5rem',
-          },
-          '*:hover': {
-            'color': 'lilac--1',
-          },
-        }}
-      >
+        
+        >
         <Text
           px="0.5rem"
           textStyle="helper-text-small"
           color="neutral-7"
-        >
+          >
           {t('network')}
         </Text>
-        <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) });
+        <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>
   );
diff --git a/src/components/ui/menus/AccountDisplay/MenuItemWallet.tsx b/src/components/ui/menus/AccountDisplay/MenuItemWallet.tsx
index 8e108b4fd6..7be2251327 100644
--- a/src/components/ui/menus/AccountDisplay/MenuItemWallet.tsx
+++ b/src/components/ui/menus/AccountDisplay/MenuItemWallet.tsx
@@ -27,9 +27,9 @@ export function MenuItemWallet() {
   return (
     <Box
       data-testid="accountMenu-wallet"
-      bg="neutral-3"
       cursor="default"
       pt="0.5rem"
+      bg="neutral-3"
     >
       <Text
         px="0.5rem"
@@ -44,6 +44,7 @@ export function MenuItemWallet() {
         alignItems="center"
         aria-label="copy address"
         data-testid="walletmenu-copyAddress"
+        
         onClick={() => copyTextToClipboard(account)}
         whiteSpace="pre-wrap"
         wordBreak="break-all"
diff --git a/src/components/ui/menus/AccountDisplay/MenuItems.tsx b/src/components/ui/menus/AccountDisplay/MenuItems.tsx
index 2e44b64b59..07f97acd9a 100644
--- a/src/components/ui/menus/AccountDisplay/MenuItems.tsx
+++ b/src/components/ui/menus/AccountDisplay/MenuItems.tsx
@@ -19,19 +19,11 @@ export function MenuItems() {
   return (
     <MenuList
       w="16.25rem"
-      rounded="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"
-      sx={{
-        '& > :nth-of-type(1)': {
-          borderTopRadius: 'lg',
-        },
-        '& > :last-child': {
-          borderBottomRadius: 'lg',
-        },
-      }}
     >
       {user.address && (
         <>
diff --git a/src/components/ui/menus/AccountDisplay/index.tsx b/src/components/ui/menus/AccountDisplay/index.tsx
index d93a92b90c..a3c975ca6a 100644
--- a/src/components/ui/menus/AccountDisplay/index.tsx
+++ b/src/components/ui/menus/AccountDisplay/index.tsx
@@ -4,7 +4,7 @@ import { MenuItems } from './MenuItems';
 
 export function AccountDisplay() {
   return (
-    <Menu>
+    <Menu placement="bottom-end" offset={[0,16]}>
       <Button
         as={MenuButton}
         variant="tertiary"

From 7a723764548e71e87ce6de37c856184dbe0ae3e0 Mon Sep 17 00:00:00 2001
From: David Colon <38386583+Da-Colon@users.noreply.github.com>
Date: Sat, 20 Apr 2024 00:19:32 -0400
Subject: [PATCH 14/17] adjust favorites list to fit full DAO name

---
 .../ui/menus/FavoritesMenu/Favorite.tsx          |  8 ++++++--
 .../ui/menus/FavoritesMenu/FavoritesList.tsx     | 16 +++++++---------
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/components/ui/menus/FavoritesMenu/Favorite.tsx b/src/components/ui/menus/FavoritesMenu/Favorite.tsx
index 1df2294532..2d70fd4200 100644
--- a/src/components/ui/menus/FavoritesMenu/Favorite.tsx
+++ b/src/components/ui/menus/FavoritesMenu/Favorite.tsx
@@ -24,16 +24,20 @@ export function Favorite({ network, address }: IFavorite) {
       <MenuItem
         as={Button}
         variant="tertiary"
+        w="full"
         h="3rem"
         onClick={onClickNav}
         noOfLines={1}
         data-testid={'favorites-' + daoRegistryName}
-        maxWidth="12rem"
         display="flex"
         alignItems="center"
+        justifyContent="flex-start"
         gap={2}
       >
-        <Star size="1.5rem" weight="fill" />
+        <Star
+          size="1.5rem"
+          weight="fill"
+        />
         {daoRegistryName}
       </MenuItem>
     </Box>
diff --git a/src/components/ui/menus/FavoritesMenu/FavoritesList.tsx b/src/components/ui/menus/FavoritesMenu/FavoritesList.tsx
index d02029b79f..dbf9abc2e0 100644
--- a/src/components/ui/menus/FavoritesMenu/FavoritesList.tsx
+++ b/src/components/ui/menus/FavoritesMenu/FavoritesList.tsx
@@ -42,15 +42,13 @@ export function FavoritesList() {
               },
             }}
           >
-            {favoritesList.map(
-              favorite => (
-                <Favorite
-                  key={favorite}
-                  network={addressPrefix}
-                  address={favorite}
-                />
-              ),
-            )}
+            {favoritesList.map(favorite => (
+              <Favorite
+                key={favorite}
+                network={addressPrefix}
+                address={favorite}
+              />
+            ))}
           </Box>
         )}
       </Box>

From eda45b2a9beeb597f2f7ab1e080f3dfea1c0ec12 Mon Sep 17 00:00:00 2001
From: David Colon <38386583+Da-Colon@users.noreply.github.com>
Date: Sat, 20 Apr 2024 00:38:24 -0400
Subject: [PATCH 15/17] update search display with new style - replaced
 `useDisplayName` with `useDAOName` to show dao name when found.

---
 .../ui/menus/DAOSearch/SearchDisplay.tsx      | 54 ++++++++++++++-----
 src/components/ui/menus/DAOSearch/index.tsx   | 15 +++---
 2 files changed, 50 insertions(+), 19 deletions(-)

diff --git a/src/components/ui/menus/DAOSearch/SearchDisplay.tsx b/src/components/ui/menus/DAOSearch/SearchDisplay.tsx
index 85f64cc4ad..7904aecf34 100644
--- a/src/components/ui/menus/DAOSearch/SearchDisplay.tsx
+++ b/src/components/ui/menus/DAOSearch/SearchDisplay.tsx
@@ -1,9 +1,10 @@
-import { Box, Flex, Text, Button } from '@chakra-ui/react';
+import { Flex, Text, Spinner, Button, Icon } from '@chakra-ui/react';
+import { WarningCircle } from '@phosphor-icons/react';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { DAO_ROUTES } from '../../../../constants/routes';
-import useDisplayName from '../../../../hooks/utils/useDisplayName';
+import useDAOName from '../../../../hooks/DAO/useDAOName';
 import { useFractal } from '../../../../providers/App/AppProvider';
 import { useNetworkConfig } from '../../../../providers/NetworkConfig/NetworkConfigProvider';
 
@@ -17,8 +18,8 @@ interface ISearchDisplay {
 }
 
 function DAONameDisplay({ address }: { address: string }) {
-  const { displayName } = useDisplayName(address);
-  return <Text textStyle="text-base-sans-medium">{displayName}</Text>;
+  const { daoRegistryName } = useDAOName({ address });
+  return <Text textStyle="display-lg">{daoRegistryName}</Text>;
 }
 
 export function SearchDisplay({
@@ -38,16 +39,38 @@ export function SearchDisplay({
   }, [node, address]);
   if (loading && address) {
     return (
-      <Box>
-        <Text textStyle="text-base-mono-regular">{t('loading')}</Text>
-      </Box>
+      <Flex
+        justifyContent="center"
+        alignItems="center"
+      >
+        <Spinner
+          thickness="4px"
+          speed="0.75s"
+          emptyColor="neutral-3"
+          color="neutral-7"
+          size="lg"
+        />
+      </Flex>
     );
   }
   if (errorMessage && !loading) {
     return (
-      <Box>
-        <Text textStyle="text-base-sans-medium">{errorMessage}</Text>
-      </Box>
+      <Flex
+        alignItems="center"
+        gap="2"
+      >
+        <Icon
+          as={WarningCircle}
+          color="red-1"
+          boxSize="1.5rem"
+        />
+        <Text
+          textStyle="display-lg"
+          color="red-1"
+        >
+          {errorMessage}
+        </Text>
+      </Flex>
     );
   }
   if (validAddress && address && !loading) {
@@ -56,15 +79,20 @@ export function SearchDisplay({
         py={2}
         cursor={isCurrentSafe ? 'not-allowed' : 'default'}
         justifyContent="space-between"
+        gap={8}
+        w="full"
       >
         <Flex
           justifyContent="space-between"
           alignItems="center"
         >
-          <Flex flexDirection="column">
+          <Flex
+            flexDirection="column"
+            gap={2}
+          >
             <Text
-              textStyle="text-sm-sans-regular"
-              color="chocolate.100"
+              textStyle="label-base"
+              color="white-0"
             >
               {t(isCurrentSafe ? 'labelCurrentDAO' : 'labelDAOFound')}
             </Text>
diff --git a/src/components/ui/menus/DAOSearch/index.tsx b/src/components/ui/menus/DAOSearch/index.tsx
index f74c08904d..94101f4cee 100644
--- a/src/components/ui/menus/DAOSearch/index.tsx
+++ b/src/components/ui/menus/DAOSearch/index.tsx
@@ -42,6 +42,7 @@ export function DAOSearch({ closeDrawer }: { closeDrawer?: () => void }) {
       width="full"
       maxW={{ base: 'full', md: '31.125rem' }}
       height="full"
+      position="relative"
     >
       <Popover
         matchWidth
@@ -69,15 +70,17 @@ export function DAOSearch({ closeDrawer }: { closeDrawer?: () => void }) {
           </InputGroup>
         </PopoverTrigger>
         <Box
-          marginTop="0.5rem"
+          marginTop="1.25rem"
           padding="1rem 1rem"
-          border="none"
-          rounded="lg"
-          shadow="menu-gold"
-          bg="grayscale.black"
+          rounded="0.5rem"
+          bg="neutral-3"
+          boxShadow="0px 1px 0px 0px var(--chakra-colors-neutral-1)"
+          border="1px solid"
+          borderColor={!!errorMessage ? 'red-1' : 'neutral-3'}
+          position="absolute"
           hidden={!errorMessage && !address}
-          position="relative"
           zIndex="modal"
+          w="full"
         >
           <SearchDisplay
             loading={isLoading}

From 03ed8499a71f6cc3034879be33142f982ee313a4 Mon Sep 17 00:00:00 2001
From: David Colon <38386583+Da-Colon@users.noreply.github.com>
Date: Sat, 20 Apr 2024 00:43:14 -0400
Subject: [PATCH 16/17] run pretty/lint

---
 src/components/ui/menus/AccountDisplay/MenuItemNetwork.tsx | 5 ++---
 src/components/ui/menus/AccountDisplay/MenuItemWallet.tsx  | 1 -
 src/components/ui/menus/AccountDisplay/index.tsx           | 5 ++++-
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/ui/menus/AccountDisplay/MenuItemNetwork.tsx b/src/components/ui/menus/AccountDisplay/MenuItemNetwork.tsx
index d4f3499bc4..b6253d95d1 100644
--- a/src/components/ui/menus/AccountDisplay/MenuItemNetwork.tsx
+++ b/src/components/ui/menus/AccountDisplay/MenuItemNetwork.tsx
@@ -24,13 +24,12 @@ export function MenuItemNetwork() {
       <Flex
         direction="column"
         gap="2"
-        
-        >
+      >
         <Text
           px="0.5rem"
           textStyle="helper-text-small"
           color="neutral-7"
-          >
+        >
           {t('network')}
         </Text>
         <Box
diff --git a/src/components/ui/menus/AccountDisplay/MenuItemWallet.tsx b/src/components/ui/menus/AccountDisplay/MenuItemWallet.tsx
index 7be2251327..433f63bfa1 100644
--- a/src/components/ui/menus/AccountDisplay/MenuItemWallet.tsx
+++ b/src/components/ui/menus/AccountDisplay/MenuItemWallet.tsx
@@ -44,7 +44,6 @@ export function MenuItemWallet() {
         alignItems="center"
         aria-label="copy address"
         data-testid="walletmenu-copyAddress"
-        
         onClick={() => copyTextToClipboard(account)}
         whiteSpace="pre-wrap"
         wordBreak="break-all"
diff --git a/src/components/ui/menus/AccountDisplay/index.tsx b/src/components/ui/menus/AccountDisplay/index.tsx
index a3c975ca6a..32dd67ed4b 100644
--- a/src/components/ui/menus/AccountDisplay/index.tsx
+++ b/src/components/ui/menus/AccountDisplay/index.tsx
@@ -4,7 +4,10 @@ import { MenuItems } from './MenuItems';
 
 export function AccountDisplay() {
   return (
-    <Menu placement="bottom-end" offset={[0,16]}>
+    <Menu
+      placement="bottom-end"
+      offset={[0, 16]}
+    >
       <Button
         as={MenuButton}
         variant="tertiary"

From d1b3e2c87fd835770dddb9847875f093a91412b1 Mon Sep 17 00:00:00 2001
From: Adam Gall <galladamj@gmail.com>
Date: Mon, 22 Apr 2024 16:51:39 -0400
Subject: [PATCH 17/17] Remove need for extra empty div

---
 src/components/ui/page/Navigation/index.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/ui/page/Navigation/index.tsx b/src/components/ui/page/Navigation/index.tsx
index 61c600b5a4..13ff4898ef 100644
--- a/src/components/ui/page/Navigation/index.tsx
+++ b/src/components/ui/page/Navigation/index.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, Show } from '@chakra-ui/react';
+import { Flex, Show } from '@chakra-ui/react';
 import { useFractal } from '../../../../providers/App/AppProvider';
 import { NavigationLinks } from './NavigationLinks';
 
@@ -12,10 +12,9 @@ function Navigation() {
     <Flex
       alignItems="center"
       direction="column"
-      justifyContent="space-between"
+      justifyContent="end"
       flexGrow={1}
     >
-      <Box></Box>
       <Show above="md">
         <NavigationLinks
           showDAOLinks={showDAOLinks}