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
lyft · Mar 25, 2024 · 95d5957 · 95d5957
1 parent daefdfb
commit 95d5957
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 27 deletions.
diff --git 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
@@ -127,14 +127,14 @@ const withBadges = [
   {
     ...linkGroups[0],
     badge: {
-      color: "error",
+      color: "warning",
       content: "1",
     },
   },
   {
     ...linkGroups[1],
     badge: {
-      color: "success",
+      color: "error",
       content: " ",
     },
   },