fix: the badge typography

Author: mhenriette

src/components/cards/Bounty.tsx

@@ -85,12 +85,10 @@ export default function BountyCard({ bounty }: BountyProps): ReactElement {
                 customStyle={{
                   bottom: "-4px",
                   right: "-4px",
-                  fontSize: 14,
                   backgroundColor: bounty.colors.accent,
                 }}
-                size="medium"
                 value={bounty?.unreviewedSubmissionsCount}
-                className="bottom-0 -right-1 absolute p-4"
+                className="bottom-0 -right-1 absolute"
               />
             )}
           </Component>
@@ -145,12 +143,10 @@ export default function BountyCard({ bounty }: BountyProps): ReactElement {
             customStyle={{
               bottom: "-4px",
               right: "-4px",
-              fontSize: 14,
               backgroundColor: bounty.colors.accent,
             }}
-            size="medium"
             value={bounty?.unreviewedSubmissionsCount}
-            className="bottom-0 -right-1 absolute p-4"
+            className="bottom-0 -right-1 absolute"
           />
         )}
       </Component>

src/components/cards/Submission.tsx

@@ -97,7 +97,7 @@ export default function SubmissionCard({ submission, link = "", children }: Subm
             )}
             {submission.metadata && submission.metadata.evaluation ? (
               <div className="inline-flex flex-1 items-center space-x-1">
-                <Badge customStyle={badgeButtonStyles} size="medium" className="relative" value={submission.metadata.evaluation.points} />
+                <Badge customStyle={badgeButtonStyles} className="relative" value={submission.metadata.evaluation.points} />
                 <span className="text-sm leading">{t("submissions.evaluation.points")}</span>
               </div>
             ) : (

src/components/cards/User.tsx

@@ -92,7 +92,6 @@ export default function UserCard({ boxLayout, link, bordered, expanded, user, ba
               <Badge
                 value={badge}
                 className="absolute"
-                size="medium"
                 customStyle={{
                   bottom: "-1px",
                   right: "-3px",

src/components/list/Scoreboard.tsx

@@ -54,7 +54,7 @@ export default function ScoreboardList({ badgeStyles = { backgroundColor: "purpl
             <div className="relative">
               <div className="absolute md:relative right-2 md:-bottom-10 -bottom-14 md:top-0">
                 <Avatar user={user} size="large" />
-                <Badge className="absolute left-9 top-10 w-6 h-6" value="1" customStyle={badgeStyles} />
+                <Badge className="absolute left-9 top-10" value="1" customStyle={badgeStyles} />
               </div>
             </div>
           </div>

src/components/popups/NotificationPopup.tsx

@@ -64,7 +64,7 @@ export default function NotificationPopup({ buttonStyles }: NotificationPopupPro
         <li className={`inline-block align-middle mr-2 relative text-gray-500 max-w-80 ${isNotificationVisible ? "z-50" : "z-10"}`} onClick={toggle}>
           <Button type="button" padding={false} variant="secondary" className="p-2 bg-gray-100 bg-opacity-75 hover:bg-gray-50 text-primary" customStyle={buttonStyles}>
             <BellIcon />
-            {unread > 0 && <Badge value={unread} className="top-0 -right-1 absolute" />}
+            {unread > 0 && <Badge value={unread} className="top-0 -right-1 absolute"  size="small"/>}
           </Button>
         </li>
         {isNotificationVisible && (

src/components/sections/submissions/_partials/SubmissionCard.tsx

@@ -91,7 +91,7 @@ export default function SubmissionCard({ submission }: SubmissionCard): ReactEle
           </span>
           <p className="line-clamp-3 text-sm lg:text-base">{submission.text}</p>
           <div className="pt-5">
-            <Badge customStyle={{ backgroundColor: colors?.textAccent }} size="medium" className="relative left-0" value={submission.metadata.evaluation.points} />
+            <Badge customStyle={{ backgroundColor: colors?.textAccent }} className="relative left-0" value={submission.metadata.evaluation.points} />
             <span className="ml-1 text-sm">{t("submissions.evaluation.points")}</span>
           </div>
         </div>

src/components/ui/Badge.tsx

@@ -29,15 +29,17 @@ interface BadgeProps extends Omit<HTMLProps<HTMLSpanElement>, "size"> {
 }
  * @returns {ReactElement}
  */
-export default function Badge({ customStyle, value, size = "small", className, testId = "badgeId", ...props }: BadgeProps): ReactElement {
-  const sizeClasses = useMemo(
-    () =>
-      ({
-        medium: "w-6 h-6 text-sm",
-        small: "h-4 w-4 text-xxs",
-      }[size]),
-    [size]
-  );
+export default function Badge({ customStyle, value, size = "medium", className, testId = "badgeId", ...props }: BadgeProps): ReactElement {
+  const sizeClasses = useMemo(() => {
+    const expandedClasses = "w-7 h-7";
+    const defaultClasses = "w-6 h-6";
+    
+    if (value && value.toString().length >= 3) {
+      return expandedClasses;
+    }
+    if (size === "small") return "w-4 h-4";
+    return defaultClasses;
+  }, [value, size]);
 
   const router = useRouter();
   const isCommunity: boolean = router.pathname.startsWith("communities-slug__");
@@ -50,7 +52,7 @@ export default function Badge({ customStyle, value, size = "small", className, t
       data-testid={testId}
       {...props}
       className={classNames(
-        "font-semibold leading-3 text-center inline-flex items-center justify-center rounded-full text-xxs",
+        `font-semibold leading-3 text-center inline-flex items-center justify-center rounded-full ${size ==="small"? "text-xxs":"text-sm"}`,
         sizeClasses,
         className,
         { "bg-white text-gray-900": isCommunity },

src/components/ui/Tag.tsx

@@ -46,7 +46,7 @@ export default function Tag({ rounded = true, type = "gray", value, children, te
   );
   return (
     <div {...props} className={tagClassNames} data-testid={testId}>
-      <span className="text-xs font-medium block leading-none">{value ? <span data-testid={tagValueTestId}>{value}</span> : children}</span>
+      <span className="text-xs font-medium block leading-3.5">{value ? <span data-testid={tagValueTestId}>{value}</span> : children}</span>
     </div>
   );
 }