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 
This commit is contained in:
parent
7f9588618f
commit
c9b674f7ab
@ -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>
|
||||||
|
@ -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 }) => {
|
||||||
|
Loading…
Reference in New Issue
Block a user