From 88e1ec5dc45737d3741dd518a4b8197c6bd80135 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Fri, 1 Nov 2024 10:08:16 +0100
Subject: [PATCH] chore: use palette.background.alternative for background
 (#8627)

The default badge styling uses theme.palette.primary.main for the
color, but this color doesn't give us the contrast we need in dark
mode. The solution is to use theme.palette.background.alternative
instead.

Before:

![image](https://github.com/user-attachments/assets/5fb535ff-1c17-47b9-a818-7b995cd188ae)


After:

![image](https://github.com/user-attachments/assets/43b7aa05-bfd8-4f6c-a9c3-fadb5268429f)
---
 .../EventTimelineEventGroup.tsx                       | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/frontend/src/component/events/EventTimeline/EventTimelineEventGroup/EventTimelineEventGroup.tsx b/frontend/src/component/events/EventTimeline/EventTimelineEventGroup/EventTimelineEventGroup.tsx
index 5e2aeb64d1ff..8716c6a15cc5 100644
--- a/frontend/src/component/events/EventTimeline/EventTimelineEventGroup/EventTimelineEventGroup.tsx
+++ b/frontend/src/component/events/EventTimeline/EventTimelineEventGroup/EventTimelineEventGroup.tsx
@@ -23,6 +23,12 @@ interface IEventTimelineEventProps {
     endTime: number;
 }
 
+const StyledBadge = styled(Badge)(({ theme }) => ({
+    '.MuiBadge-badge': {
+        backgroundColor: theme.palette.background.alternative,
+    },
+}));
+
 export const EventTimelineEventGroup = ({
     group,
     startTime,
@@ -48,13 +54,12 @@ export const EventTimelineEventGroup = ({
                 maxWidth={350}
                 arrow
             >
-                <Badge
+                <StyledBadge
                     badgeContent={group.length}
-                    color='primary'
                     invisible={group.length < 2}
                 >
                     <EventTimelineEventCircle group={group} />
-                </Badge>
+                </StyledBadge>
             </HtmlTooltip>
         </StyledEvent>
     );