Self review (fixing some colors)

api3dao · Nov 25, 2024 · f94a4df · f94a4df
1 parent 511574c
commit f94a4df
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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} />