From 402f97eebfaeec91be2a83ecc0feb79ce878d656 Mon Sep 17 00:00:00 2001 From: Kirill Klimenko Date: Fri, 26 Apr 2024 13:23:30 +0200 Subject: [PATCH] Restyle proposals list --- .../Activity/ActivityDescription.tsx | 3 +- .../ActivityDescriptionGovernance.tsx | 11 +- .../Proposals/ProposalCard/ProposalCard.tsx | 24 ++-- src/components/Proposals/index.tsx | 20 ++- src/components/ui/badges/Badge.tsx | 116 +++++++----------- src/components/ui/badges/QuorumBadge.tsx | 7 +- src/components/ui/page/Header/Breadcrumbs.tsx | 4 +- src/i18n/locales/en/breadcrumbs.json | 2 +- 8 files changed, 84 insertions(+), 103 deletions(-) diff --git a/src/components/Activity/ActivityDescription.tsx b/src/components/Activity/ActivityDescription.tsx index 6e4703c4e0..de604ea971 100644 --- a/src/components/Activity/ActivityDescription.tsx +++ b/src/components/Activity/ActivityDescription.tsx @@ -29,7 +29,8 @@ export function ActivityDescription({ activity, showFullDescription }: IActivity {description && ( @@ -52,13 +57,10 @@ function ProposalCard({ proposal }: { proposal: FractalProposal }) { size="sm" proposal={proposal} /> - {/* TODO: replace with */} {isSnapshotProposal && ( - {t('snapshot')} + + + )} @@ -68,8 +70,8 @@ function ProposalCard({ proposal }: { proposal: FractalProposal }) { {proposal.eventDate && ( {eventDateLabel} {format(proposal.eventDate, DEFAULT_DATE_FORMAT)} diff --git a/src/components/Proposals/index.tsx b/src/components/Proposals/index.tsx index 1305850ff6..6010680317 100644 --- a/src/components/Proposals/index.tsx +++ b/src/components/Proposals/index.tsx @@ -1,5 +1,5 @@ -import { Box, Flex, Text, Button } from '@chakra-ui/react'; -import { ArrowDown } from '@decent-org/fractal-ui'; +import { Box, Flex, Text, Button, Icon } from '@chakra-ui/react'; +import { Funnel, CaretDown } from '@phosphor-icons/react'; import { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import useProposals from '../../hooks/DAO/proposal/useProposals'; @@ -109,14 +109,18 @@ export default function Proposals() { return ( <> - {filterTitle} - + + {filterTitle} + } options={options} namespace="proposal" @@ -124,6 +128,10 @@ export default function Proposals() { buttonAs={Button} buttonProps={{ variant: 'tertiary', + paddingLeft: '0.5rem', + paddingRight: '0.5rem', + paddingTop: '0.25rem', + paddingBottom: '0.25rem', disabled: !proposals, }} closeOnSelect={false} diff --git a/src/components/ui/badges/Badge.tsx b/src/components/ui/badges/Badge.tsx index db5f21f4d4..a5c22d000f 100644 --- a/src/components/ui/badges/Badge.tsx +++ b/src/components/ui/badges/Badge.tsx @@ -13,117 +13,89 @@ type BadgeType = { }; }; -const greenText = '#8BDA8B'; -const greenBG = '#0A320A'; -const greenHoverText = '#78D378'; -const greenHover = '#0E440E'; - -const redText = '#FFB2B2'; -const redBG = '#640E0D'; -const redHoverText = '#FF9999'; -const redHover = '#4D0B0A'; - -const sandBG = '#C18D5A'; -const sandHover = '#B97F46'; -const sandText = '#2C1A08'; -const sandHoverText = '#150D04 '; - -const grayBG = '#9A979D'; -const grayHover = '#8C8990'; - -const freezeBG = '#A3B9EC'; -const freezeHover = '#8DA8E7'; -const freezeText = '#0D2356'; -const freezeHoverText = '#09193E'; - -const frozenBG = '#09193E'; -const frozenText = '#D1DCF5'; -const frozenHoverText = '#BCCCF0'; -const frozenHover = '#17326E'; - const BADGE_MAPPING: BadgeType = { [FractalProposalState.ACTIVE]: { tooltipKey: 'stateActiveTip', - bg: greenBG, - textColor: greenText, - _hover: { bg: greenHover, textColor: greenHoverText }, + bg: 'lilac-0', + textColor: 'cosmic-nebula-0', + _hover: { bg: 'lilac--1', textColor: 'cosmic-nebula-0' }, }, [FractalProposalState.TIMELOCKED]: { tooltipKey: 'stateTimelockedTip', - bg: greenBG, - textColor: greenText, - _hover: { bg: greenHover, textColor: greenHoverText }, + bg: 'neutral-8', + textColor: 'neutral-4', + _hover: { bg: 'neutral-7', textColor: 'neutral-4' }, }, [FractalProposalState.EXECUTED]: { tooltipKey: 'stateExecutedTip', - bg: greenBG, - textColor: greenText, - _hover: { bg: greenHover, textColor: greenHoverText }, + bg: 'celery--5', + textColor: 'white-0', + _hover: { bg: 'celery--6', textColor: 'white-0' }, }, [FractalProposalState.EXECUTABLE]: { tooltipKey: 'stateExecutableTip', - bg: greenBG, - textColor: greenText, - _hover: { bg: greenHover, textColor: greenHoverText }, + bg: 'celery--2', + textColor: 'black-0', + _hover: { bg: 'celery--3', textColor: 'black-0' }, }, [FractalProposalState.FAILED]: { tooltipKey: 'stateFailedTip', - bg: redBG, - textColor: redText, - _hover: { bg: redHover, textColor: redHoverText }, + bg: 'red-0', + textColor: 'red-4', + _hover: { bg: 'red--1', textColor: 'red-4' }, }, [FractalProposalState.TIMELOCKABLE]: { tooltipKey: 'stateTimelockableTip', - bg: greenBG, - textColor: greenText, - _hover: { bg: greenHover, textColor: greenHoverText }, + bg: 'lilac-0', + textColor: 'cosmic-nebula-0', + _hover: { bg: 'lilac--1', textColor: 'cosmic-nebula-0' }, }, [FractalProposalState.MODULE]: { tooltipKey: 'stateModuleTip', - bg: greenBG, - textColor: greenText, - _hover: { bg: greenHover, textColor: greenHoverText }, + bg: 'lilac-0', + textColor: 'cosmic-nebula-0', + _hover: { bg: 'lilac--1', textColor: 'cosmic-nebula-0' }, }, [FractalProposalState.EXPIRED]: { tooltipKey: 'stateExpiredTip', - bg: redBG, - textColor: redText, - _hover: { bg: redHover, textColor: redHoverText }, + bg: 'neutral-4', + textColor: 'neutral-7', + _hover: { bg: 'neutral-2', textColor: 'neutral-7' }, }, [FractalProposalState.REJECTED]: { tooltipKey: 'stateRejectedTip', - bg: redBG, - textColor: redText, - _hover: { bg: redHover, textColor: redHoverText }, + bg: 'red-0', + textColor: 'red-4', + _hover: { bg: 'red--1', textColor: 'red-4' }, }, [FractalProposalState.PENDING]: { tooltipKey: 'statePendingTip', - bg: sandBG, - textColor: sandText, - _hover: { bg: sandHover, textColor: sandHoverText }, + bg: 'yellow-0', + textColor: 'black-0', + _hover: { bg: 'yellow-0', textColor: 'yellow--2' }, }, [FractalProposalState.CLOSED]: { tooltipKey: 'stateClosedTip', - bg: grayBG, - textColor: '#000', - _hover: { bg: grayHover, textColor: '#000' }, + bg: 'neutral-8', + textColor: 'neutral-4', + _hover: { bg: 'neutral-7', textColor: 'neutral-4' }, }, [DAOState.freezeInit]: { tooltipKey: 'stateFreezeInitTip', - bg: freezeBG, - textColor: freezeText, - _hover: { bg: freezeHover, textColor: freezeHoverText }, + bg: 'blue-2', + textColor: 'blue-0', + _hover: { bg: 'blue-1', textColor: 'blue-0' }, }, [DAOState.frozen]: { tooltipKey: 'stateFrozenTip', - bg: frozenBG, - textColor: frozenText, - _hover: { bg: frozenHover, textColor: frozenHoverText }, + bg: 'blue-1', + textColor: 'blue--1', + _hover: { bg: 'blue-2', textColor: 'blue--1' }, }, ownerApproved: { - bg: 'sand.700', - textColor: sandText, - _hover: { bg: sandBG, textColor: sandHoverText }, + bg: 'yellow-0', + textColor: 'black-0', + _hover: { bg: 'yellow-0', textColor: 'yellow--2' }, }, }; @@ -169,7 +141,7 @@ export function Badge({ labelKey, size, proposal }: IBadge) { h="0.5rem" /> {t(labelKey)} @@ -179,7 +151,7 @@ export function Badge({ labelKey, size, proposal }: IBadge) { proposal={proposal} showIcon={false} textColor={colors.textColor} - textStyle="text-md-sans-regular" + textStyle="label-base" /> )} diff --git a/src/components/ui/badges/QuorumBadge.tsx b/src/components/ui/badges/QuorumBadge.tsx index e13e21e307..36a11a4f71 100644 --- a/src/components/ui/badges/QuorumBadge.tsx +++ b/src/components/ui/badges/QuorumBadge.tsx @@ -10,8 +10,6 @@ import { SnapshotProposal, } from '../../../types'; -const quorumNotReachedColor = '#838383'; -const quorumReachedColor = '#56A355'; export default function QuorumBadge({ proposal }: { proposal: FractalProposal }) { const { governance } = useFractal(); const { t } = useTranslation('common'); @@ -66,12 +64,11 @@ export default function QuorumBadge({ proposal }: { proposal: FractalProposal }) reachedQuorum : reachedQuorum >= totalQuorum; - const displayColor = - totalVotesCasted !== 0n && meetsQuorum ? quorumReachedColor : quorumNotReachedColor; + const displayColor = totalVotesCasted !== 0n && meetsQuorum ? 'celery--3' : 'neutral-7'; return ( {title} @@ -33,6 +34,8 @@ export default function Breadcrumbs({ links }: BreadcrumbsProps) { {isCurrentPage ? ( crumbText @@ -42,7 +45,6 @@ export default function Breadcrumbs({ links }: BreadcrumbsProps) { to={path} display="flex" alignItems="center" - color={isCurrentPage ? 'neutral-7' : 'neutral-6'} _hover={{ textDecoration: 'none', color: 'neutral-7' }} // Guessed. Probaby incorrect, couldn't find on figma > {crumbText} diff --git a/src/i18n/locales/en/breadcrumbs.json b/src/i18n/locales/en/breadcrumbs.json index 9993f4fa21..e2871a2631 100644 --- a/src/i18n/locales/en/breadcrumbs.json +++ b/src/i18n/locales/en/breadcrumbs.json @@ -1,6 +1,6 @@ { "headerTitle": "{{daoName}} {{subject}}", - "proposals": "Proposals", + "proposals": "All Proposals", "proposalNew": "New Proposal", "nodes": "Hierarchy", "treasury": "Treasury",