From f94a4dfc3cf4b25adfbf0fd4c5d17873c845ebb6 Mon Sep 17 00:00:00 2001
From: peterjurco <petrojurco@gmail.com>
Date: Mon, 25 Nov 2024 14:44:58 +0100
Subject: [PATCH] Self review (fixing some colors)

---
 src/components/tag/tag.module.scss                         | 2 +-
 .../proposal-list/proposal-list.module.scss                | 1 +
 .../proposal-commons/vote-slider/vote-slider.module.scss   | 4 ++++
 src/pages/proposal-commons/vote-slider/vote-slider.tsx     | 7 +++++--
 4 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/tag/tag.module.scss b/src/components/tag/tag.module.scss
index fee70368..e0163c13 100644
--- a/src/components/tag/tag.module.scss
+++ b/src/components/tag/tag.module.scss
@@ -19,7 +19,7 @@
   }
 
   &.primary {
-    background-color: $color-dark-blue-10;
+    background-color: $color-blue-10;
   }
 
   &.secondary {
diff --git a/src/pages/proposal-commons/proposal-list/proposal-list.module.scss b/src/pages/proposal-commons/proposal-list/proposal-list.module.scss
index 66418b69..ae4dabb5 100644
--- a/src/pages/proposal-commons/proposal-list/proposal-list.module.scss
+++ b/src/pages/proposal-commons/proposal-list/proposal-list.module.scss
@@ -60,6 +60,7 @@
   display: flex;
   align-items: center;
   @include font-body-14;
+  color: $color-dark-blue-100;
 
   &.mobile {
     margin-bottom: 4px;
diff --git a/src/pages/proposal-commons/vote-slider/vote-slider.module.scss b/src/pages/proposal-commons/vote-slider/vote-slider.module.scss
index dde0ff9e..ba3a5cd7 100644
--- a/src/pages/proposal-commons/vote-slider/vote-slider.module.scss
+++ b/src/pages/proposal-commons/vote-slider/vote-slider.module.scss
@@ -69,6 +69,10 @@ $border-radius: 100px;
   margin-top: 4px;
   @include font-body-14;
   color: $color-dark-blue-400;
+
+  .lost {
+    color: $color-dark-blue-50;
+  }
 }
 
 .voteIcon {
diff --git a/src/pages/proposal-commons/vote-slider/vote-slider.tsx b/src/pages/proposal-commons/vote-slider/vote-slider.tsx
index 13fa2631..d9a43b7d 100644
--- a/src/pages/proposal-commons/vote-slider/vote-slider.tsx
+++ b/src/pages/proposal-commons/vote-slider/vote-slider.tsx
@@ -19,6 +19,7 @@ export const NegativeVoteIcon = ({ large, fill }: IconProp) => (
   />
 );
 
+// TODO: Update the icon after the "check circle fill" is added as a react component
 export const PositiveVoteIcon = ({ large, fill }: IconProp) => (
   <img
     className={classNames(styles.voteIcon, { [styles.large]: large })}
@@ -84,9 +85,11 @@ const VoteSlider = (props: Props) => {
               [globalStyles.textNormal]: isLarge,
             })}
           >
-            <span>{formatPercentage(forPercentage)}</span>
+            <span className={classNames({ [styles.lost]: proposalRejected })}>{formatPercentage(forPercentage)}</span>
             {!isLarge && <VoteStatus voterState={voterState} wasDelegated={wasDelegated} />}
-            <span>{formatPercentage(againstPercentage)}</span>
+            <span className={classNames({ [styles.lost]: proposalApproved })}>
+              {formatPercentage(againstPercentage)}
+            </span>
           </div>
         </div>
         <NegativeVoteIcon large={isLarge} fill={proposalRejected} />