✨feature: Voting Bar Color Fix (#34)

* ✨feature: Voting Bar Color Fix * 🐞 fix: Lint / Format
DeutscheModelUnitedNations · Jun 22, 2023 · cac4eb6 · cac4eb6
1 parent b6f0917
commit cac4eb6
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 13 deletions.
diff --git a/chase/frontend/app/globals.scss b/chase/frontend/app/globals.scss
@@ -5,9 +5,9 @@
 :root {
   --dmun-primary: #3d7dd2;
   --dmun-black: #000;
-  --voting-for: rgb(21 128 61);
+  --voting-for: #188a42;
   --voting-abstain: #3d7dd2;
-  --voting-against: rgb(220 38 38);
+  --voting-against: #ff3d32;
 }
 
 

diff --git a/chase/frontend/components/voting/voting_bar.tsx b/chase/frontend/components/voting/voting_bar.tsx
@@ -54,25 +54,25 @@ export default function VotingBar({
       <VotingBarSection
         numberOfVotes={countVotes("yes")}
         percentage={yesVotesPercentage}
-        color="green-700"
+        color="bg-voting-for"
       />
       <div className="bg-white h-8 w-px" />
       <VotingBarSection
         numberOfVotes={countRemainingVotes()}
         percentage={remainingVotesPercentage}
-        color="white"
+        color="bg-white"
         hideCounter
       />
       <VotingBarSection
         numberOfVotes={countVotes("abstain")}
         percentage={abstainVotesPercentage}
-        color="dmun"
+        color="bg-voting-abstain"
       />
       <div className="bg-white h-8 w-px" />
       <VotingBarSection
         numberOfVotes={countVotes("no")}
         percentage={noVotesPercentage}
-        color="red-600"
+        color="bg-voting-against"
       />
       <MajorityMarking
         majority={majority}
@@ -93,14 +93,11 @@ function VotingBarSection({
   color: string;
   hideCounter?: boolean;
 }) {
-  let classNames =
-    "flex justify-center items-center text-white h-8 transition-all duration-1000 ";
-  if (color) {
-    classNames += `bg-${color}`;
-  }
-
   return (
-    <div className={classNames} style={{ width: `${percentage}%` }}>
+    <div
+      className={`flex justify-center items-center text-white h-8 transition-all duration-1000 ${color}`}
+      style={{ width: `${percentage}%` }}
+    >
       {!hideCounter && numberOfVotes > 0 && (
         <div className="text-sm">{numberOfVotes}</div>
       )}

diff --git a/chase/frontend/tailwind.config.js b/chase/frontend/tailwind.config.js
@@ -25,6 +25,11 @@ module.exports = {
           icon: "rgb(156 163 175)",
           text: "rgb(75 85 99)",
         },
+        voting: {
+          for: "#188a42",
+          against: "#ff3d32",
+          abstain: "#3d7dd2",
+        },
       },
     },
   },