From 111dc0a6d0c498e57a217e292f6ed8246b4924be Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Mon, 19 Aug 2024 12:54:56 +0100
Subject: [PATCH] Hide downvote counts

---
 .../Projects/ListProjectSolutions.tsx           |  3 ++-
 src/components/Projects/VoteButton.tsx          | 17 +++++++++++------
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/components/Projects/ListProjectSolutions.tsx b/src/components/Projects/ListProjectSolutions.tsx
index 28542a88f..f4dfa95f1 100644
--- a/src/components/Projects/ListProjectSolutions.tsx
+++ b/src/components/Projects/ListProjectSolutions.tsx
@@ -268,7 +268,7 @@ export function ListProjectSolutions(props: ListProjectSolutionsProps) {
               </div>
 
               <div className="flex items-center justify-end gap-1">
-                <span className="flex items-center overflow-hidden rounded-full border">
+                <span className="flex overflow-hidden rounded-full border">
                   <VoteButton
                     icon={ThumbsUp}
                     isActive={solution?.voteType === 'upvote'}
@@ -282,6 +282,7 @@ export function ListProjectSolutions(props: ListProjectSolutionsProps) {
                     icon={ThumbsDown}
                     isActive={solution?.voteType === 'downvote'}
                     count={solution.downvotes || 0}
+                    hideCount={true}
                     onClick={() => {
                       handleSubmitVote(solution._id!, 'downvote');
                     }}
diff --git a/src/components/Projects/VoteButton.tsx b/src/components/Projects/VoteButton.tsx
index 3b047ae79..15feb7254 100644
--- a/src/components/Projects/VoteButton.tsx
+++ b/src/components/Projects/VoteButton.tsx
@@ -5,14 +5,15 @@ type VoteButtonProps = {
   icon: LucideIcon;
   isActive: boolean;
   count: number;
+  hideCount?: boolean;
   onClick: () => void;
 };
 export function VoteButton(props: VoteButtonProps) {
-  const { icon: VoteIcon, isActive, count, onClick } = props;
+  const { icon: VoteIcon, isActive, hideCount = false, count, onClick } = props;
   return (
     <button
       className={cn(
-        'flex items-center gap-1 px-2 py-1 text-sm text-gray-500 hover:bg-gray-100 hover:text-black focus:outline-none',
+        'flex gap-1 px-2 py-1 text-sm text-gray-500 hover:bg-gray-100 hover:text-black focus:outline-none',
         {
           'bg-gray-100 text-orange-600 hover:text-orange-700': isActive,
           'bg-transparent text-gray-500 hover:text-black': !isActive,
@@ -21,10 +22,14 @@ export function VoteButton(props: VoteButtonProps) {
       disabled={isActive}
       onClick={onClick}
     >
-      <VoteIcon className={cn('size-3.5 stroke-[2.5px]')} />
-      <span className="relative -top-[0.5px] text-xs font-medium tabular-nums">
-        {count}
-      </span>
+      <VoteIcon className={cn('size-3.5 stroke-[2.5px]', {
+          'top-[1.5px] relative mr-0.5': hideCount
+      })} />
+      {!hideCount && (
+        <span className="relative -top-[0.5px] text-xs font-medium tabular-nums">
+          {count}
+        </span>
+      )}
     </button>
   );
 }