From 34be8b75ad14dfe6d9b9d03ef55d8493e7fed711 Mon Sep 17 00:00:00 2001
From: Tim Down <158919+timdown@users.noreply.github.com>
Date: Wed, 16 Apr 2025 09:38:31 +0100
Subject: [PATCH] Merge pull request #24936 from
 overleaf/td-warning-badge-light

Use dark-on-light for warning badge by default

GitOrigin-RevId: 6259ec08c9c31f54dbdad6261a966f638303cc3b
---
 .../js/features/ui/components/ol/ol-badge.tsx        | 12 +++++++++++-
 .../js/shared/components/beta-badge-icon.tsx         |  6 +-----
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/services/web/frontend/js/features/ui/components/ol/ol-badge.tsx b/services/web/frontend/js/features/ui/components/ol/ol-badge.tsx
index 47fd163d5c..7344ddb6f8 100644
--- a/services/web/frontend/js/features/ui/components/ol/ol-badge.tsx
+++ b/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
diff --git a/services/web/frontend/js/shared/components/beta-badge-icon.tsx b/services/web/frontend/js/shared/components/beta-badge-icon.tsx
index 2e4036d448..b331c90175 100644
--- a/services/web/frontend/js/shared/components/beta-badge-icon.tsx
+++ b/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>
   }
 }