Merge pull request #24936 from overleaf/td-warning-badge-light

Use dark-on-light for warning badge by default

GitOrigin-RevId: 6259ec08c9c31f54dbdad6261a966f638303cc3b

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

@@ -1,7 +1,17 @@
 import Badge from '@/features/ui/components/bootstrap-5/badge'
 
 function OLBadge(props: React.ComponentProps<typeof Badge>) {
-  return <Badge {...props} />
+  let { bg, text, ...rest } = props
+
+  // For warning badges, use a light background by default. We still want the
+  // Bootstrap warning colour to be dark for text though, so make an
+  // adjustment here
+  if (bg === 'warning') {
+    bg = 'warning-light-bg'
+    text = 'warning'
+  }
+
+  return <Badge bg={bg} text={text} {...rest} />
 }
 
 export default OLBadge

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

@@ -15,11 +15,7 @@ const BetaBadgeIcon: FC<{
       </OLBadge>
     )
   } else {
-    return (
-      <OLBadge bg="warning-light-bg" text="warning">
-        β
-      </OLBadge>
-    )
+    return <OLBadge bg="warning">β</OLBadge>
   }
 }