Chore/vote progress color (#1504)

* chore: fix vote progress color

* chore: sort out double full stops

apps/token/src/routes/governance/components/current-proposal-status/current-proposal-status.tsx

@@ -63,7 +63,7 @@ export const CurrentProposalStatus = ({
         <>
           <span>{t('voteFailedReason')}</span>
           <StatusFail>{t('participationNotMet')}</StatusFail>
-          <span>&nbsp;{daysClosedAgo}.</span>
+          <span>&nbsp;{daysClosedAgo}</span>
         </>
       );
     }
@@ -73,7 +73,7 @@ export const CurrentProposalStatus = ({
         <>
           <span>{t('voteFailedReason')}</span>
           <StatusFail>{t('majorityNotMet')}</StatusFail>
-          <span>&nbsp;{daysClosedAgo}.</span>
+          <span>&nbsp;{daysClosedAgo}</span>
         </>
       );
     }
@@ -82,7 +82,7 @@ export const CurrentProposalStatus = ({
       <>
         <span>{t('voteFailedReason')}</span>
         <StatusFail>{proposal.state}</StatusFail>
-        <span>&nbsp;{daysClosedAgo}.</span>
+        <span>&nbsp;{daysClosedAgo}</span>
       </>
     );
   }
@@ -99,7 +99,6 @@ export const CurrentProposalStatus = ({
           {proposal.state === ProposalState.STATE_ENACTED
             ? daysEnactedAgo
             : daysClosedAgo}
-          .
         </span>
       </>
     );

apps/token/src/routes/governance/components/vote-details/vote-progress.spec.tsx

@@ -0,0 +1,29 @@
+import { render, screen } from '@testing-library/react';
+import BigNumber from 'bignumber.js';
+import { VoteProgress } from './vote-progress';
+
+it('Renders with data-testid', () => {
+  render(
+    <VoteProgress threshold={new BigNumber(50)} progress={new BigNumber(10)} />
+  );
+  expect(screen.getByTestId('vote-progress')).toBeInTheDocument();
+});
+
+it('Renders indicator', () => {
+  render(
+    <VoteProgress threshold={new BigNumber(50)} progress={new BigNumber(10)} />
+  );
+  expect(screen.getByTestId('vote-progress-indicator')).toBeInTheDocument();
+});
+
+it('Renders widths appropriately', () => {
+  render(
+    <VoteProgress threshold={new BigNumber(50)} progress={new BigNumber(10)} />
+  );
+  expect(screen.getByTestId('vote-progress-bar-for')).toHaveStyle({
+    width: '10%',
+  });
+  expect(screen.getByTestId('vote-progress-bar-against')).toHaveStyle({
+    width: '90%',
+  });
+});

apps/token/src/routes/governance/components/vote-details/vote-progress.tsx

@@ -8,7 +8,10 @@ export const VoteProgress = ({
   progress: BigNumber;
 }) => {
   return (
-    <div className="w-full h-1 relative bg-neutral-500">
+    <div
+      data-testid="vote-progress"
+      className="w-full h-1 relative bg-neutral-500"
+    >
       <div
         data-testid="vote-progress-indicator"
         className="absolute -top-1 w-[1px] h-3 bg-white z-1"
@@ -17,11 +20,18 @@ export const VoteProgress = ({
       <div className="w-full h-2">
         <div
           className="absolute left-0 bg-vega-green h-1"
-          data-testid="vote-progress-bar"
+          data-testid="vote-progress-bar-for"
           style={{
             width: `${progress}%`,
           }}
         />
+        <div
+          className="absolute left-0 bg-vega-red h-1"
+          data-testid="vote-progress-bar-against"
+          style={{
+            width: `${100 - progress.toNumber()}%`,
+          }}
+        />
       </div>
     </div>
   );