Rebrand Proposals table (#499)

* Rebrand Proposals table

* Add testing capabilities

* Self review (fixing some colors)

* Update Tag cursor

* Rename Tag to ProposalTag

src/components/layout/layout.module.scss

@@ -17,17 +17,21 @@
 
 .main {
   max-width: 468px;
+  width: 100%;
+  box-sizing: border-box;
   padding: 0 16px;
   margin: 0 auto;
   flex: 1;
 
   @media (min-width: $sm) {
     max-width: 640px;
+    padding: 0;
   }
 
   @media (min-width: $md) {
     max-width: 920px;
-    padding: 0 64px;
+    padding: 0 92px;
+    box-sizing: content-box;
     padding-bottom: 80px;
   }
 }

src/components/timer/timer.module.scss

@@ -1,10 +1,10 @@
 @import '../../styles/variables.module.scss';
+@import '../../styles/fonts.module.scss';
 
 .timer {
   display: inline-flex;
   align-items: center;
-  font-size: $text-xsmall;
-  font-weight: 500;
+  @include font-body-14;
 
   &.large {
     flex-direction: column;
@@ -56,29 +56,34 @@
   }
 }
 
+.status {
+  color: $color-dark-blue-100;
+}
+
+.timerNumber {
+  color: $color-dark-blue-400;
+}
+
+.timerColon {
+  margin: 0 4px;
+  color: $color-dark-blue-50;
+}
+
+.unit {
+  color: $color-dark-blue-50;
+}
+
 .timerContainer {
   display: flex;
   align-items: center;
-  margin: 0 $space-xxs;
+  margin-left: 4px;
 }
 
 .timerWrap {
   display: flex;
-  align-items: center;
-
-  & > * {
-    margin-right: $space-xxs;
-  }
-
-  & > *:last-child {
-    margin-right: 0;
-  }
-}
-
-.timerColon {
-  margin: 0 $space-xxs;
+  gap: 4px;
 }
 
-.grayOut {
-  color: rgba(255, 255, 255, 0.4);
+.timedOutNumber {
+  color: $color-dark-blue-50;
 }

src/components/timer/timer.tsx

@@ -1,7 +1,6 @@
 import { useState, useEffect, useRef } from 'react';
 import classNames from 'classnames';
 import { getDays, getHours, getMinutes, getSeconds } from '../../utils/generic';
-import globalStyles from '../../styles/global-styles.module.scss';
 import styles from './timer.module.scss';
 import { format } from 'date-fns';
 import { usePrevious } from '../../utils';
@@ -58,42 +57,38 @@ const Timer = (props: Props) => {
     }
   }, [previousDateDiff, dateDiff]);
 
-  const largeSize = size === 'large' ? `${styles.large}` : '';
   const status = dateDiff > 0 ? `Remaining${showDeadline ? '' : ':'}` : 'Ended';
   const formattedDeadline = `${dateDiff > 0 ? 'Ends on' : ''} ${formatDeadline(deadline)}`;
 
   return (
-    <div
-      className={classNames(styles.timer, largeSize, dateDiff === 0 ? styles.grayOut : globalStyles.primaryColor)}
-      data-testid="timer"
-    >
-      <div className={globalStyles.tertiaryColor}>{status}</div>
+    <div className={classNames(styles.timer, { [styles.large]: size === 'large' })} data-testid="timer">
+      <div className={styles.status}>{status}</div>
       <div className={styles.timerContainer}>
         <div className={styles.timerWrap}>
-          <div className={styles.timerNumber}>{countdown.days}</div>
-          <div className={globalStyles.tertiaryColor}>D</div>
+          <div className={dateDiff > 0 ? styles.timerNumber : styles.timedOutNumber}>{countdown.days}</div>
+          <div className={styles.unit}>D</div>
         </div>
         <div className={styles.timerColon}>:</div>
         <div className={styles.timerWrap}>
-          <div className={styles.timerNumber}>{countdown.hours}</div>
-          <div className={globalStyles.tertiaryColor}>HR</div>
+          <div className={dateDiff > 0 ? styles.timerNumber : styles.timedOutNumber}>{countdown.hours}</div>
+          <div className={styles.unit}>HR</div>
         </div>
         <div className={styles.timerColon}>:</div>
         <div className={`visual-test:invisible ${styles.timerWrap}`}>
-          <div className={styles.timerNumber}>{countdown.minutes}</div>
-          <div className={globalStyles.tertiaryColor}>MIN</div>
+          <div className={dateDiff > 0 ? styles.timerNumber : styles.timedOutNumber}>{countdown.minutes}</div>
+          <div className={styles.unit}>MIN</div>
         </div>
         {size === 'large' && (
           <>
             <div className={styles.timerColon}>:</div>
             <div className={`visual-test:invisible ${styles.timerWrap}`}>
-              <div className={styles.timerNumber}>{countdown.seconds}</div>
-              <div className={globalStyles.tertiaryColor}>SEC</div>
+              <div className={dateDiff > 0 ? styles.timerNumber : styles.timedOutNumber}>{countdown.seconds}</div>
+              <div className={styles.unit}>SEC</div>
             </div>
           </>
         )}
       </div>
-      {showDeadline && <div className={`visual-test:invisible ${globalStyles.tertiaryColor}`}>{formattedDeadline}</div>}
+      {showDeadline && <div className={`visual-test:invisible ${styles.status}`}>{formattedDeadline}</div>}
     </div>
   );
 };

src/pages/proposal-commons/proposal-details/proposal-details.tsx

@@ -11,7 +11,7 @@ import VoteSlider from '../vote-slider/vote-slider';
 import VoteStatus from '../vote-status';
 import Timer from '../../../components/timer';
 import Button from '../../../components/button';
-import Tag from '../../../components/tag';
+import ProposalTag from '../proposal-tag';
 import { TooltipChecklist } from '../../../components/tooltip';
 import BorderedBox, { Header } from '../../../components/bordered-box/bordered-box';
 import { getEtherscanAddressUrl, useApi3AgentAddresses, useApi3Voting } from '../../../contracts';
@@ -149,11 +149,7 @@ const ProposalDetailsContent = (props: ProposalDetailsProps) => {
         <div>
           <h4 className={styles.proposalDetailsTitle}>{proposal.metadata.title}</h4>
           <div className={styles.proposalTag}>
-            <Tag type={proposal.type}>
-              <span className={globalStyles.capitalize}>
-                #{proposal.voteId.toString()} {proposal.type}
-              </span>
-            </Tag>
+            <ProposalTag type={proposal.type} id={`#${proposal.voteId.toString()}`} />
           </div>
         </div>
         <div className={styles.proposalDetailsTimer}>