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)

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>
     );