Reskin | Restyle proposals list

src/components/Activity/ActivityDescription.tsx

@@ -29,7 +29,8 @@ export function ActivityDescription({ activity, showFullDescription }: IActivity
       {description && (
         <Box
           mt={2}
-          textColor="#B3B3B3"
+          textColor="neutral-7"
+          textStyle="body-base"
         >
           <Markdown
             content={description}

src/components/Activity/ActivityDescriptionGovernance.tsx

@@ -59,8 +59,8 @@ function ProposalAuthor({ activity }: { activity: Activity }) {
     <Flex
       gap={2}
       alignItems="center"
-      color="#B3B3B3"
-      textStyle="text-md-sans-regular"
+      color="neutral-7"
+      textStyle="label-base"
     >
       <Avatar
         size="sm"
@@ -97,10 +97,9 @@ export function ProposalTitle({
   const titleText = proposalIdText + ' ' + proposaltitleText;
   return (
     <Box
-      textStyle="text-lg-sans-medium"
-      fontSize="20px"
-      color="grayscale.100"
-      pr={2}
+      textStyle="display-lg"
+      color="white-0"
+      pr="1.5rem"
     >
       <Flex
         alignItems="center"

src/components/Proposals/ProposalCard/ProposalCard.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex, Image, Text } from '@chakra-ui/react';
+import { Box, Flex, Text } from '@chakra-ui/react';
 import { format } from 'date-fns';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
@@ -10,6 +10,7 @@ import { DEFAULT_DATE_FORMAT } from '../../../utils';
 import { ActivityDescription } from '../../Activity/ActivityDescription';
 import { Badge } from '../../ui/badges/Badge';
 import QuorumBadge from '../../ui/badges/QuorumBadge';
+import { SnapshotIcon } from '../../ui/badges/Snapshot';
 
 function ProposalCard({ proposal }: { proposal: FractalProposal }) {
   const {
@@ -36,8 +37,12 @@ function ProposalCard({ proposal }: { proposal: FractalProposal }) {
     <Link to={DAO_ROUTES.proposal.relative(addressPrefix, daoAddress, proposal.proposalId)}>
       <Box
         minHeight="6.25rem"
-        bg="chocolate.900"
-        _hover={{ bg: '#0B0A09' }}
+        bg="neutral-2"
+        _hover={{ bg: 'neutral-3' }}
+        _active={{ bg: 'neutral-2', border: '1px solid', borderColor: 'neutral-3' }}
+        transitionDuration="200ms"
+        transitionProperty="all"
+        transitionTimingFunction="ease-out"
         p="1.5rem"
         borderRadius="0.5rem"
       >
@@ -52,13 +57,10 @@ function ProposalCard({ proposal }: { proposal: FractalProposal }) {
               size="sm"
               proposal={proposal}
             />
-            {/* TODO: replace with <SnapshotIcon /> */}
             {isSnapshotProposal && (
-              <Image
-                src="/images/snapshot-icon-fill.svg"
-                alt={t('snapshot')}
-                ml={1}
-              />
+              <Box ml={1}>
+                <SnapshotIcon />
+              </Box>
             )}
           </Flex>
           <QuorumBadge proposal={proposal} />
@@ -68,8 +70,8 @@ function ProposalCard({ proposal }: { proposal: FractalProposal }) {
           {proposal.eventDate && (
             <Text
               mt={2}
-              textStyle="text-base-sans-regular"
-              color="#838383"
+              textStyle="helper-text-base"
+              color="neutral-6"
             >
               {eventDateLabel} {format(proposal.eventDate, DEFAULT_DATE_FORMAT)}
             </Text>

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,21 +109,29 @@ export default function Proposals() {
   return (
     <>
       <Flex
-        gap={6}
+        gap={3}
         mb="1.5rem"
       >
         <OptionMenu
           trigger={
-            <Box>
-              {filterTitle} <ArrowDown boxSize="1.5rem" />
-            </Box>
+            <Flex
+              alignItems="center"
+              justifyContent="space-between"
+              gap="0.25rem"
+            >
+              <Icon as={Funnel} /> {filterTitle} <Icon as={CaretDown} />
+            </Flex>
           }
           options={options}
           namespace="proposal"
           titleKey="filter"
           buttonAs={Button}
           buttonProps={{
             variant: 'tertiary',
+            paddingLeft: '0.5rem',
+            paddingRight: '0.5rem',
+            paddingTop: '0.25rem',
+            paddingBottom: '0.25rem',
             disabled: !proposals,
           }}
           closeOnSelect={false}

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"
         />
         <Text
-          textStyle="text-md-sans-regular"
+          textStyle="label-base"
           lineHeight="1"
         >
           {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"
           />
         )}
       </Flex>

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 (
     <Box
       rounded="md"
-      textStyle="text-md-sans-regular"
+      textStyle="label-base"
       borderColor={displayColor}
       textColor={displayColor}
       border="1px solid"

src/components/ui/page/Header/Breadcrumbs.tsx

@@ -24,6 +24,7 @@ export default function Breadcrumbs({ links }: BreadcrumbsProps) {
             whiteSpace="nowrap"
             textOverflow="ellipsis"
             textStyle="helper-text-base"
+            color={isCurrentPage ? 'neutral-7' : 'neutral-6'}
           >
             {title}
           </Text>
@@ -33,6 +34,8 @@ export default function Breadcrumbs({ links }: BreadcrumbsProps) {
           <BreadcrumbItem
             key={path}
             isCurrentPage={isCurrentPage}
+            color="neutral-7"
+            textStyle="helper-text-base"
           >
             {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}

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",