Merge pull request #22015 from overleaf/td-bs5-beta-badge

[BS5] Use alpha and beta characters for alpha and beta badges

GitOrigin-RevId: d57bc4da8ac5142234bec50c56f6a1b98ececc6c

services/web/frontend/js/shared/components/beta-badge.tsx

@@ -4,6 +4,7 @@ import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
 import MaterialIcon from '@/shared/components/material-icon'
 import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
 import { bsVersion } from '@/features/utils/bootstrap-5'
+import OLBadge from '@/features/ui/components/ol/ol-badge'
 
 type TooltipProps = {
   id: string
@@ -14,6 +15,28 @@ type TooltipProps = {
   >['placement']
 }
 
+function BS5BetaBadge({
+  badgeClass,
+}: {
+  badgeClass: ReturnType<typeof chooseBadgeClass>
+}) {
+  if (badgeClass === 'info-badge') {
+    return <MaterialIcon type="info" className="align-middle info-badge" />
+  } else if (badgeClass === 'alpha-badge') {
+    return (
+      <OLBadge bg="primary" className="alpha-badge">
+        α
+      </OLBadge>
+    )
+  } else {
+    return (
+      <OLBadge bg="warning" className="beta-badge">
+        β
+      </OLBadge>
+    )
+  }
+}
+
 const BetaBadge: FC<{
   tooltip: TooltipProps
   url?: string
@@ -36,12 +59,7 @@ const BetaBadge: FC<{
         </span>
         <BootstrapVersionSwitcher
           bs3={<span className={classnames('badge', badgeClass)} />}
-          bs5={
-            <MaterialIcon
-              type="info"
-              className={classnames('align-middle', badgeClass)}
-            />
-          }
+          bs5={<BS5BetaBadge badgeClass={badgeClass} />}
         />
       </a>
     </OLTooltip>

services/web/frontend/stylesheets/bootstrap-5/components/beta-badges.scss

@@ -3,9 +3,9 @@
 }
 
 .alpha-badge {
-  color: var(--green-50);
+  font-family: $font-family-monospace;
 }
 
-.beta-badge {
-  color: var(--yellow-40);
+.split-test-badge-tooltip .tooltip-inner {
+  white-space: pre-wrap;
 }