Merge pull request #21268 from overleaf/mf-new-gallery-search-result-badge

[web] Standardize `.badge` styling and HTML structure for both gallery-search and blog post page

GitOrigin-RevId: edfaceb61900897178654a920995e5c857fe7107

services/web/frontend/js/features/ui/components/bootstrap-5/badge-link.tsx

@@ -0,0 +1,24 @@
+import classNames from 'classnames'
+import type { MergeAndOverride } from '../../../../../../types/utils'
+import Badge, { type BadgeProps } from './badge'
+
+type BadgeLinkProps = MergeAndOverride<
+  BadgeProps,
+  {
+    href: string
+  }
+>
+
+function BadgeLink({ href, children, ...badgeProps }: BadgeLinkProps) {
+  const containerClass = classNames('badge-link', {
+    [`badge-link-${badgeProps.bg}`]: badgeProps.bg,
+  })
+
+  return (
+    <a className={containerClass} href={href}>
+      <Badge {...badgeProps}>{children}</Badge>
+    </a>
+  )
+}
+
+export default BadgeLink

services/web/frontend/js/features/ui/components/bootstrap-5/badge.tsx

@@ -1,7 +1,7 @@
 import { Badge as BSBadge, BadgeProps as BSBadgeProps } from 'react-bootstrap-5'
 import { MergeAndOverride } from '../../../../../../types/utils'
 
-type BadgeProps = MergeAndOverride<
+export type BadgeProps = MergeAndOverride<
   BSBadgeProps,
   {
     prepend?: React.ReactNode

services/web/frontend/stylesheets/bootstrap-5/components/badge.scss

@@ -98,6 +98,25 @@ $max-width: 160px;
   font-weight: var(--badge-font-weight);
 }
 
+.badge-link {
+  display: inline-block;
+
+  &.badge-link-light:hover .badge {
+    background-color: var(--neutral-30) !important;
+  }
+
+  .badge {
+    @include body-sm;
+
+    padding: 0 var(--bs-badge-padding-x);
+    transition: background-color 0.15s ease-in-out;
+
+    &:hover {
+      transition: background-color 0.15s ease-in-out;
+    }
+  }
+}
+
 .tags {
   .tags-list {
     list-style: none;
@@ -107,15 +126,7 @@ $max-width: 160px;
     flex-wrap: wrap;
   }
 
-  .badge-tag {
-    padding: 0 var(--bs-badge-padding-x);
-  }
-
   li {
     display: inline-flex;
   }
-
-  a {
-    font-size: small;
-  }
 }

services/web/frontend/stylesheets/bootstrap-5/components/gallery-search.scss

@@ -103,18 +103,6 @@
         display: flex;
         flex-wrap: wrap;
         gap: var(--spacing-04);
-
-        li a {
-          @include body-sm;
-
-          color: var(--color-primary-dark);
-          text-decoration: none;
-
-          &:hover {
-            text-decoration: underline;
-            color: var(--green-50);
-          }
-        }
       }
     }
   }