1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00

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)
This commit is contained in:
Thomas Heartman 2024-11-01 10:08:16 +01:00 committed by GitHub
parent ea08067534
commit 88e1ec5dc4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

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