From 121e9176f37ff66ea54cb475d1928d8e2758f57f Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 14 Dec 2022 19:00:04 +0800
Subject: [PATCH] Add style for leading choices

Also make sure the votes percentage doesn't shrink
---
 src/components/status.css | 7 +++++++
 src/components/status.jsx | 6 +++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/status.css b/src/components/status.css
index 29839f47..e0d2e7c1 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -396,6 +396,13 @@ a.card:hover {
   gap: 8px;
   cursor: pointer;
 }
+.poll-option-votes {
+  flex-shrink: 0;
+  font-size: 90%;
+}
+.poll-option-leading .poll-option-votes {
+  font-weight: bold;
+}
 .poll-vote-button {
   margin-top: 8px;
 }
diff --git a/src/components/status.jsx b/src/components/status.jsx
index 213d1994..ef304de7 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -290,9 +290,13 @@ function Poll({ poll }) {
           const pollVotesCount = votersCount || votesCount;
           const percentage =
             Math.round((optionVotesCount / pollVotesCount) * 100) || 0;
+          // check if current poll choice is the leading one
+          const isLeading =
+            optionVotesCount > 0 &&
+            optionVotesCount === Math.max(...options.map((o) => o.votesCount));
           return (
             <div
-              class="poll-option"
+              class={`poll-option ${isLeading ? 'poll-option-leading' : ''}`}
               style={{
                 '--percentage': `${percentage}%`,
               }}