From a9f967b9fd04a69752327e1d402ad265cc028768 Mon Sep 17 00:00:00 2001
From: Kellar <kellar.base09@gmail.com>
Date: Thu, 18 Apr 2024 16:17:25 +0100
Subject: [PATCH 01/22] Reskin InfoBox

---
 src/components/ui/containers/InfoBox.tsx | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/components/ui/containers/InfoBox.tsx b/src/components/ui/containers/InfoBox.tsx
index e4b2bdaa2d..c95ba75097 100644
--- a/src/components/ui/containers/InfoBox.tsx
+++ b/src/components/ui/containers/InfoBox.tsx
@@ -1,7 +1,6 @@
 import { Box, BoxProps } from '@chakra-ui/react';
 import { ReactNode } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { BACKGROUND_SEMI_TRANSPARENT } from '../../../constants/common';
 
 type InfoBoxProps = {
   minHeight?: string;
@@ -17,7 +16,6 @@ export function InfoBox({
   minHeight = '10.6rem',
   children,
   to,
-  background,
   ...rest
 }: InfoBoxProps) {
   const navigate = useNavigate();
@@ -26,16 +24,16 @@ export function InfoBox({
       cursor={to ? 'pointer' : undefined}
       onClick={
         to
-          ? () => {
-              navigate(to);
-            }
+          ? () => navigate(to)
           : undefined
       }
       minWidth={minWidth}
       h="100%"
       minHeight={minHeight}
-      bg={background || BACKGROUND_SEMI_TRANSPARENT}
-      p="1rem"
+      p="1.5rem"
+      mx="1.5rem"
+      borderWidth="0.06rem"
+      borderColor="neutral-3"
       borderRadius="0.5rem"
       {...rest}
     >

From 31181e3e4571a1166f4ad3fc88cf4b505cc2acc9 Mon Sep 17 00:00:00 2001
From: Kellar <kellar.base09@gmail.com>
Date: Thu, 18 Apr 2024 16:21:04 +0100
Subject: [PATCH 02/22] Rename obscure index.tsx to DaoInfoHeader.tsx

---
 .../pages/DaoDashboard/Info/{index.tsx => DaoInfoHeader.tsx}  | 2 +-
 src/pages/daos/[daoAddress]/DaoDashboardPage.tsx              | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)
 rename src/components/pages/DaoDashboard/Info/{index.tsx => DaoInfoHeader.tsx} (99%)

diff --git a/src/components/pages/DaoDashboard/Info/index.tsx b/src/components/pages/DaoDashboard/Info/DaoInfoHeader.tsx
similarity index 99%
rename from src/components/pages/DaoDashboard/Info/index.tsx
rename to src/components/pages/DaoDashboard/Info/DaoInfoHeader.tsx
index cd23782f99..d24fc79fec 100644
--- a/src/components/pages/DaoDashboard/Info/index.tsx
+++ b/src/components/pages/DaoDashboard/Info/DaoInfoHeader.tsx
@@ -11,7 +11,7 @@ import { InfoProposals } from './InfoProposals';
 import { InfoTreasury } from './InfoTreasury';
 import { ParentLink } from './ParentLink';
 
-export function Info() {
+export function DaoInfoHeader() {
   const {
     node: { daoAddress },
   } = useFractal();
diff --git a/src/pages/daos/[daoAddress]/DaoDashboardPage.tsx b/src/pages/daos/[daoAddress]/DaoDashboardPage.tsx
index 1cef176884..41d5c66679 100644
--- a/src/pages/daos/[daoAddress]/DaoDashboardPage.tsx
+++ b/src/pages/daos/[daoAddress]/DaoDashboardPage.tsx
@@ -1,7 +1,7 @@
 import { Box } from '@chakra-ui/react';
 import { Activities } from '../../../components/pages/DaoDashboard/Activities';
 import { ERCO20Claim } from '../../../components/pages/DaoDashboard/ERC20Claim';
-import { Info } from '../../../components/pages/DaoDashboard/Info';
+import { DaoInfoHeader } from '../../../components/pages/DaoDashboard/Info/DaoInfoHeader';
 import InfoHeader from '../../../components/pages/DaoDashboard/Info/InfoHeader';
 import useDAOMetadata from '../../../hooks/DAO/useDAOMetadata';
 
@@ -12,7 +12,7 @@ export default function DaoDashboardPage() {
     <>
       <InfoHeader />
       <Box mt={!!daoMetadata ? 40 : 12}>
-        <Info />
+        <DaoInfoHeader />
         <ERCO20Claim />
         <Activities />
       </Box>

From e835202deeb8d232f078415e0987ff563b84315b Mon Sep 17 00:00:00 2001
From: Kellar <kellar.base09@gmail.com>
Date: Thu, 18 Apr 2024 16:22:36 +0100
Subject: [PATCH 03/22] Rename misleading InfoHeader to
 DaoSpecificMetadataHeader, make its conditional rendering more apparent

---
 .../{InfoHeader.tsx => DaoSpecificMetadataHeader.tsx}    | 9 +++------
 src/pages/daos/[daoAddress]/DaoDashboardPage.tsx         | 4 ++--
 2 files changed, 5 insertions(+), 8 deletions(-)
 rename src/components/pages/DaoDashboard/Info/{InfoHeader.tsx => DaoSpecificMetadataHeader.tsx} (92%)

diff --git a/src/components/pages/DaoDashboard/Info/InfoHeader.tsx b/src/components/pages/DaoDashboard/Info/DaoSpecificMetadataHeader.tsx
similarity index 92%
rename from src/components/pages/DaoDashboard/Info/InfoHeader.tsx
rename to src/components/pages/DaoDashboard/Info/DaoSpecificMetadataHeader.tsx
index 5efbe40fb4..1aa3165b8c 100644
--- a/src/components/pages/DaoDashboard/Info/InfoHeader.tsx
+++ b/src/components/pages/DaoDashboard/Info/DaoSpecificMetadataHeader.tsx
@@ -1,20 +1,17 @@
 import { Box, Flex, Image, Menu, MenuButton, MenuList, Text } from '@chakra-ui/react';
 import { ArrowAngleUp, Burger } from '@decent-org/fractal-ui';
 import { useTranslation } from 'react-i18next';
-import useDAOMetadata from '../../../../hooks/DAO/useDAOMetadata';
 import { useFractal } from '../../../../providers/App/AppProvider';
+import { DAOMetadata } from '../../../../types';
 import ExternalLink from '../../../ui/links/ExternalLink';
 
-export default function InfoHeader() {
+export function DaoSpecificMetadataHeader(props: {metadata: DAOMetadata}) {
   const {
     node: { daoName },
   } = useFractal();
-  const daoMetadata = useDAOMetadata();
   const { t } = useTranslation();
 
-  if (!daoMetadata) {
-    return null;
-  }
+  const { metadata: daoMetadata } = props;
 
   return (
     <Flex
diff --git a/src/pages/daos/[daoAddress]/DaoDashboardPage.tsx b/src/pages/daos/[daoAddress]/DaoDashboardPage.tsx
index 41d5c66679..b0c71a9cc9 100644
--- a/src/pages/daos/[daoAddress]/DaoDashboardPage.tsx
+++ b/src/pages/daos/[daoAddress]/DaoDashboardPage.tsx
@@ -2,7 +2,7 @@ import { Box } from '@chakra-ui/react';
 import { Activities } from '../../../components/pages/DaoDashboard/Activities';
 import { ERCO20Claim } from '../../../components/pages/DaoDashboard/ERC20Claim';
 import { DaoInfoHeader } from '../../../components/pages/DaoDashboard/Info/DaoInfoHeader';
-import InfoHeader from '../../../components/pages/DaoDashboard/Info/InfoHeader';
+import { DaoSpecificMetadataHeader } from '../../../components/pages/DaoDashboard/Info/DaoSpecificMetadataHeader';
 import useDAOMetadata from '../../../hooks/DAO/useDAOMetadata';
 
 export default function DaoDashboardPage() {
@@ -10,7 +10,7 @@ export default function DaoDashboardPage() {
 
   return (
     <>
-      <InfoHeader />
+      {daoMetadata && <DaoSpecificMetadataHeader metadata={daoMetadata} />}
       <Box mt={!!daoMetadata ? 40 : 12}>
         <DaoInfoHeader />
         <ERCO20Claim />

From c726f35de69629c7703ecb2d67f76f1b71e785ff Mon Sep 17 00:00:00 2001
From: Kellar <kellar.base09@gmail.com>
Date: Fri, 19 Apr 2024 12:58:48 +0100
Subject: [PATCH 04/22] Remove 1-line limit on info card DAO name

---
 src/components/ui/cards/DAOInfoCard.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/ui/cards/DAOInfoCard.tsx b/src/components/ui/cards/DAOInfoCard.tsx
index a68aa83696..c11297f3f5 100644
--- a/src/components/ui/cards/DAOInfoCard.tsx
+++ b/src/components/ui/cards/DAOInfoCard.tsx
@@ -95,7 +95,6 @@ export function DAOInfoCard({
               textStyle="text-2xl-mono-regular"
               color="grayscale.100"
               data-testid="DAOInfo-name"
-              noOfLines={1}
             >
               {node.daoName || displayName}
             </Text>

From 812bea0ba13dd6e692a45a8ebf63b3715e3ed8d8 Mon Sep 17 00:00:00 2001
From: Kellar <kellar.base09@gmail.com>
Date: Fri, 19 Apr 2024 13:05:52 +0100
Subject: [PATCH 05/22] Resking AddressCopier, hopefully completely

---
 src/components/ui/links/AddressCopier.tsx | 23 +++++++++--------------
 1 file changed, 9 insertions(+), 14 deletions(-)

diff --git a/src/components/ui/links/AddressCopier.tsx b/src/components/ui/links/AddressCopier.tsx
index 574670596f..cb6a10f6ef 100644
--- a/src/components/ui/links/AddressCopier.tsx
+++ b/src/components/ui/links/AddressCopier.tsx
@@ -1,5 +1,5 @@
 import { Flex, FlexProps, Text } from '@chakra-ui/react';
-import { Copy } from '@decent-org/fractal-ui';
+import { CopySimple } from '@phosphor-icons/react';
 import { useCopyText } from '../../../hooks/utils/useCopyText';
 import useDisplayName from '../../../hooks/utils/useDisplayName';
 import EtherscanLinkAddress from './EtherscanLinkAddress';
@@ -20,23 +20,18 @@ export default function AddressCopier({ address, ...rest }: Props) {
     <Flex
       alignItems="center"
       onClick={() => copyToClipboard(address)}
-      gap="0.5rem"
+      py="0.25rem"
+      px="0.75rem"
+      gap="0.25rem"
       cursor="pointer"
-      w="fit-content"
-      color="grayscale.100"
+      color="celery-0"
+      lineHeight="1.25rem"
       {...rest}
     >
-      <EtherscanLinkAddress
-        address={address}
-        color="grayscale.100"
-      >
-        <Text textStyle="text-base-mono-regular">{accountSubstring}</Text>
+      <EtherscanLinkAddress address={address}>
+        <Text>{accountSubstring}</Text>
       </EtherscanLinkAddress>
-      <Copy
-        _hover={{ color: 'gold.500-hover' }}
-        boxSize="1.5rem"
-        fill="currentColor"
-      />
+      <CopySimple fill="currentColor" />
     </Flex>
   );
 }

From 98c7c53f4a263309bd04398d16d5fc98a3991540 Mon Sep 17 00:00:00 2001
From: Kellar <kellar.base09@gmail.com>
Date: Fri, 19 Apr 2024 13:44:52 +0100
Subject: [PATCH 06/22] Reskin FavoriteIcon

---
 src/components/ui/icons/FavoriteIcon.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/ui/icons/FavoriteIcon.tsx b/src/components/ui/icons/FavoriteIcon.tsx
index 30be0950de..6b6d5a047f 100644
--- a/src/components/ui/icons/FavoriteIcon.tsx
+++ b/src/components/ui/icons/FavoriteIcon.tsx
@@ -1,5 +1,5 @@
 import { Box, BoxProps, IconButton, Tooltip } from '@chakra-ui/react';
-import { StarGoldSolid, StarOutline } from '@decent-org/fractal-ui';
+import { Star } from '@phosphor-icons/react';
 import { utils } from 'ethers';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -20,11 +20,14 @@ export default function FavoriteIcon({ safeAddress, ...rest }: Props) {
     <Box {...rest}>
       <Tooltip label={t('favoriteTooltip')}>
         <IconButton
-          color="gold.500"
-          _hover={{ color: 'gold.500-hover' }}
           variant="ghost"
-          minWidth="0px"
-          icon={isFavorite ? <StarGoldSolid boxSize="1.5rem" /> : <StarOutline boxSize="1.5rem" />}
+          p="0.5rem"
+          size="md"
+          color={'lilac-0'}
+          borderRadius="0.25rem"
+          _hover={{ color: 'lilac--1', backgroundColor: 'white-alpha-04' }}
+          _active={{ color: 'lilac--2'}}
+          icon={<Star weight={isFavorite ? 'fill' : 'regular'} />}
           onClick={() => toggleFavorite(safeAddress)}
           aria-label={t('favoriteTooltip')}
         />

From b06ffe55e4b19a291e9b0cc0a9c8e97b086dc559 Mon Sep 17 00:00:00 2001
From: Kellar <kellar.base09@gmail.com>
Date: Fri, 19 Apr 2024 15:28:45 +0100
Subject: [PATCH 07/22] Reskin DAO info crad

---
 .../pages/DaoDashboard/Info/InfoDAO.tsx       |   1 -
 src/components/ui/cards/DAOInfoCard.tsx       | 134 +++++++++---------
 src/components/ui/colors.tsx                  |   2 +
 src/components/ui/links/AddressCopier.tsx     |   2 +-
 .../ui/menus/ManageDAO/ManageDAOMenu.tsx      |  19 +--
 .../{components/index.tsx => OptionsList.tsx} |  19 +--
 src/components/ui/menus/OptionMenu/index.tsx  |   6 +-
 src/components/ui/menus/OptionMenu/types.tsx  |  15 ++
 8 files changed, 101 insertions(+), 97 deletions(-)
 rename src/components/ui/menus/OptionMenu/{components/index.tsx => OptionsList.tsx} (87%)
 create mode 100644 src/components/ui/menus/OptionMenu/types.tsx

diff --git a/src/components/pages/DaoDashboard/Info/InfoDAO.tsx b/src/components/pages/DaoDashboard/Info/InfoDAO.tsx
index 9f97a2c05e..43004aac53 100644
--- a/src/components/pages/DaoDashboard/Info/InfoDAO.tsx
+++ b/src/components/pages/DaoDashboard/Info/InfoDAO.tsx
@@ -10,7 +10,6 @@ export function InfoDAO() {
   const { node, guardContracts, guard } = useFractal();
   return (
     <DAOInfoCard
-      h="8.5rem"
       parentAddress={node.nodeHierarchy.parentAddress || undefined}
       node={node}
       childCount={node.nodeHierarchy.childNodes.length}
diff --git a/src/components/ui/cards/DAOInfoCard.tsx b/src/components/ui/cards/DAOInfoCard.tsx
index c11297f3f5..bc18664b1f 100644
--- a/src/components/ui/cards/DAOInfoCard.tsx
+++ b/src/components/ui/cards/DAOInfoCard.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, Text, Spacer, HStack, FlexProps, Link, Center } from '@chakra-ui/react';
+import { Box, Flex, Text, Spacer, HStack, FlexProps, Link, Center, VStack } from '@chakra-ui/react';
 import { Link as RouterLink } from 'react-router-dom';
 import { DAO_ROUTES } from '../../../constants/routes';
 import useDisplayName from '../../../hooks/utils/useDisplayName';
@@ -66,79 +66,79 @@ export function DAOInfoCard({
   const isCurrentDAO = displayedAddress === currentDAOAddress;
 
   return (
-    <Flex
-      w="full"
-      minH="full"
-      {...rest}
-    >
-      <Flex
-        flexDirection="column"
-        gap="0.4rem"
+    <Box {...rest}>
+      <VStack
+        gap="1.5rem"
+        alignItems={'left'}
       >
-        <HStack>
-          <Link
-            as={RouterLink}
-            pointerEvents={isCurrentDAO ? 'none' : undefined}
-            to={DAO_ROUTES.dao.relative(addressPrefix, displayedAddress)}
-            _hover={{ textDecoration: 'none' }}
-            onClick={() => {
-              // if we're not on the current DAO, reset
-              // the DAO data, so the one you're clicking
-              // into will load properly
-              if (!isCurrentDAO) {
-                action.resetDAO();
-              }
-            }}
-          >
-            <Text
-              as="h1"
-              textStyle="text-2xl-mono-regular"
-              color="grayscale.100"
-              data-testid="DAOInfo-name"
-            >
-              {node.daoName || displayName}
-            </Text>
-          </Link>
-          <FavoriteIcon
-            safeAddress={displayedAddress}
-            data-testid="DAOInfo-favorite"
-          />
-          {childCount && childCount > 0 && (
+        {/* DAO NAME AND ACTIONS */}
+        <Flex
+          direction="row"
+          alignItems={'center'}
+        >
+          <HStack>
+            {/* DAO NAME */}
             <Link
-              to={DAO_ROUTES.hierarchy.relative(addressPrefix, displayedAddress)}
+              textStyle="display-4xl"
+              mr="0.5rem"
               as={RouterLink}
+              pointerEvents={isCurrentDAO ? 'none' : undefined}
+              to={DAO_ROUTES.dao.relative(addressPrefix, displayedAddress)}
+              _hover={{ textDecoration: 'none' }}
+              onClick={() => {
+                // if we're not on the current DAO, reset
+                // the DAO data, so the one you're clicking
+                // into will load properly
+                if (!isCurrentDAO) {
+                  action.resetDAO();
+                }
+              }}
             >
-              <Box
-                bg="chocolate.500"
-                borderRadius="4px"
-                p="0.25rem 0.5rem"
-              >
-                <Text textStyle="text-sm-mono-semibold">{childCount}</Text>
-              </Box>
+              <Text data-testid="DAOInfo-name">{node.daoName || displayName}</Text>
             </Link>
+
+            {/* FAVORITE ICON */}
+            <FavoriteIcon
+              safeAddress={displayedAddress}
+              data-testid="DAOInfo-favorite"
+            />
+
+            {/* PARENT TAG */}
+            {childCount && childCount > 0 && (
+              <Link
+                to={DAO_ROUTES.hierarchy.relative(addressPrefix, displayedAddress)}
+                as={RouterLink}
+                _hover={{ textDecoration: 'none', bg: 'neutral-4' }}
+                _active={{ bg: 'neutral-3' }}
+                bg="neutral-3"
+                color="lilac-0"
+                borderRadius="624.9375rem"
+                p="0.25rem 0.75rem"
+                textStyle="button-base"
+              >
+                Parent
+              </Link>
+            )}
+          </HStack>
+
+          <Spacer />
+
+          {!!user.address && (
+            <ManageDAOMenu
+              parentAddress={parentAddress}
+              fractalNode={node}
+              freezeGuard={freezeGuard}
+              guardContracts={guardContracts}
+            />
           )}
-        </HStack>
+        </Flex>
+
+        {/* DAO ADDRESS */}
         <AddressCopier address={displayedAddress} />
-      </Flex>
-      <Spacer />
-      <Flex
-        flexDirection="column"
-        alignItems="end"
-        justifyContent="space-between"
-      >
-        {!!user.address ? (
-          <ManageDAOMenu
-            parentAddress={parentAddress}
-            fractalNode={node}
-            freezeGuard={freezeGuard}
-            guardContracts={guardContracts}
-          />
-        ) : (
-          // empty box to keep snapshot bottom aligned
-          <Box />
-        )}
+
+        {/* SNAPSHOT ICON LINK */}
         {node.daoSnapshotURL && <Snapshot snapshotURL={node.daoSnapshotURL} />}
-      </Flex>
-    </Flex>
+      </VStack>
+    </Box>
   );
 }
diff --git a/src/components/ui/colors.tsx b/src/components/ui/colors.tsx
index c5e7085aff..606f19c153 100644
--- a/src/components/ui/colors.tsx
+++ b/src/components/ui/colors.tsx
@@ -6,3 +6,5 @@ export enum Green {
 export enum Red {
   _600 = '#BA5F5F', // TODO what should the number be here?
 }
+
+export const iconColor = (chakraUIColor: string) => `var(--chakra-colors-${chakraUIColor})`;
diff --git a/src/components/ui/links/AddressCopier.tsx b/src/components/ui/links/AddressCopier.tsx
index cb6a10f6ef..4763550aa1 100644
--- a/src/components/ui/links/AddressCopier.tsx
+++ b/src/components/ui/links/AddressCopier.tsx
@@ -25,7 +25,7 @@ export default function AddressCopier({ address, ...rest }: Props) {
       gap="0.25rem"
       cursor="pointer"
       color="celery-0"
-      lineHeight="1.25rem"
+      textStyle="button-base"
       {...rest}
     >
       <EtherscanLinkAddress address={address}>
diff --git a/src/components/ui/menus/ManageDAO/ManageDAOMenu.tsx b/src/components/ui/menus/ManageDAO/ManageDAOMenu.tsx
index 58dbf794f8..886c879bfb 100644
--- a/src/components/ui/menus/ManageDAO/ManageDAOMenu.tsx
+++ b/src/components/ui/menus/ManageDAO/ManageDAOMenu.tsx
@@ -1,5 +1,5 @@
-import { VEllipsis } from '@decent-org/fractal-ui';
 import { ERC20FreezeVoting, MultisigFreezeVoting } from '@fractal-framework/fractal-contracts';
+import { GearFine } from '@phosphor-icons/react';
 import { useMemo, useCallback, useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { DAO_ROUTES } from '../../../../constants/routes';
@@ -36,7 +36,7 @@ interface IManageDAOMenu {
 }
 
 /**
- * The dropdown (vertical ellipses) for managing a DAO.
+ * The dropdown for managing a DAO.
  *
  * It is important to note that you cannot rely on the useFractal()
  * hook to supply information to this menu, as it is used within the
@@ -243,15 +243,18 @@ export function ManageDAOMenu({
 
   return (
     <OptionMenu
-      trigger={
-        <VEllipsis
-          boxSize="1.5rem"
-          mt="0.25rem"
-        />
-      }
+      trigger={<GearFine size="1.25rem" />}
       titleKey={canUserCreateProposal ? 'titleManageDAO' : 'titleViewDAODetails'}
       options={options}
       namespace="menu"
+      buttonProps={{
+        borderRadius: '0.25rem',
+        p: '0.5rem',
+        color: 'lilac-0',
+        variant: 'ghost',
+        _hover: { color: 'lilac--1', backgroundColor: 'white-alpha-04' },
+        _active: { color: 'lilac--2' },
+      }}
     />
   );
 }
diff --git a/src/components/ui/menus/OptionMenu/components/index.tsx b/src/components/ui/menus/OptionMenu/OptionsList.tsx
similarity index 87%
rename from src/components/ui/menus/OptionMenu/components/index.tsx
rename to src/components/ui/menus/OptionMenu/OptionsList.tsx
index 0f2566e61b..6853e7ccd4 100644
--- a/src/components/ui/menus/OptionMenu/components/index.tsx
+++ b/src/components/ui/menus/OptionMenu/OptionsList.tsx
@@ -1,24 +1,9 @@
 import { Box, Flex, MenuItem, Checkbox, Divider, Text } from '@chakra-ui/react';
 import { ChangeEvent, MouseEvent } from 'react';
 import { useTranslation } from 'react-i18next';
+import { IOption, IOptionsList } from './types';
 
-export interface IOption {
-  optionKey: string;
-  count?: number;
-  onClick: () => void;
-  isSelected?: boolean;
-}
-
-export interface IOptionsList {
-  options: IOption[];
-  closeOnSelect?: boolean;
-  showOptionCount?: boolean;
-  showOptionSelected?: boolean;
-  namespace: string;
-  titleKey?: string;
-}
-
-export default function OptionsList({
+export function OptionsList({
   options,
   showOptionSelected,
   closeOnSelect,
diff --git a/src/components/ui/menus/OptionMenu/index.tsx b/src/components/ui/menus/OptionMenu/index.tsx
index add0ecc34e..f8720a0814 100644
--- a/src/components/ui/menus/OptionMenu/index.tsx
+++ b/src/components/ui/menus/OptionMenu/index.tsx
@@ -1,14 +1,15 @@
 import { Menu, MenuButton, MenuList, As, MenuProps, Tooltip } from '@chakra-ui/react';
 import { MouseEvent, ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
-import OptionsList, { IOption, IOptionsList } from './components';
+import { OptionsList } from './OptionsList';
+import { IOption, IOptionsList } from './types';
 
 interface IOptionMenu extends Omit<MenuProps, 'children'>, IOptionsList {
   trigger: ReactNode;
   tooltipKey?: string;
   options: IOption[];
   buttonAs?: As;
-  buttonProps?: Record<string, string | boolean | number>;
+  buttonProps?: Record<string, string | boolean | number | Record<string, any>>;
   children?: ReactNode;
 }
 
@@ -44,7 +45,6 @@ export function OptionMenu({
           onClick={(event: MouseEvent<HTMLButtonElement>) => {
             event.stopPropagation();
           }}
-          _hover={{ color: 'gold.500-hover' }}
           {...buttonProps}
         >
           {trigger}
diff --git a/src/components/ui/menus/OptionMenu/types.tsx b/src/components/ui/menus/OptionMenu/types.tsx
new file mode 100644
index 0000000000..629966bca4
--- /dev/null
+++ b/src/components/ui/menus/OptionMenu/types.tsx
@@ -0,0 +1,15 @@
+export interface IOption {
+  optionKey: string;
+  count?: number;
+  onClick: () => void;
+  isSelected?: boolean;
+}
+
+export interface IOptionsList {
+  options: IOption[];
+  closeOnSelect?: boolean;
+  showOptionCount?: boolean;
+  showOptionSelected?: boolean;
+  namespace: string;
+  titleKey?: string;
+}

From e1d1c87f04ef767aa903139a3e2bfcc466b9599d Mon Sep 17 00:00:00 2001
From: Kellar <kellar.base09@gmail.com>
Date: Fri, 19 Apr 2024 15:29:01 +0100
Subject: [PATCH 08/22] prettier

---
 .../pages/DaoDashboard/Info/DaoSpecificMetadataHeader.tsx   | 2 +-
 src/components/ui/containers/InfoBox.tsx                    | 6 +-----
 src/components/ui/icons/FavoriteIcon.tsx                    | 2 +-
 3 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/components/pages/DaoDashboard/Info/DaoSpecificMetadataHeader.tsx b/src/components/pages/DaoDashboard/Info/DaoSpecificMetadataHeader.tsx
index 1aa3165b8c..b42e250cc7 100644
--- a/src/components/pages/DaoDashboard/Info/DaoSpecificMetadataHeader.tsx
+++ b/src/components/pages/DaoDashboard/Info/DaoSpecificMetadataHeader.tsx
@@ -5,7 +5,7 @@ import { useFractal } from '../../../../providers/App/AppProvider';
 import { DAOMetadata } from '../../../../types';
 import ExternalLink from '../../../ui/links/ExternalLink';
 
-export function DaoSpecificMetadataHeader(props: {metadata: DAOMetadata}) {
+export function DaoSpecificMetadataHeader(props: { metadata: DAOMetadata }) {
   const {
     node: { daoName },
   } = useFractal();
diff --git a/src/components/ui/containers/InfoBox.tsx b/src/components/ui/containers/InfoBox.tsx
index c95ba75097..dfbd9a692a 100644
--- a/src/components/ui/containers/InfoBox.tsx
+++ b/src/components/ui/containers/InfoBox.tsx
@@ -22,11 +22,7 @@ export function InfoBox({
   return (
     <Box
       cursor={to ? 'pointer' : undefined}
-      onClick={
-        to
-          ? () => navigate(to)
-          : undefined
-      }
+      onClick={to ? () => navigate(to) : undefined}
       minWidth={minWidth}
       h="100%"
       minHeight={minHeight}
diff --git a/src/components/ui/icons/FavoriteIcon.tsx b/src/components/ui/icons/FavoriteIcon.tsx
index 6b6d5a047f..14909680e4 100644
--- a/src/components/ui/icons/FavoriteIcon.tsx
+++ b/src/components/ui/icons/FavoriteIcon.tsx
@@ -26,7 +26,7 @@ export default function FavoriteIcon({ safeAddress, ...rest }: Props) {
           color={'lilac-0'}
           borderRadius="0.25rem"
           _hover={{ color: 'lilac--1', backgroundColor: 'white-alpha-04' }}
-          _active={{ color: 'lilac--2'}}
+          _active={{ color: 'lilac--2' }}
           icon={<Star weight={isFavorite ? 'fill' : 'regular'} />}
           onClick={() => toggleFavorite(safeAddress)}
           aria-label={t('favoriteTooltip')}

From 2bf5be3b9564e66236db0d18dfeabbad6039e5d8 Mon Sep 17 00:00:00 2001
From: Kellar <kellar.base09@gmail.com>
Date: Fri, 19 Apr 2024 15:53:15 +0100
Subject: [PATCH 09/22] Add hover, active effects to AdderssCopier

---
 src/components/ui/cards/DAOInfoCard.tsx   | 2 +-
 src/components/ui/links/AddressCopier.tsx | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/ui/cards/DAOInfoCard.tsx b/src/components/ui/cards/DAOInfoCard.tsx
index bc18664b1f..6f20a83091 100644
--- a/src/components/ui/cards/DAOInfoCard.tsx
+++ b/src/components/ui/cards/DAOInfoCard.tsx
@@ -112,7 +112,7 @@ export function DAOInfoCard({
                 _active={{ bg: 'neutral-3' }}
                 bg="neutral-3"
                 color="lilac-0"
-                borderRadius="624.9375rem"
+                borderRadius="625rem"
                 p="0.25rem 0.75rem"
                 textStyle="button-base"
               >
diff --git a/src/components/ui/links/AddressCopier.tsx b/src/components/ui/links/AddressCopier.tsx
index 4763550aa1..c28a9b9462 100644
--- a/src/components/ui/links/AddressCopier.tsx
+++ b/src/components/ui/links/AddressCopier.tsx
@@ -25,7 +25,12 @@ export default function AddressCopier({ address, ...rest }: Props) {
       gap="0.25rem"
       cursor="pointer"
       color="celery-0"
+      borderRadius="625rem"
+      borderWidth="1px"
+      borderColor={'transparent'}
       textStyle="button-base"
+      _hover={{ bg: 'celery--6', borderColor: 'celery--6' }}
+      _active={{ bg: 'celery--6', borderWidth: "1px", borderColor: 'celery--5'}}
       {...rest}
     >
       <EtherscanLinkAddress address={address}>

From 192eaf06f5319be3674ab0261ae603d82b286fad Mon Sep 17 00:00:00 2001
From: Kellar <kellar.base09@gmail.com>
Date: Fri, 19 Apr 2024 16:20:48 +0100
Subject: [PATCH 10/22] Resking SnapshotButton

---
 public/images/snapshot-icon.svg               |  4 --
 src/components/Activity/ActivityCard.tsx      |  1 +
 .../Proposals/ProposalActions/CastVote.tsx    |  1 +
 .../Proposals/ProposalCard/ProposalCard.tsx   |  1 +
 src/components/Proposals/ProposalInfo.tsx     |  7 +--
 src/components/ui/badges/Snapshot.tsx         | 48 +++++++++++++------
 src/components/ui/cards/DAOInfoCard.tsx       |  8 ++--
 src/components/ui/links/AddressCopier.tsx     |  2 +-
 8 files changed, 45 insertions(+), 27 deletions(-)
 delete mode 100644 public/images/snapshot-icon.svg

diff --git a/public/images/snapshot-icon.svg b/public/images/snapshot-icon.svg
deleted file mode 100644
index 63fb2f8b18..0000000000
--- a/public/images/snapshot-icon.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="24" height="22" viewBox="0 0 24 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="24" height="22" rx="4"/>
-<path d="M7.40603 11.4047L14.3439 5.39501C14.4213 5.31766 14.6455 5.32534 14.7152 5.39501C14.8682 5.54814 14.7616 5.78173 14.7152 5.85908L12.5572 10.0821H16.0842C16.4322 10.0821 16.6411 10.1053 16.6643 10.3374C16.6828 10.523 16.5947 10.6158 16.5482 10.639C14.3594 12.534 9.93985 16.361 9.77279 16.5095C9.56395 16.6952 9.33192 16.7184 9.19269 16.6256C9.08132 16.5513 9.14629 16.3162 9.19269 16.2079L11.3042 11.9616H7.8469C7.17863 11.9616 7.27454 11.5904 7.40603 11.4047Z" fill="#FABD2E"/>
-</svg>
diff --git a/src/components/Activity/ActivityCard.tsx b/src/components/Activity/ActivityCard.tsx
index e5e7b13f21..0ae0587c17 100644
--- a/src/components/Activity/ActivityCard.tsx
+++ b/src/components/Activity/ActivityCard.tsx
@@ -39,6 +39,7 @@ export function ActivityCard({
             mb="1rem"
           >
             {Badge}
+            {/* TODO: replace with <SnapshotIcon /> */}
             {isSnapshot && (
               <Image
                 src="/images/snapshot-icon-fill.svg"
diff --git a/src/components/Proposals/ProposalActions/CastVote.tsx b/src/components/Proposals/ProposalActions/CastVote.tsx
index fb0b5443f4..789b46ae96 100644
--- a/src/components/Proposals/ProposalActions/CastVote.tsx
+++ b/src/components/Proposals/ProposalActions/CastVote.tsx
@@ -130,6 +130,7 @@ function Vote({
           <Text>{t('poweredBy')}</Text>
           <Flex>
             <Flex mr={1}>
+              {/* TODO: replace with <SnapshotIcon /> */}
               <Image
                 src="/images/snapshot-icon.svg"
                 alt="Snapshot icon"
diff --git a/src/components/Proposals/ProposalCard/ProposalCard.tsx b/src/components/Proposals/ProposalCard/ProposalCard.tsx
index 5a4961f994..81c498dea5 100644
--- a/src/components/Proposals/ProposalCard/ProposalCard.tsx
+++ b/src/components/Proposals/ProposalCard/ProposalCard.tsx
@@ -52,6 +52,7 @@ function ProposalCard({ proposal }: { proposal: FractalProposal }) {
               size="sm"
               proposal={proposal}
             />
+            {/* TODO: replace with <SnapshotIcon /> */}
             {isSnapshotProposal && (
               <Image
                 src="/images/snapshot-icon-fill.svg"
diff --git a/src/components/Proposals/ProposalInfo.tsx b/src/components/Proposals/ProposalInfo.tsx
index c72d393241..4fb32f7362 100644
--- a/src/components/Proposals/ProposalInfo.tsx
+++ b/src/components/Proposals/ProposalInfo.tsx
@@ -6,7 +6,7 @@ import { useGetMetadata } from '../../hooks/DAO/proposal/useGetMetadata';
 import { useFractal } from '../../providers/App/AppProvider';
 import { ExtendedSnapshotProposal, FractalProposal } from '../../types';
 import { ActivityDescription } from '../Activity/ActivityDescription';
-import Snapshot from '../ui/badges/Snapshot';
+import { SnapshotButton } from '../ui/badges/Snapshot';
 import { ModalType } from '../ui/modals/ModalProvider';
 import { useFractalModal } from '../ui/modals/useFractalModal';
 import ProposalExecutableCode from '../ui/proposal/ProposalExecutableCode';
@@ -35,10 +35,7 @@ export function ProposalInfo({
         <ProposalStateBox state={proposal.state} />
         {isSnapshotProposal && (
           <>
-            <Snapshot
-              snapshotURL={`${daoSnapshotURL}/proposal/${proposal.proposalId}`}
-              mt={0}
-            />
+            <SnapshotButton snapshotURL={`${daoSnapshotURL}/proposal/${proposal.proposalId}`} />
             {(proposal as ExtendedSnapshotProposal).privacy === 'shutter' && (
               <Button
                 as={Link}
diff --git a/src/components/ui/badges/Snapshot.tsx b/src/components/ui/badges/Snapshot.tsx
index a871ee970c..d65ccbdd91 100644
--- a/src/components/ui/badges/Snapshot.tsx
+++ b/src/components/ui/badges/Snapshot.tsx
@@ -1,29 +1,49 @@
-import { Button, ButtonProps, Image, Link } from '@chakra-ui/react';
+/* eslint-disable react/function-component-definition */
+import { Button, ButtonProps, Icon, Link } from '@chakra-ui/react';
 import { t } from 'i18next';
 
 interface Props extends ButtonProps {
   snapshotURL: string;
 }
 
-export default function Snapshot({ snapshotURL, mt }: Props) {
+const SnapshotIconSVG = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+  >
+    <path
+      d="M3.26362 10.5915L13.4401 1.77646C13.5535 1.66301 13.8825 1.67427 13.9846 1.77646C14.2091 2.00107 14.0527 2.34371 13.9846 2.45716L10.8194 8.65153H15.9927C16.5032 8.65153 16.8095 8.68557 16.8436 9.02592C16.8708 9.2982 16.7415 9.43434 16.6734 9.46837C13.4628 12.2479 6.98023 17.8614 6.73517 18.0792C6.42886 18.3515 6.08851 18.3856 5.8843 18.2494C5.72093 18.1405 5.81623 17.7956 5.8843 17.6368L8.98148 11.4084H3.91028C2.93008 11.4084 3.07075 10.8638 3.26362 10.5915Z"
+      fill="#DCC8F0"
+    />
+  </svg>
+);
+
+export const SnapshotIcon = () => <Icon as={SnapshotIconSVG} />;
+
+export function SnapshotButton({ snapshotURL }: Props) {
   return (
     <Button
       href={snapshotURL}
       as={Link}
       target="_blank"
-      variant="secondary"
-      mt={mt || 5}
-      h={6}
-      w={32}
+      variant="primary"
+      bg={'neutral-3'}
+      borderRadius="625rem"
+      color={'lilac-0'}
+      borderWidth="1px"
+      borderColor="transparent"
+      _hover={{ textDecoration: 'none', bg: 'neutral-4' }}
+      _active={{ bg: 'neutral-3', borderColor: 'neutral-4' }}
+      size={'sm'}
+
+      // h={6}
+      // w={32}
     >
-      <>
-        <Image
-          src="/images/snapshot-icon.svg"
-          alt="snapshot icon"
-          mr={1}
-        />
-        {t('snapshot')}
-      </>
+      <SnapshotIcon />
+      {t('snapshot')}
     </Button>
   );
 }
diff --git a/src/components/ui/cards/DAOInfoCard.tsx b/src/components/ui/cards/DAOInfoCard.tsx
index 6f20a83091..2810f3d829 100644
--- a/src/components/ui/cards/DAOInfoCard.tsx
+++ b/src/components/ui/cards/DAOInfoCard.tsx
@@ -5,7 +5,7 @@ import useDisplayName from '../../../hooks/utils/useDisplayName';
 import { useFractal } from '../../../providers/App/AppProvider';
 import { useNetworkConfig } from '../../../providers/NetworkConfig/NetworkConfigProvider';
 import { FreezeGuard, FractalGuardContracts, FractalNode } from '../../../types';
-import Snapshot from '../badges/Snapshot';
+import { SnapshotButton } from '../badges/Snapshot';
 import FavoriteIcon from '../icons/FavoriteIcon';
 import AddressCopier from '../links/AddressCopier';
 import { BarLoader } from '../loaders/BarLoader';
@@ -108,8 +108,10 @@ export function DAOInfoCard({
               <Link
                 to={DAO_ROUTES.hierarchy.relative(addressPrefix, displayedAddress)}
                 as={RouterLink}
+                borderWidth="1px"
+                borderColor="transparent"
                 _hover={{ textDecoration: 'none', bg: 'neutral-4' }}
-                _active={{ bg: 'neutral-3' }}
+                _active={{ bg: 'neutral-3', borderColor: 'neutral-4' }}
                 bg="neutral-3"
                 color="lilac-0"
                 borderRadius="625rem"
@@ -137,7 +139,7 @@ export function DAOInfoCard({
         <AddressCopier address={displayedAddress} />
 
         {/* SNAPSHOT ICON LINK */}
-        {node.daoSnapshotURL && <Snapshot snapshotURL={node.daoSnapshotURL} />}
+        {node.daoSnapshotURL && <SnapshotButton snapshotURL={node.daoSnapshotURL} />}
       </VStack>
     </Box>
   );
diff --git a/src/components/ui/links/AddressCopier.tsx b/src/components/ui/links/AddressCopier.tsx
index c28a9b9462..b896311cfe 100644
--- a/src/components/ui/links/AddressCopier.tsx
+++ b/src/components/ui/links/AddressCopier.tsx
@@ -30,7 +30,7 @@ export default function AddressCopier({ address, ...rest }: Props) {
       borderColor={'transparent'}
       textStyle="button-base"
       _hover={{ bg: 'celery--6', borderColor: 'celery--6' }}
-      _active={{ bg: 'celery--6', borderWidth: "1px", borderColor: 'celery--5'}}
+      _active={{ bg: 'celery--6', borderWidth: '1px', borderColor: 'celery--5' }}
       {...rest}
     >
       <EtherscanLinkAddress address={address}>

From 553becd9092a98dc5b0d05ae0207803f6d676b79 Mon Sep 17 00:00:00 2001
From: Kellar <kellar.base09@gmail.com>
Date: Fri, 19 Apr 2024 16:24:16 +0100
Subject: [PATCH 11/22] Size SnapshotButton

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

diff --git a/src/components/ui/badges/Snapshot.tsx b/src/components/ui/badges/Snapshot.tsx
index d65ccbdd91..a60a5c4e2b 100644
--- a/src/components/ui/badges/Snapshot.tsx
+++ b/src/components/ui/badges/Snapshot.tsx
@@ -38,9 +38,8 @@ export function SnapshotButton({ snapshotURL }: Props) {
       _hover={{ textDecoration: 'none', bg: 'neutral-4' }}
       _active={{ bg: 'neutral-3', borderColor: 'neutral-4' }}
       size={'sm'}
-
-      // h={6}
-      // w={32}
+      p={'0.25rem 0.75rem'}
+      width={'fit-content'}
     >
       <SnapshotIcon />
       {t('snapshot')}

From 8144f6c420e839b91cf0ef9bec23cb4cc7bd6ce3 Mon Sep 17 00:00:00 2001
From: Kellar <kellar.base09@gmail.com>
Date: Fri, 19 Apr 2024 17:02:25 +0100
Subject: [PATCH 12/22] Adjust font sizes and colors

---
 .../DaoDashboard/Info/InfoGovernance.tsx      | 96 ++++---------------
 .../pages/DaoDashboard/Info/InfoProposals.tsx | 39 ++------
 .../pages/DaoDashboard/Info/InfoTreasury.tsx  | 18 +---
 3 files changed, 27 insertions(+), 126 deletions(-)

diff --git a/src/components/pages/DaoDashboard/Info/InfoGovernance.tsx b/src/components/pages/DaoDashboard/Info/InfoGovernance.tsx
index a2362e67f4..02c9d8894c 100644
--- a/src/components/pages/DaoDashboard/Info/InfoGovernance.tsx
+++ b/src/components/pages/DaoDashboard/Info/InfoGovernance.tsx
@@ -1,5 +1,5 @@
 import { Box, Flex, Text } from '@chakra-ui/react';
-import { Govern } from '@decent-org/fractal-ui';
+import { Bank } from '@phosphor-icons/react';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import useSafeContracts from '../../../../hooks/safe/useSafeContracts';
@@ -85,22 +85,14 @@ export function InfoGovernance() {
   const governanceAzorius = dao?.isAzorius ? (governance as AzoriusGovernance) : undefined;
 
   return (
-    <Box
-      data-testid="dashboard-daoGovernance"
-      textStyle="text-sm-sans-regular"
-    >
+    <Box data-testid="dashboard-daoGovernance">
       <Flex
         alignItems="center"
         gap="0.4rem"
         mb="0.5rem"
       >
-        <Govern />
-        <Text
-          textStyle="text-sm-sans-regular"
-          color="grayscale.100"
-        >
-          {t('titleGovernance')}
-        </Text>
+        <Bank size="1.5rem" />
+        <Text textStyle="display-lg">{t('titleGovernance')}</Text>
       </Flex>
 
       <Flex
@@ -108,18 +100,8 @@ export function InfoGovernance() {
         justifyContent="space-between"
         mb="0.25rem"
       >
-        <Text
-          textStyle="text-base-sans-regular"
-          color="chocolate.200"
-        >
-          {t('titleType')}
-        </Text>
-        <Text
-          textStyle="text-base-sans-regular"
-          color="grayscale.100"
-        >
-          {governance.type ? t(governance.type.toString(), { ns: 'daoCreate' }) : ''}
-        </Text>
+        <Text color="neutral-7">{t('titleType')}</Text>
+        <Text>{governance.type ? t(governance.type.toString(), { ns: 'daoCreate' }) : ''}</Text>
       </Flex>
 
       {governanceAzorius?.votingStrategy?.votingPeriod && (
@@ -128,16 +110,8 @@ export function InfoGovernance() {
           justifyContent="space-between"
           mb="0.25rem"
         >
-          <Text
-            textStyle="text-base-sans-regular"
-            color="chocolate.200"
-          >
-            {t('titleVotingPeriod')}
-          </Text>
-          <Text
-            textStyle="text-base-sans-regular"
-            color="grayscale.100"
-          >
+          <Text color="neutral-7">{t('titleVotingPeriod')}</Text>
+          <Text textStyle="text-base-sans-regular">
             {governanceAzorius.votingStrategy?.votingPeriod?.formatted}
           </Text>
         </Flex>
@@ -148,16 +122,8 @@ export function InfoGovernance() {
           justifyContent="space-between"
           mb="0.25rem"
         >
-          <Text
-            textStyle="text-base-sans-regular"
-            color="chocolate.200"
-          >
-            {t('titleQuorum')}
-          </Text>
-          <Text
-            textStyle="text-base-sans-regular"
-            color="grayscale.100"
-          >
+          <Text color="neutral-7">{t('titleQuorum')}</Text>
+          <Text textStyle="text-base-sans-regular">
             {governanceAzorius.votingStrategy.quorumPercentage.formatted}
           </Text>
         </Flex>
@@ -168,18 +134,8 @@ export function InfoGovernance() {
           justifyContent="space-between"
           mb="0.25rem"
         >
-          <Text
-            textStyle="text-base-sans-regular"
-            color="chocolate.200"
-          >
-            {t('titleQuorum')}
-          </Text>
-          <Text
-            textStyle="text-base-sans-regular"
-            color="grayscale.100"
-          >
-            {governanceAzorius.votingStrategy.quorumThreshold.formatted}
-          </Text>
+          <Text color="neutral-7">{t('titleQuorum')}</Text>
+          <Text>{governanceAzorius.votingStrategy.quorumThreshold.formatted}</Text>
         </Flex>
       )}
       {timelockPeriod && (
@@ -188,18 +144,8 @@ export function InfoGovernance() {
           justifyContent="space-between"
           mb="0.25rem"
         >
-          <Text
-            textStyle="text-base-sans-regular"
-            color="chocolate.200"
-          >
-            {t('timelock', { ns: 'common' })}
-          </Text>
-          <Text
-            textStyle="text-base-sans-regular"
-            color="grayscale.100"
-          >
-            {timelockPeriod}
-          </Text>
+          <Text color="neutral-7">{t('timelock', { ns: 'common' })}</Text>
+          <Text>{timelockPeriod}</Text>
         </Flex>
       )}
       {executionPeriod && (
@@ -208,18 +154,8 @@ export function InfoGovernance() {
           justifyContent="space-between"
           mb="0.25rem"
         >
-          <Text
-            textStyle="text-base-sans-regular"
-            color="chocolate.200"
-          >
-            {t('execution', { ns: 'common' })}
-          </Text>
-          <Text
-            textStyle="text-base-sans-regular"
-            color="grayscale.100"
-          >
-            {executionPeriod}
-          </Text>
+          <Text color="neutral-7">{t('execution', { ns: 'common' })}</Text>
+          <Text>{executionPeriod}</Text>
         </Flex>
       )}
     </Box>
diff --git a/src/components/pages/DaoDashboard/Info/InfoProposals.tsx b/src/components/pages/DaoDashboard/Info/InfoProposals.tsx
index 9278ccb1b8..f189da5ee1 100644
--- a/src/components/pages/DaoDashboard/Info/InfoProposals.tsx
+++ b/src/components/pages/DaoDashboard/Info/InfoProposals.tsx
@@ -1,5 +1,5 @@
 import { Box, Flex, Text } from '@chakra-ui/react';
-import { Proposals } from '@decent-org/fractal-ui';
+import { Scroll } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
 import { useFractal } from '../../../../providers/App/AppProvider';
 import { FractalProposalState } from '../../../../types';
@@ -51,13 +51,8 @@ export function InfoProposals({}: IDAOGovernance) {
         gap="0.4rem"
         mb="0.5rem"
       >
-        <Proposals />
-        <Text
-          textStyle="text-sm-sans-regular"
-          color="grayscale.100"
-        >
-          {t('titleProposals')}
-        </Text>
+        <Scroll size="1.5rem" />
+        <Text>{t('titleProposals')}</Text>
       </Flex>
 
       <Flex
@@ -65,36 +60,16 @@ export function InfoProposals({}: IDAOGovernance) {
         justifyContent="space-between"
         mb="0.25rem"
       >
-        <Text
-          textStyle="text-base-sans-regular"
-          color="chocolate.200"
-        >
-          {t('titlePending')}
-        </Text>
-        <Text
-          textStyle="text-base-sans-regular"
-          color="grayscale.100"
-        >
-          {active}
-        </Text>
+        <Text color="neutral-7">{t('titlePending')}</Text>
+        <Text>{active}</Text>
       </Flex>
       <Flex
         alignItems="center"
         justifyContent="space-between"
         mb="0.25rem"
       >
-        <Text
-          textStyle="text-base-sans-regular"
-          color="chocolate.200"
-        >
-          {t('titlePassed')}
-        </Text>
-        <Text
-          textStyle="text-base-sans-regular"
-          color="grayscale.100"
-        >
-          {passed}
-        </Text>
+        <Text color="neutral-7">{t('titlePassed')}</Text>
+        <Text>{passed}</Text>
       </Flex>
     </Box>
   );
diff --git a/src/components/pages/DaoDashboard/Info/InfoTreasury.tsx b/src/components/pages/DaoDashboard/Info/InfoTreasury.tsx
index 7646513173..96807c680f 100644
--- a/src/components/pages/DaoDashboard/Info/InfoTreasury.tsx
+++ b/src/components/pages/DaoDashboard/Info/InfoTreasury.tsx
@@ -1,5 +1,5 @@
 import { Box, Flex, Text } from '@chakra-ui/react';
-import { Treasury } from '@decent-org/fractal-ui';
+import { Coins } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
 import { useFractal } from '../../../../providers/App/AppProvider';
 import { formatUSD } from '../../../../utils';
@@ -37,21 +37,11 @@ export function InfoTreasury({}: IDAOGovernance) {
         gap="0.4rem"
         mb="0.5rem"
       >
-        <Treasury />
-        <Text
-          textStyle="text-sm-sans-regular"
-          color="grayscale.100"
-        >
-          {t('titleTreasury')}
-        </Text>
+        <Coins size="1.5rem" />
+        <Text textStyle="display-lg">{t('titleTreasury')}</Text>
       </Flex>
 
-      <Text
-        textStyle="text-lg-mono-semibold"
-        color="grayscale.100"
-      >
-        {formatUSD(totalFiatValue)}
-      </Text>
+      <Text>{formatUSD(totalFiatValue)}</Text>
     </Box>
   );
 }

From 4c0bfc291c5d9031a3d32a27020cc512e1f4049b Mon Sep 17 00:00:00 2001
From: Kellar <kellar.base09@gmail.com>
Date: Fri, 19 Apr 2024 18:08:09 +0100
Subject: [PATCH 13/22] Fine tune infobox spacing. Remove unutilised minWidth
 prop

---
 .../pages/DaoDashboard/Info/DaoInfoHeader.tsx       |  4 +++-
 src/components/ui/containers/InfoBox.tsx            | 13 ++-----------
 2 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/src/components/pages/DaoDashboard/Info/DaoInfoHeader.tsx b/src/components/pages/DaoDashboard/Info/DaoInfoHeader.tsx
index d24fc79fec..a95f170a71 100644
--- a/src/components/pages/DaoDashboard/Info/DaoInfoHeader.tsx
+++ b/src/components/pages/DaoDashboard/Info/DaoInfoHeader.tsx
@@ -32,7 +32,7 @@ export function DaoInfoHeader() {
       <Flex
         flexWrap="wrap"
         justifyContent="space-between"
-        mb="1rem"
+        mb="2rem"
       >
         <Box
           width={{ base: '100%', md: '100%', lg: '33%', xl: '40%' }}
@@ -130,6 +130,7 @@ export function DaoInfoHeader() {
                 <InfoGovernance />
               </InfoBox>
             </Box>
+
             <Box
               width={{ base: '100%', md: '33.3%', lg: '19%', xl: '20%' }}
               ps={{ base: NONE, md: PAD }}
@@ -141,6 +142,7 @@ export function DaoInfoHeader() {
                 <InfoProposals />
               </InfoBox>
             </Box>
+
             <Box
               width={{ base: '100%', md: '33.3%', lg: '23%', xl: '20%' }}
               ps={{ base: NONE, md: PAD }}
diff --git a/src/components/ui/containers/InfoBox.tsx b/src/components/ui/containers/InfoBox.tsx
index dfbd9a692a..1a0c3e3599 100644
--- a/src/components/ui/containers/InfoBox.tsx
+++ b/src/components/ui/containers/InfoBox.tsx
@@ -4,30 +4,21 @@ import { useNavigate } from 'react-router-dom';
 
 type InfoBoxProps = {
   minHeight?: string;
-  minWidth?: { [key: string]: string } | string;
-  m?: string | number;
   to?: string;
   background?: string;
   children: ReactNode;
 } & BoxProps;
 
-export function InfoBox({
-  minWidth = '100%',
-  minHeight = '10.6rem',
-  children,
-  to,
-  ...rest
-}: InfoBoxProps) {
+export function InfoBox({ minHeight = '10.6rem', children, to, ...rest }: InfoBoxProps) {
   const navigate = useNavigate();
   return (
     <Box
       cursor={to ? 'pointer' : undefined}
       onClick={to ? () => navigate(to) : undefined}
-      minWidth={minWidth}
       h="100%"
       minHeight={minHeight}
       p="1.5rem"
-      mx="1.5rem"
+      mx="0.3rem"
       borderWidth="0.06rem"
       borderColor="neutral-3"
       borderRadius="0.5rem"

From f5c0b5bdb3fc17e98e50e958a8609385e23204fe Mon Sep 17 00:00:00 2001
From: Kellar <kellar.base09@gmail.com>
Date: Fri, 19 Apr 2024 18:08:39 +0100
Subject: [PATCH 14/22] Reskin sorter

---
 .../pages/DaoDashboard/Activities/index.tsx   |  3 +-
 src/components/ui/utils/Sort.tsx              | 31 ++++++++++---------
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/components/pages/DaoDashboard/Activities/index.tsx b/src/components/pages/DaoDashboard/Activities/index.tsx
index 409dd63169..3e0af167f6 100644
--- a/src/components/pages/DaoDashboard/Activities/index.tsx
+++ b/src/components/pages/DaoDashboard/Activities/index.tsx
@@ -25,8 +25,9 @@ export function Activities() {
   return (
     <Box>
       <Flex
-        justifyContent="flex-end"
+        justifyContent="flex-start"
         alignItems="center"
+        mx="0.5rem"
         my="1rem"
       >
         <Sort
diff --git a/src/components/ui/utils/Sort.tsx b/src/components/ui/utils/Sort.tsx
index 3bbf3753e9..5bbc11d1ac 100644
--- a/src/components/ui/utils/Sort.tsx
+++ b/src/components/ui/utils/Sort.tsx
@@ -1,5 +1,5 @@
-import { Flex, Menu, MenuButton, MenuItem, MenuList, Text } from '@chakra-ui/react';
-import { ArrowDownSm } from '@decent-org/fractal-ui';
+import { Divider, Flex, Icon, Menu, MenuButton, MenuItem, MenuList, Text } from '@chakra-ui/react';
+import { CaretDown } from "@phosphor-icons/react";
 import { Dispatch, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
 import { SortBy } from '../../../types';
@@ -45,27 +45,28 @@ export function Sort({ sortBy, setSortBy, buttonProps }: ISort) {
     <Menu direction="ltr">
       <MenuButton
         data-testid="sort-openMenu"
-        color="gold.500"
+        color="lilac-0"
+        p="0.25rem 0.5rem"
         sx={{
           '&:hover': {
-            color: 'gold.500-hover',
+            color: 'lilac--1',
+            bg: 'white-alpha-04',
+            borderRadius: '0.25rem',
           },
         }}
         {...buttonProps}
       >
-        <Flex
-          alignItems="center"
-          color="gold.500"
-        >
-          <Text textStyle="text-sm-mono-medium">{t(sortBy)}</Text>
-          <ArrowDownSm boxSize="1.5rem" />
+        <Flex alignItems="center">
+          <Text>{t(sortBy)}</Text>
+          <Icon ml="0.25rem" p={1.25} as={CaretDown} />
         </Flex>
       </MenuButton>
+
       <MenuList
-        border="none"
-        rounded="lg"
-        shadow="menu-gold"
-        bg="grayscale.black"
+        borderWidth="1px"
+        borderColor="neutral-3"
+        borderRadius="0.5rem"
+        bg="neutral-2" // neutral-2-84 ??
         p="0.5rem 1rem"
         minWidth="min-content"
         zIndex={5}
@@ -75,6 +76,8 @@ export function Sort({ sortBy, setSortBy, buttonProps }: ISort) {
           testId="sort-newest"
           onClick={() => setSortBy(SortBy.Newest)}
         />
+        {/* TODO Divider look doesn't quite match */}
+        <Divider color="neutral-3" />
         <SortMenuItem
           labelKey={SortBy.Oldest}
           testId="sort-oldest"

From 3da8ee7649058d2209db6db6ab15da6a04dd105c Mon Sep 17 00:00:00 2001
From: Kellar <kellar.base09@gmail.com>
Date: Fri, 19 Apr 2024 18:19:16 +0100
Subject: [PATCH 15/22] Half-assed sort and dao options menu reskin. Needs more
 work

---
 .../ui/menus/OptionMenu/OptionsList.tsx         | 17 ++++-------------
 src/components/ui/menus/OptionMenu/index.tsx    | 11 ++++++-----
 src/components/ui/utils/Sort.tsx                |  4 +---
 3 files changed, 11 insertions(+), 21 deletions(-)

diff --git a/src/components/ui/menus/OptionMenu/OptionsList.tsx b/src/components/ui/menus/OptionMenu/OptionsList.tsx
index 6853e7ccd4..50e1c9b211 100644
--- a/src/components/ui/menus/OptionMenu/OptionsList.tsx
+++ b/src/components/ui/menus/OptionMenu/OptionsList.tsx
@@ -20,11 +20,7 @@ export function OptionsList({
   return (
     <>
       {titleKey && (
-        <Text
-          textStyle="text-sm-sans-regular"
-          color="chocolate.200"
-          marginBottom="0.5rem"
-        >
+        <Text marginBottom="0.5rem" textStyle="helper-text-small" color="neutral-7">
           {t(titleKey)}
         </Text>
       )}
@@ -36,11 +32,8 @@ export function OptionsList({
               as={showOptionSelected ? Box : Text}
               onClick={clickListener}
               cursor="pointer"
-              textStyle="text-base-mono-medium"
-              color="grayscale.100"
-              _hover={{ color: 'gold.200', textDecoration: 'none' }}
-              paddingStart="0rem"
-              paddingEnd="0rem"
+              _hover={{ bg: 'neutral-3', textDecoration: 'none' }}
+              p="0.5rem 1rem"
               gap={2}
               closeOnSelect={closeOnSelect}
               data-testid={'optionMenu-' + option.optionKey}
@@ -50,7 +43,6 @@ export function OptionsList({
                   <Checkbox
                     isChecked={option.isSelected}
                     onChange={clickListener}
-                    colorScheme="gold"
                     iconColor="black.900"
                     marginEnd="0.5rem"
                   />
@@ -62,7 +54,6 @@ export function OptionsList({
               {showOptionCount && (
                 <Text
                   textStyle="text-base-mono-medium"
-                  color={option.count ? 'grayscale.100' : 'grayscale.500'}
                   as="span"
                 >
                   {option.count}
@@ -73,7 +64,7 @@ export function OptionsList({
               <Divider
                 marginTop="0.25rem"
                 marginBottom="0.25rem"
-                color="chocolate.700"
+                color="neutral-3"
               />
             )}
           </Box>
diff --git a/src/components/ui/menus/OptionMenu/index.tsx b/src/components/ui/menus/OptionMenu/index.tsx
index f8720a0814..ebc030a2e3 100644
--- a/src/components/ui/menus/OptionMenu/index.tsx
+++ b/src/components/ui/menus/OptionMenu/index.tsx
@@ -50,13 +50,14 @@ export function OptionMenu({
           {trigger}
         </MenuButton>
       </Tooltip>
+
       <MenuList
-        rounded="lg"
-        shadow="menu-gold"
+        borderWidth="1px"
+        borderColor="neutral-3"
+        borderRadius="0.5rem"
+        bg="neutral-2" // neutral-2-84 ??
+        p="0.5rem 1rem"
         mr={['auto', '1rem']}
-        bg="grayscale.black"
-        border="none"
-        padding="1rem"
         zIndex={1000}
       >
         {children}
diff --git a/src/components/ui/utils/Sort.tsx b/src/components/ui/utils/Sort.tsx
index 5bbc11d1ac..83e3733e32 100644
--- a/src/components/ui/utils/Sort.tsx
+++ b/src/components/ui/utils/Sort.tsx
@@ -19,9 +19,7 @@ function SortMenuItem({
       py="0.5rem"
       color="grayscale.100"
       sx={{
-        '&:hover': {
-          color: 'gold.500',
-        },
+        '&:hover': { bg: 'neutral-3' },
       }}
       data-testid={testId}
       onClick={onClick}

From fa3944d99d93208e3ea70bb9b3e0683b1c971759 Mon Sep 17 00:00:00 2001
From: Kellar <kellar.base09@gmail.com>
Date: Fri, 19 Apr 2024 18:20:48 +0100
Subject: [PATCH 16/22] prettier

---
 src/components/ui/menus/OptionMenu/OptionsList.tsx | 6 +++++-
 src/components/ui/utils/Sort.tsx                   | 8 ++++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/ui/menus/OptionMenu/OptionsList.tsx b/src/components/ui/menus/OptionMenu/OptionsList.tsx
index 50e1c9b211..bb9479554e 100644
--- a/src/components/ui/menus/OptionMenu/OptionsList.tsx
+++ b/src/components/ui/menus/OptionMenu/OptionsList.tsx
@@ -20,7 +20,11 @@ export function OptionsList({
   return (
     <>
       {titleKey && (
-        <Text marginBottom="0.5rem" textStyle="helper-text-small" color="neutral-7">
+        <Text
+          marginBottom="0.5rem"
+          textStyle="helper-text-small"
+          color="neutral-7"
+        >
           {t(titleKey)}
         </Text>
       )}
diff --git a/src/components/ui/utils/Sort.tsx b/src/components/ui/utils/Sort.tsx
index 83e3733e32..d045b44920 100644
--- a/src/components/ui/utils/Sort.tsx
+++ b/src/components/ui/utils/Sort.tsx
@@ -1,5 +1,5 @@
 import { Divider, Flex, Icon, Menu, MenuButton, MenuItem, MenuList, Text } from '@chakra-ui/react';
-import { CaretDown } from "@phosphor-icons/react";
+import { CaretDown } from '@phosphor-icons/react';
 import { Dispatch, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
 import { SortBy } from '../../../types';
@@ -56,7 +56,11 @@ export function Sort({ sortBy, setSortBy, buttonProps }: ISort) {
       >
         <Flex alignItems="center">
           <Text>{t(sortBy)}</Text>
-          <Icon ml="0.25rem" p={1.25} as={CaretDown} />
+          <Icon
+            ml="0.25rem"
+            p={1.25}
+            as={CaretDown}
+          />
         </Flex>
       </MenuButton>
 

From 19e92ac828e43025682f33bfb8150b46a8181cfc Mon Sep 17 00:00:00 2001
From: Kellar <kellar.base09@gmail.com>
Date: Fri, 19 Apr 2024 18:32:40 +0100
Subject: [PATCH 17/22] Remove unneeded `iconColor`

---
 src/components/ui/colors.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/ui/colors.tsx b/src/components/ui/colors.tsx
index 606f19c153..c5e7085aff 100644
--- a/src/components/ui/colors.tsx
+++ b/src/components/ui/colors.tsx
@@ -6,5 +6,3 @@ export enum Green {
 export enum Red {
   _600 = '#BA5F5F', // TODO what should the number be here?
 }
-
-export const iconColor = (chakraUIColor: string) => `var(--chakra-colors-${chakraUIColor})`;

From 8d2be8698d7d0ebdcaadc6ff70a1f21b66c44732 Mon Sep 17 00:00:00 2001
From: Kellar <kellar.base09@gmail.com>
Date: Mon, 22 Apr 2024 18:41:39 +0100
Subject: [PATCH 18/22] cleanup

---
 src/components/pages/DaoDashboard/Info/DaoInfoHeader.tsx | 7 ++-----
 .../pages/DaoDashboard/Info/InfoGovernance.tsx           | 4 ++--
 src/components/pages/DaoDashboard/Info/ParentLink.tsx    | 5 +----
 src/components/pages/DaoSettings/components/index.tsx    | 8 ++------
 src/components/ui/icons/FavoriteIcon.tsx                 | 9 +++------
 src/components/ui/menus/ManageDAO/ManageDAOMenu.tsx      | 6 +++---
 src/components/ui/menus/OptionMenu/OptionsList.tsx       | 1 -
 src/components/ui/utils/Sort.tsx                         | 3 +--
 8 files changed, 14 insertions(+), 29 deletions(-)

diff --git a/src/components/pages/DaoDashboard/Info/DaoInfoHeader.tsx b/src/components/pages/DaoDashboard/Info/DaoInfoHeader.tsx
index a95f170a71..557be222f4 100644
--- a/src/components/pages/DaoDashboard/Info/DaoInfoHeader.tsx
+++ b/src/components/pages/DaoDashboard/Info/DaoInfoHeader.tsx
@@ -98,13 +98,10 @@ export function DaoInfoHeader() {
                       backgroundPosition="50%"
                     />
                   )}
-                  <Text
-                    textStyle="text-lg-mono-regular"
-                    marginBottom={2}
-                  >
+                  <Text marginBottom={2}>
                     {section.title}
                   </Text>
-                  <Text textStyle="text-base-mono-regular">
+                  <Text>
                     {section.link && section.link.position === 'start' && (
                       <ExternalLink href={section.link.url}>{section.link.text}</ExternalLink>
                     )}
diff --git a/src/components/pages/DaoDashboard/Info/InfoGovernance.tsx b/src/components/pages/DaoDashboard/Info/InfoGovernance.tsx
index 02c9d8894c..50994defa3 100644
--- a/src/components/pages/DaoDashboard/Info/InfoGovernance.tsx
+++ b/src/components/pages/DaoDashboard/Info/InfoGovernance.tsx
@@ -111,7 +111,7 @@ export function InfoGovernance() {
           mb="0.25rem"
         >
           <Text color="neutral-7">{t('titleVotingPeriod')}</Text>
-          <Text textStyle="text-base-sans-regular">
+          <Text>
             {governanceAzorius.votingStrategy?.votingPeriod?.formatted}
           </Text>
         </Flex>
@@ -123,7 +123,7 @@ export function InfoGovernance() {
           mb="0.25rem"
         >
           <Text color="neutral-7">{t('titleQuorum')}</Text>
-          <Text textStyle="text-base-sans-regular">
+          <Text>
             {governanceAzorius.votingStrategy.quorumPercentage.formatted}
           </Text>
         </Flex>
diff --git a/src/components/pages/DaoDashboard/Info/ParentLink.tsx b/src/components/pages/DaoDashboard/Info/ParentLink.tsx
index d496bbdcae..929a9273b0 100644
--- a/src/components/pages/DaoDashboard/Info/ParentLink.tsx
+++ b/src/components/pages/DaoDashboard/Info/ParentLink.tsx
@@ -37,10 +37,7 @@ export function ParentLink() {
           src="/images/arrow-up-left.svg"
           alt={t('parentLink')}
         />
-        <Text
-          textStyle="text-base-mono-bold"
-          flexWrap="wrap"
-        >
+        <Text flexWrap="wrap">
           {t('parentLink')}
         </Text>
       </HStack>
diff --git a/src/components/pages/DaoSettings/components/index.tsx b/src/components/pages/DaoSettings/components/index.tsx
index 27c73bb252..0600645e5d 100644
--- a/src/components/pages/DaoSettings/components/index.tsx
+++ b/src/components/pages/DaoSettings/components/index.tsx
@@ -31,7 +31,7 @@ export function SettingsSection({
         minHeight="6.25rem"
         minWidth="65%"
       >
-        {contentHeader || <Text textStyle="text-lg-mono-bold">{contentTitle}</Text>}
+        {contentHeader || <Text>{contentTitle}</Text>}
         <Divider
           marginTop="1rem"
           color="chocolate.400"
@@ -51,11 +51,7 @@ export function SettingsSection({
           </Text>
         )}
         {descriptionContent || (
-          <Text
-            textStyle="text-sm-sans-regular"
-            color="chocolate.200"
-            mt={2}
-          >
+          <Text mt={2}>
             {descriptionText}
           </Text>
         )}
diff --git a/src/components/ui/icons/FavoriteIcon.tsx b/src/components/ui/icons/FavoriteIcon.tsx
index 14909680e4..ce4f6ac5df 100644
--- a/src/components/ui/icons/FavoriteIcon.tsx
+++ b/src/components/ui/icons/FavoriteIcon.tsx
@@ -1,4 +1,4 @@
-import { Box, BoxProps, IconButton, Tooltip } from '@chakra-ui/react';
+import { Box, BoxProps, Button, IconButton, Tooltip } from '@chakra-ui/react';
 import { Star } from '@phosphor-icons/react';
 import { utils } from 'ethers';
 import { useMemo } from 'react';
@@ -20,13 +20,10 @@ export default function FavoriteIcon({ safeAddress, ...rest }: Props) {
     <Box {...rest}>
       <Tooltip label={t('favoriteTooltip')}>
         <IconButton
-          variant="ghost"
+          variant="tertiary"
           p="0.5rem"
           size="md"
-          color={'lilac-0'}
-          borderRadius="0.25rem"
-          _hover={{ color: 'lilac--1', backgroundColor: 'white-alpha-04' }}
-          _active={{ color: 'lilac--2' }}
+          as={Button}
           icon={<Star weight={isFavorite ? 'fill' : 'regular'} />}
           onClick={() => toggleFavorite(safeAddress)}
           aria-label={t('favoriteTooltip')}
diff --git a/src/components/ui/menus/ManageDAO/ManageDAOMenu.tsx b/src/components/ui/menus/ManageDAO/ManageDAOMenu.tsx
index 886c879bfb..c00906d3f0 100644
--- a/src/components/ui/menus/ManageDAO/ManageDAOMenu.tsx
+++ b/src/components/ui/menus/ManageDAO/ManageDAOMenu.tsx
@@ -1,3 +1,4 @@
+import { Button } from '@chakra-ui/react';
 import { ERC20FreezeVoting, MultisigFreezeVoting } from '@fractal-framework/fractal-contracts';
 import { GearFine } from '@phosphor-icons/react';
 import { useMemo, useCallback, useState, useEffect } from 'react';
@@ -247,13 +248,12 @@ export function ManageDAOMenu({
       titleKey={canUserCreateProposal ? 'titleManageDAO' : 'titleViewDAODetails'}
       options={options}
       namespace="menu"
+      buttonAs={Button}
       buttonProps={{
+        variant: 'tertiary',
         borderRadius: '0.25rem',
         p: '0.5rem',
         color: 'lilac-0',
-        variant: 'ghost',
-        _hover: { color: 'lilac--1', backgroundColor: 'white-alpha-04' },
-        _active: { color: 'lilac--2' },
       }}
     />
   );
diff --git a/src/components/ui/menus/OptionMenu/OptionsList.tsx b/src/components/ui/menus/OptionMenu/OptionsList.tsx
index bb9479554e..2137756bdc 100644
--- a/src/components/ui/menus/OptionMenu/OptionsList.tsx
+++ b/src/components/ui/menus/OptionMenu/OptionsList.tsx
@@ -47,7 +47,6 @@ export function OptionsList({
                   <Checkbox
                     isChecked={option.isSelected}
                     onChange={clickListener}
-                    iconColor="black.900"
                     marginEnd="0.5rem"
                   />
                   {t(option.optionKey)}
diff --git a/src/components/ui/utils/Sort.tsx b/src/components/ui/utils/Sort.tsx
index d045b44920..80f6697439 100644
--- a/src/components/ui/utils/Sort.tsx
+++ b/src/components/ui/utils/Sort.tsx
@@ -17,14 +17,13 @@ function SortMenuItem({
   return (
     <MenuItem
       py="0.5rem"
-      color="grayscale.100"
       sx={{
         '&:hover': { bg: 'neutral-3' },
       }}
       data-testid={testId}
       onClick={onClick}
     >
-      <Text textStyle="text-sm-mono-semibold">{t(labelKey)}</Text>
+      <Text>{t(labelKey)}</Text>
     </MenuItem>
   );
 }

From 1419366fd03c8f8e9d2d186607106538527325d6 Mon Sep 17 00:00:00 2001
From: Kellar <kellar.base09@gmail.com>
Date: Mon, 22 Apr 2024 18:44:18 +0100
Subject: [PATCH 19/22] prettier

---
 src/components/pages/DaoDashboard/Info/DaoInfoHeader.tsx  | 4 +---
 src/components/pages/DaoDashboard/Info/InfoGovernance.tsx | 8 ++------
 src/components/pages/DaoDashboard/Info/ParentLink.tsx     | 4 +---
 src/components/pages/DaoSettings/components/index.tsx     | 6 +-----
 4 files changed, 5 insertions(+), 17 deletions(-)

diff --git a/src/components/pages/DaoDashboard/Info/DaoInfoHeader.tsx b/src/components/pages/DaoDashboard/Info/DaoInfoHeader.tsx
index 557be222f4..f993fe88a1 100644
--- a/src/components/pages/DaoDashboard/Info/DaoInfoHeader.tsx
+++ b/src/components/pages/DaoDashboard/Info/DaoInfoHeader.tsx
@@ -98,9 +98,7 @@ export function DaoInfoHeader() {
                       backgroundPosition="50%"
                     />
                   )}
-                  <Text marginBottom={2}>
-                    {section.title}
-                  </Text>
+                  <Text marginBottom={2}>{section.title}</Text>
                   <Text>
                     {section.link && section.link.position === 'start' && (
                       <ExternalLink href={section.link.url}>{section.link.text}</ExternalLink>
diff --git a/src/components/pages/DaoDashboard/Info/InfoGovernance.tsx b/src/components/pages/DaoDashboard/Info/InfoGovernance.tsx
index 50994defa3..a6841fa9fc 100644
--- a/src/components/pages/DaoDashboard/Info/InfoGovernance.tsx
+++ b/src/components/pages/DaoDashboard/Info/InfoGovernance.tsx
@@ -111,9 +111,7 @@ export function InfoGovernance() {
           mb="0.25rem"
         >
           <Text color="neutral-7">{t('titleVotingPeriod')}</Text>
-          <Text>
-            {governanceAzorius.votingStrategy?.votingPeriod?.formatted}
-          </Text>
+          <Text>{governanceAzorius.votingStrategy?.votingPeriod?.formatted}</Text>
         </Flex>
       )}
       {governanceAzorius?.votingStrategy?.quorumPercentage && (
@@ -123,9 +121,7 @@ export function InfoGovernance() {
           mb="0.25rem"
         >
           <Text color="neutral-7">{t('titleQuorum')}</Text>
-          <Text>
-            {governanceAzorius.votingStrategy.quorumPercentage.formatted}
-          </Text>
+          <Text>{governanceAzorius.votingStrategy.quorumPercentage.formatted}</Text>
         </Flex>
       )}
       {governanceAzorius?.votingStrategy?.quorumThreshold && (
diff --git a/src/components/pages/DaoDashboard/Info/ParentLink.tsx b/src/components/pages/DaoDashboard/Info/ParentLink.tsx
index 929a9273b0..f2a4826b79 100644
--- a/src/components/pages/DaoDashboard/Info/ParentLink.tsx
+++ b/src/components/pages/DaoDashboard/Info/ParentLink.tsx
@@ -37,9 +37,7 @@ export function ParentLink() {
           src="/images/arrow-up-left.svg"
           alt={t('parentLink')}
         />
-        <Text flexWrap="wrap">
-          {t('parentLink')}
-        </Text>
+        <Text flexWrap="wrap">{t('parentLink')}</Text>
       </HStack>
     </Link>
   );
diff --git a/src/components/pages/DaoSettings/components/index.tsx b/src/components/pages/DaoSettings/components/index.tsx
index 0600645e5d..8196e893e9 100644
--- a/src/components/pages/DaoSettings/components/index.tsx
+++ b/src/components/pages/DaoSettings/components/index.tsx
@@ -50,11 +50,7 @@ export function SettingsSection({
             {descriptionTitle}
           </Text>
         )}
-        {descriptionContent || (
-          <Text mt={2}>
-            {descriptionText}
-          </Text>
-        )}
+        {descriptionContent || <Text mt={2}>{descriptionText}</Text>}
       </StyledBox>
     </Flex>
   );

From 5e0911a75c8be17802cbdd39765a97fa45c156a7 Mon Sep 17 00:00:00 2001
From: Kellar <kellar.base09@gmail.com>
Date: Tue, 23 Apr 2024 09:32:52 +0100
Subject: [PATCH 20/22] cleanup

---
 src/components/ui/menus/OptionMenu/OptionsList.tsx | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/src/components/ui/menus/OptionMenu/OptionsList.tsx b/src/components/ui/menus/OptionMenu/OptionsList.tsx
index 2137756bdc..60632feda0 100644
--- a/src/components/ui/menus/OptionMenu/OptionsList.tsx
+++ b/src/components/ui/menus/OptionMenu/OptionsList.tsx
@@ -54,14 +54,7 @@ export function OptionsList({
               ) : (
                 t(option.optionKey)
               )}
-              {showOptionCount && (
-                <Text
-                  textStyle="text-base-mono-medium"
-                  as="span"
-                >
-                  {option.count}
-                </Text>
-              )}
+              {showOptionCount && <Text as="span">{option.count}</Text>}
             </MenuItem>
             {options[options.length - 1] !== option && (
               <Divider

From 735cfc8fffd082e3d649b68d90a45ab6215ce668 Mon Sep 17 00:00:00 2001
From: Kellar <kellar.base09@gmail.com>
Date: Tue, 23 Apr 2024 12:23:26 +0100
Subject: [PATCH 21/22] Have `AddressCopier` box width fit its content

---
 src/components/ui/links/AddressCopier.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/ui/links/AddressCopier.tsx b/src/components/ui/links/AddressCopier.tsx
index b896311cfe..fb9e25dd9b 100644
--- a/src/components/ui/links/AddressCopier.tsx
+++ b/src/components/ui/links/AddressCopier.tsx
@@ -29,6 +29,7 @@ export default function AddressCopier({ address, ...rest }: Props) {
       borderWidth="1px"
       borderColor={'transparent'}
       textStyle="button-base"
+      width="fit-content"
       _hover={{ bg: 'celery--6', borderColor: 'celery--6' }}
       _active={{ bg: 'celery--6', borderWidth: '1px', borderColor: 'celery--5' }}
       {...rest}

From e087af52bf9324eedc43e8e4254f1681a59de701 Mon Sep 17 00:00:00 2001
From: Kellar <kellar.base09@gmail.com>
Date: Tue, 23 Apr 2024 13:00:31 +0100
Subject: [PATCH 22/22] prettier

---
 src/components/Proposals/ProposalInfo.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/Proposals/ProposalInfo.tsx b/src/components/Proposals/ProposalInfo.tsx
index 7669cd7245..0fb5ca54d6 100644
--- a/src/components/Proposals/ProposalInfo.tsx
+++ b/src/components/Proposals/ProposalInfo.tsx
@@ -35,7 +35,9 @@ export function ProposalInfo({
         <ProposalStateBox state={proposal.state} />
         {isSnapshotProposal && (
           <>
-            <SnapshotButton snapshotENS={`https://snapshot.org/#${daoSnapshotENS}/proposal/${proposal.proposalId}`}/>
+            <SnapshotButton
+              snapshotENS={`https://snapshot.org/#${daoSnapshotENS}/proposal/${proposal.proposalId}`}
+            />
             {(proposal as ExtendedSnapshotProposal).privacy === 'shutter' && (
               <Button
                 as={Link}