1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-04-24 01:18:01 +02:00

fix: Project Status UI fixes (#8762)

This PR fixes a few small UI issues reported by UX. It:
- Adds hover colors to the lifecycle boxes
- Adjusts the font size for the health widget to match project resources
and lifecycle
- Makes the `view health over time tooltip` take you to the insights
page with the current project preselected


![image](https://github.com/user-attachments/assets/f672a577-1b01-4d45-98da-d5c367c9a0bc)
This commit is contained in:
Thomas Heartman 2024-11-15 08:16:09 +01:00 committed by GitHub
parent 7f9588618f
commit c9b674f7ab
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 7 additions and 8 deletions

View File

@ -28,10 +28,6 @@ const StyledSVG = styled('svg')({
position: 'absolute', position: 'absolute',
}); });
const StyledLink = styled(Link)(({ theme }) => ({
fontSize: theme.typography.body2.fontSize,
}));
export const ProjectHealth = () => { export const ProjectHealth = () => {
const projectId = useRequiredPathParam('projectId'); const projectId = useRequiredPathParam('projectId');
const { const {
@ -93,14 +89,14 @@ export const ProjectHealth = () => {
</StyledSVG> </StyledSVG>
</SVGWrapper> </SVGWrapper>
<TextContainer> <TextContainer>
<Typography variant='body2'> <Typography>
On average, your project health has remained at{' '} On average, your project health has remained at{' '}
{averageHealth}% the last 4 weeks {averageHealth}% the last 4 weeks
</Typography> </Typography>
{!isOss() && ( {!isOss() && (
<StyledLink to='/insights'> <Link to={`/insights?project=IS%3A${projectId}`}>
View health over time View health over time
</StyledLink> </Link>
)} )}
</TextContainer> </TextContainer>
</ChartRow> </ChartRow>

View File

@ -16,13 +16,16 @@ const LifecycleBoxContent = styled('div')(({ theme }) => ({
display: 'flex', display: 'flex',
flexFlow: 'column', flexFlow: 'column',
justifyContent: 'space-between', justifyContent: 'space-between',
transition: 'border-color 200ms', transition: 'all 200ms',
borderRadius: theme.shape.borderRadiusExtraLarge, borderRadius: theme.shape.borderRadiusExtraLarge,
border: `2px solid ${theme.palette.divider}`, border: `2px solid ${theme.palette.divider}`,
'&:focus-visible': { '&:focus-visible': {
outline: 'none', outline: 'none',
borderColor: theme.palette.primary.main, borderColor: theme.palette.primary.main,
}, },
'&:hover': {
backgroundColor: theme.palette.table.rowHover,
},
})); }));
const LifecycleBoxTooltip: FC<{ text: string }> = ({ text }) => { const LifecycleBoxTooltip: FC<{ text: string }> = ({ text }) => {