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:  Playground header after:  Segments text before:  Segments text after: 
This commit is contained in:
parent
43685f516e
commit
c5fa7c82fd
@ -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 (
|
||||
|
@ -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 = ({
|
||||
|
Loading…
Reference in New Issue
Block a user