Reskin Moves ProposalCountdown from the Badge component

src/components/Proposals/ProposalCard/ProposalCard.tsx

@@ -16,6 +16,7 @@ import { ActivityDescription } from '../../Activity/ActivityDescription';
 import { Badge } from '../../ui/badges/Badge';
 import QuorumBadge from '../../ui/badges/QuorumBadge';
 import { SnapshotIcon } from '../../ui/badges/Snapshot';
+import { ProposalCountdown } from '../../ui/proposal/ProposalCountdown';
 
 function ProposalCard({ proposal }: { proposal: FractalProposal }) {
   const {
@@ -66,7 +67,11 @@ function ProposalCard({ proposal }: { proposal: FractalProposal }) {
             <Badge
               labelKey={proposal.state!}
               size="sm"
+            />
+            <ProposalCountdown
               proposal={proposal}
+              showIcon={false}
+              textColor="neutral-7"
             />
             {isSnapshotProposal && (
               <Box ml={1}>

src/components/Proposals/ProposalInfo.tsx

@@ -11,6 +11,7 @@ import { Badge } from '../ui/badges/Badge';
 import { SnapshotButton } from '../ui/badges/Snapshot';
 import { ModalType } from '../ui/modals/ModalProvider';
 import { useFractalModal } from '../ui/modals/useFractalModal';
+import { ProposalCountdown } from '../ui/proposal/ProposalCountdown';
 import ProposalExecutableCode from '../ui/proposal/ProposalExecutableCode';
 import CeleryButtonWithIcon from '../ui/utils/CeleryButtonWithIcon';
 
@@ -36,16 +37,20 @@ export function ProposalInfo({
       padding="1.5rem"
     >
       <Flex
-        gap={4}
+        gap={2}
         alignItems="center"
       >
         {proposal.state && (
           <Badge
             size="base"
             labelKey={proposal.state}
-            proposal={proposal}
           />
         )}
+        <ProposalCountdown
+          proposal={proposal}
+          showIcon={false}
+          textColor="neutral-7"
+        />
         {isSnapshotProposal && (
           <>
             <SnapshotButton snapshotENS={`${daoSnapshotENS}/proposal/${proposal.proposalId}`} />

src/components/ui/badges/Badge.tsx

@@ -2,8 +2,7 @@ import { Box, Flex, Text, Tooltip } from '@chakra-ui/react';
 import { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { TOOLTIP_MAXW } from '../../../constants/common';
-import { FractalProposalState, DAOState, FractalProposal } from '../../../types';
-import { ProposalCountdown } from '../proposal/ProposalCountdown';
+import { FractalProposalState, DAOState } from '../../../types';
 
 type BadgeType = {
   tooltipKey?: string;
@@ -109,10 +108,9 @@ interface IBadge {
   size: Size;
   labelKey: keyof typeof BADGE_MAPPING;
   children?: ReactNode;
-  proposal?: FractalProposal;
 }
 
-export function Badge({ labelKey, children, size, proposal }: IBadge) {
+export function Badge({ labelKey, children, size }: IBadge) {
   const { tooltipKey, ...colors } = BADGE_MAPPING[labelKey];
   const sizes = BADGE_SIZES[size];
 
@@ -147,14 +145,6 @@ export function Badge({ labelKey, children, size, proposal }: IBadge) {
         >
           {children || t(labelKey)}
         </Text>
-        {proposal && (
-          <ProposalCountdown
-            proposal={proposal}
-            showIcon={false}
-            textColor={colors.textColor}
-            textStyle="label-base"
-          />
-        )}
       </Flex>
     </Tooltip>
   );

src/components/ui/proposal/ProposalCountdown.tsx

@@ -22,13 +22,11 @@ export function ProposalCountdown({
   proposal,
   showIcon = true,
   textColor = 'white-0',
-  textStyle = 'label-base', // previous default
 }: {
   proposal: FractalProposal;
   showIcon?: boolean;
   // custom text color and style
   textColor?: string;
-  textStyle?: string;
 }) {
   const totalSecondsLeft = useProposalCountdown(proposal);
   const { t } = useTranslation('proposal');
@@ -91,7 +89,7 @@ export function ProposalCountdown({
         >
           <Text
             color={textColor}
-            textStyle={textStyle}
+            textStyle="label-base"
           >
             {showDays && `${zeroPad(daysLeft)}:`}
             {showHours && `${zeroPad(hoursLeft)}:`}