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:
parent
d721499bd4
commit
45fc547049
@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -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>
|
||||||
);
|
);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user