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 @@ - - - - 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 */} {isSnapshot && ( {t('poweredBy')} + {/* TODO: replace with */} Snapshot icon + {/* TODO: replace with */} {isSnapshotProposal && ( {isSnapshotProposal && ( <> - {(proposal as ExtendedSnapshotProposal).privacy === 'shutter' && ( ); } diff --git a/src/components/ui/cards/DAOInfoCard.tsx b/src/components/ui/cards/DAOInfoCard.tsx index 1479f3190a..edd22b6e99 100644 --- a/src/components/ui/cards/DAOInfoCard.tsx +++ b/src/components/ui/cards/DAOInfoCard.tsx @@ -1,12 +1,12 @@ -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'; import { useFractal } from '../../../providers/App/AppProvider'; import { useNetworkConfig } from '../../../providers/NetworkConfig/NetworkConfigProvider'; import { FreezeGuard, FractalGuardContracts, FractalNode } from '../../../types'; -import Snapshot from '../badges/Snapshot'; -import FavoriteIcon from '../icons/FavoriteIcon'; +import { SnapshotButton } from '../badges/Snapshot'; +import { FavoriteIcon } from '../icons/FavoriteIcon'; import AddressCopier from '../links/AddressCopier'; import { BarLoader } from '../loaders/BarLoader'; import { ManageDAOMenu } from '../menus/ManageDAO/ManageDAOMenu'; @@ -66,80 +66,81 @@ export function DAOInfoCard({ const isCurrentDAO = displayedAddress === currentDAOAddress; return ( - - + - - { - // 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(); - } - }} - > - - {node.daoName || displayName} - - - - {childCount && childCount > 0 && ( + {/* DAO NAME AND ACTIONS */} + + + {/* DAO NAME */} { + // 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(); + } + }} > - - {childCount} - + {node.daoName || displayName} + + {/* FAVORITE ICON */} + + + {/* PARENT TAG */} + {childCount && childCount > 0 && ( + + Parent + + )} + + + + + {!!user.address && ( + )} - + + + {/* DAO ADDRESS */} - - - - {!!user.address ? ( - - ) : ( - // empty box to keep snapshot bottom aligned - - )} - {node.daoSnapshotENS && } - - + + {/* SNAPSHOT ICON LINK */} + {node.daoSnapshotENS && } + + ); } diff --git a/src/components/ui/containers/InfoBox.tsx b/src/components/ui/containers/InfoBox.tsx index e4b2bdaa2d..1a0c3e3599 100644 --- a/src/components/ui/containers/InfoBox.tsx +++ b/src/components/ui/containers/InfoBox.tsx @@ -1,41 +1,26 @@ 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; - 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, - background, - ...rest -}: InfoBoxProps) { +export function InfoBox({ minHeight = '10.6rem', children, to, ...rest }: InfoBoxProps) { const navigate = useNavigate(); return ( { - navigate(to); - } - : undefined - } - minWidth={minWidth} + onClick={to ? () => navigate(to) : undefined} h="100%" minHeight={minHeight} - bg={background || BACKGROUND_SEMI_TRANSPARENT} - p="1rem" + p="1.5rem" + mx="0.3rem" + borderWidth="0.06rem" + borderColor="neutral-3" borderRadius="0.5rem" {...rest} > diff --git a/src/components/ui/icons/FavoriteIcon.tsx b/src/components/ui/icons/FavoriteIcon.tsx index c3bdeb1f74..c87a6a8fd8 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 { Box, BoxProps, Button, IconButton, Tooltip } from '@chakra-ui/react'; +import { Star } from '@phosphor-icons/react'; import { useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { getAddress } from 'viem'; @@ -9,7 +9,7 @@ interface Props extends BoxProps { safeAddress: string; } -export default function FavoriteIcon({ safeAddress, ...rest }: Props) { +export function FavoriteIcon({ safeAddress, ...rest }: Props) { const { favoritesList, toggleFavorite } = useAccountFavorites(); const isFavorite = useMemo( () => (!!safeAddress ? favoritesList.includes(getAddress(safeAddress)) : false), @@ -20,11 +20,11 @@ export default function FavoriteIcon({ safeAddress, ...rest }: Props) { : } + variant="tertiary" + p="0.5rem" + size="md" + as={Button} + icon={} onClick={() => toggleFavorite(safeAddress)} aria-label={t('favoriteTooltip')} /> diff --git a/src/components/ui/links/AddressCopier.tsx b/src/components/ui/links/AddressCopier.tsx index 574670596f..fb9e25dd9b 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,24 @@ export default function AddressCopier({ address, ...rest }: Props) { 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" + borderRadius="625rem" + 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} > - - {accountSubstring} + + {accountSubstring} - + ); } diff --git a/src/components/ui/menus/ManageDAO/ManageDAOMenu.tsx b/src/components/ui/menus/ManageDAO/ManageDAOMenu.tsx index 58dbf794f8..c00906d3f0 100644 --- a/src/components/ui/menus/ManageDAO/ManageDAOMenu.tsx +++ b/src/components/ui/menus/ManageDAO/ManageDAOMenu.tsx @@ -1,5 +1,6 @@ -import { VEllipsis } from '@decent-org/fractal-ui'; +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'; import { useNavigate } from 'react-router-dom'; import { DAO_ROUTES } from '../../../../constants/routes'; @@ -36,7 +37,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 +244,17 @@ export function ManageDAOMenu({ return ( - } + trigger={} titleKey={canUserCreateProposal ? 'titleManageDAO' : 'titleViewDAODetails'} options={options} namespace="menu" + buttonAs={Button} + buttonProps={{ + variant: 'tertiary', + borderRadius: '0.25rem', + p: '0.5rem', + color: 'lilac-0', + }} /> ); } diff --git a/src/components/ui/menus/OptionMenu/components/index.tsx b/src/components/ui/menus/OptionMenu/OptionsList.tsx similarity index 62% rename from src/components/ui/menus/OptionMenu/components/index.tsx rename to src/components/ui/menus/OptionMenu/OptionsList.tsx index 0f2566e61b..60632feda0 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, @@ -36,9 +21,9 @@ export default function OptionsList({ <> {titleKey && ( {t(titleKey)} @@ -51,11 +36,8 @@ export default 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} @@ -65,8 +47,6 @@ export default function OptionsList({ {t(option.optionKey)} @@ -74,21 +54,13 @@ export default function OptionsList({ ) : ( t(option.optionKey) )} - {showOptionCount && ( - - {option.count} - - )} + {showOptionCount && {option.count}} {options[options.length - 1] !== option && ( )} diff --git a/src/components/ui/menus/OptionMenu/index.tsx b/src/components/ui/menus/OptionMenu/index.tsx index add0ecc34e..ebc030a2e3 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, IOptionsList { trigger: ReactNode; tooltipKey?: string; options: IOption[]; buttonAs?: As; - buttonProps?: Record; + buttonProps?: Record>; children?: ReactNode; } @@ -44,19 +45,19 @@ export function OptionMenu({ onClick={(event: MouseEvent) => { event.stopPropagation(); }} - _hover={{ color: 'gold.500-hover' }} {...buttonProps} > {trigger} + {children} 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; +} diff --git a/src/components/ui/utils/Sort.tsx b/src/components/ui/utils/Sort.tsx index 3bbf3753e9..80f6697439 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'; @@ -17,16 +17,13 @@ function SortMenuItem({ return ( - {t(labelKey)} + {t(labelKey)} ); } @@ -45,27 +42,32 @@ export function Sort({ sortBy, setSortBy, buttonProps }: ISort) { - - {t(sortBy)} - + + {t(sortBy)} + + setSortBy(SortBy.Newest)} /> + {/* TODO Divider look doesn't quite match */} + - + {daoMetadata && } - +