Hide downvote counts

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');
                     }}

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]')} />
+      <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>
   );
 }