1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-06-09 01:17:06 +02:00

chore: add spacing to playground header + style segment's no constraints text (#9561)

This adds two small visual changes:
1. Add some spacing to the playground header (so that the custom
strategies info box (or other alerts) get some breathing room. (It
slightly increases the text between the header and the flag result text,
but I'll leave that as is unless we get told otherwise. It's partially
because of extra padding on the close button etc, and will be more work
than I wanna put in right now).

2. Style the "this segment has no constraints" text for empty segments
to use a smaller, less prominent font.


Playground header before:

![image](https://github.com/user-attachments/assets/821b2711-8ab4-4390-8f6b-718c7bd97731)


Playground header after:

![image](https://github.com/user-attachments/assets/08a446a7-7d8f-4c69-b539-b662a6c7be54)


Segments text before:

![image](https://github.com/user-attachments/assets/b5ad60f8-3423-406c-8b48-e28c5190f956)

Segments text after:

![image](https://github.com/user-attachments/assets/f23a640e-dcfd-441d-8fc0-c7a31c6054af)
This commit is contained in:
Thomas Heartman 2025-03-18 14:07:23 +01:00 committed by GitHub
parent 43685f516e
commit c5fa7c82fd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 13 additions and 2 deletions

View File

@ -7,7 +7,6 @@ import {
AccordionSummary,
Button,
styled,
Typography,
} from '@mui/material';
import { StrategyEvaluationItem } from 'component/common/ConstraintsList/StrategyEvaluationItem/StrategyEvaluationItem';
import { ConstraintItem } from 'component/common/ConstraintsList/ConstraintItem/ConstraintItem';
@ -64,6 +63,11 @@ const StyledButton = styled(Button)(({ theme }) => ({
fontSize: theme.typography.body2.fontSize,
}));
const StyledNoConstraintsText = styled('p')(({ theme }) => ({
fontSize: theme.typography.body2.fontSize,
color: theme.palette.text.secondary,
}));
export const SegmentItem: FC<SegmentItemProps> = ({
segment,
isExpanded,
@ -90,7 +94,11 @@ export const SegmentItem: FC<SegmentItemProps> = ({
);
}
return <Typography>This segment has no constraints.</Typography>;
return (
<StyledNoConstraintsText>
This segment has no constraints.
</StyledNoConstraintsText>
);
}, [constraintList, segment.constraints]);
return (

View File

@ -77,6 +77,9 @@ const LegacyFeatureResultInfoPopoverCell = ({
const DetailsPadding = styled('div')(({ theme }) => ({
paddingInline: `var(--popover-inline-padding, ${theme.spacing(4)})`,
paddingTop: theme.spacing(2.5),
display: 'flex',
flexDirection: 'column',
gap: theme.spacing(2),
}));
export const NewFeatureResultInfoPopoverCell = ({