1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-11-10 01:19:53 +01:00

feat: start now button with background (#10897)

This commit is contained in:
Mateusz Kwasniewski 2025-10-31 12:24:56 +01:00 committed by GitHub
parent d721499bd4
commit 45fc547049
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 8 additions and 18 deletions

View File

@ -34,7 +34,7 @@ const StyledTimeContainer = styled('span')(({ theme }) => ({
borderRadius: theme.shape.borderRadiusLarge, borderRadius: theme.shape.borderRadiusLarge,
})); }));
const StyledIcon = styled(HourglassEmptyOutlinedIcon)(({ theme }) => ({ const StyledHourglassIcon = styled(HourglassEmptyOutlinedIcon)(({ theme }) => ({
fontSize: 18, fontSize: 18,
color: theme.palette.primary.main, color: theme.palette.primary.main,
})); }));
@ -75,14 +75,12 @@ export const MilestoneNextStartTime = ({
activeMilestoneId, activeMilestoneId,
); );
const text = projectedStartTime if (!projectedStartTime) return null;
? `Starting ${formatSmartDate(projectedStartTime)}`
: 'Waiting to start';
return ( return (
<StyledTimeContainer> <StyledTimeContainer>
<StyledIcon /> <StyledHourglassIcon />
{text} {`Starting ${formatSmartDate(projectedStartTime)}`}
</StyledTimeContainer> </StyledTimeContainer>
); );
}; };

View File

@ -18,7 +18,9 @@ const StyledStatusButton = styled('button', {
paddingRight: theme.spacing(1), paddingRight: theme.spacing(1),
cursor: 'pointer', cursor: 'pointer',
backgroundColor: backgroundColor:
status === 'active' ? theme.palette.success.light : 'transparent', status === 'active'
? theme.palette.success.light
: theme.palette.neutral.light,
'&:focus-visible': { '&:focus-visible': {
outline: `2px solid ${theme.palette.primary.main}`, outline: `2px solid ${theme.palette.primary.main}`,
}, },
@ -41,10 +43,6 @@ const StyledStatusButton = styled('button', {
: status === 'paused' : status === 'paused'
? theme.palette.text.primary ? theme.palette.text.primary
: theme.palette.primary.main, : theme.palette.primary.main,
textDecoration:
status === 'not-started' || status === 'completed'
? 'underline'
: 'none',
'& svg': { '& svg': {
color: color:
status === 'active' status === 'active'
@ -105,12 +103,6 @@ export const ReleasePlanMilestoneStatus = ({
const statusIcon = getStatusIcon(status); const statusIcon = getStatusIcon(status);
const disabled = status === 'active' || status === 'paused'; const disabled = status === 'active' || status === 'paused';
// Hide the play icon when progressions are enabled and milestone is not active/paused
const shouldShowIcon =
status === 'active' ||
status === 'paused' ||
!milestoneProgressionsEnabled;
return ( return (
<StyledStatusButton <StyledStatusButton
status={status} status={status}
@ -120,7 +112,7 @@ export const ReleasePlanMilestoneStatus = ({
}} }}
disabled={disabled} disabled={disabled}
> >
{shouldShowIcon && statusIcon} {statusIcon}
{statusText} {statusText}
</StyledStatusButton> </StyledStatusButton>
); );