From 95d5957ecce1231033a2676ab061010954d69214 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jorge=20Cort=C3=A9s?= <jecr@users.noreply.github.com>
Date: Mon, 25 Mar 2024 16:49:10 -0600
Subject: [PATCH] frontend: use dot badge if no content (#2963)

Badges in the QuickLinks component use the standard variant which looks
too big without text in it.
This PR conditionally renders either a `dot` variant if there is no
badge content or the `standard` one if there is.

before:
<img width="677" alt="image"
src="https://github.com/lyft/clutch/assets/5430603/8f27d787-4a26-4e25-aba9-600b5e661143">

after:
<img width="675" alt="image"
src="https://github.com/lyft/clutch/assets/5430603/fa37c7f3-1cd6-4961-a23e-29d7d438c123">

### Testing Performed
manual
---
 frontend/packages/core/src/quick-links.tsx    | 61 +++++++++++--------
 .../core/src/stories/quick-links.stories.tsx  |  4 +-
 2 files changed, 38 insertions(+), 27 deletions(-)

diff --git a/frontend/packages/core/src/quick-links.tsx b/frontend/packages/core/src/quick-links.tsx
index 7082a39c3e..0eda3b5ff6 100644
--- a/frontend/packages/core/src/quick-links.tsx
+++ b/frontend/packages/core/src/quick-links.tsx
@@ -41,6 +41,18 @@ const StyledPopperItem = styled(PopperItem)({
   },
 });
 
+const StyledBadge = styled(Badge)({
+  ".MuiBadge-anchorOriginTopRightCircular": {
+    top: "23%",
+    right: "23%",
+  },
+  ".MuiBadge-dot": {
+    height: "10px",
+    minWidth: "10px",
+    borderRadius: "50%",
+  },
+});
+
 interface LinkGroupProps {
   linkGroupName: string;
   linkGroupImage: string;
@@ -77,6 +89,18 @@ const QuickLinkContainer = ({ keyProp, name, children }: QuickLinkContainerProps
   );
 };
 
+const QuickLinkWrapper = ({ linkGroup, children }) => (
+  <StyledBadge
+    key={`quicklink-${linkGroup.name}`}
+    badgeContent={linkGroup.badge?.content ?? null}
+    color={linkGroup.badge?.color ?? "default"}
+    overlap="circular"
+    variant={linkGroup.badge?.content.trim() ? "standard" : "dot"}
+  >
+    {children}
+  </StyledBadge>
+);
+
 // If only a single link, then no popper is necessary
 const QuickLink = ({ link, linkGroupName, linkGroupImage }: QuickLinkProps) =>
   link?.url ? (
@@ -159,36 +183,23 @@ const SlicedLinkGroup = ({ slicedLinkGroups }: SlicedLinkGroupProps) => {
   return (
     <>
       {(slicedLinkGroups || []).map(linkGroup => {
-        if (linkGroup.links?.length === 1) {
-          return (
-            <Badge
-              key={`quicklink-${linkGroup.name}`}
-              badgeContent={linkGroup.badge?.content ?? null}
-              color={linkGroup.badge?.color ?? "default"}
-              overlap="circular"
-            >
+        return (
+          <QuickLinkWrapper linkGroup={linkGroup}>
+            {linkGroup.links?.length === 1 ? (
               <QuickLink
                 link={linkGroup.links[0]}
                 linkGroupName={linkGroup.name ?? ""}
                 linkGroupImage={linkGroup.imagePath ?? ""}
               />
-            </Badge>
-          );
-        }
-        return (
-          <Badge
-            key={`quicklink-${linkGroup.name}`}
-            badgeContent={linkGroup.badge?.content ?? null}
-            color={linkGroup.badge?.color ?? "default"}
-            overlap="circular"
-          >
-            <QuickLinkGroup
-              key={`quicklink-${linkGroup.name}`}
-              linkGroupName={linkGroup.name ?? " "}
-              linkGroupImage={linkGroup.imagePath ?? ""}
-              links={linkGroup?.links ?? []}
-            />
-          </Badge>
+            ) : (
+              <QuickLinkGroup
+                key={`quicklink-${linkGroup.name}`}
+                linkGroupName={linkGroup.name ?? " "}
+                linkGroupImage={linkGroup.imagePath ?? ""}
+                links={linkGroup?.links ?? []}
+              />
+            )}
+          </QuickLinkWrapper>
         );
       })}
     </>
diff --git a/frontend/packages/core/src/stories/quick-links.stories.tsx b/frontend/packages/core/src/stories/quick-links.stories.tsx
index 5451ae9ebc..93ab46bcc1 100644
--- a/frontend/packages/core/src/stories/quick-links.stories.tsx
+++ b/frontend/packages/core/src/stories/quick-links.stories.tsx
@@ -127,14 +127,14 @@ const withBadges = [
   {
     ...linkGroups[0],
     badge: {
-      color: "error",
+      color: "warning",
       content: "1",
     },
   },
   {
     ...linkGroups[1],
     badge: {
-      color: "success",
+      color: "error",
       content: " ",
     },
   },