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

make some small changes to get started

This commit is contained in:
Thomas Heartman 2025-06-19 12:53:18 +02:00
parent 40c7c25db9
commit f13290ccf1
3 changed files with 33 additions and 32 deletions

View File

@ -52,7 +52,7 @@ export const SegmentChange: FC<ISegmentChangeProps> = ({
px: 3, px: 3,
}} }}
> >
<Typography>Segment name: </Typography> <Typography>Segment:</Typography>
<Link <Link
component={RouterLink} component={RouterLink}

View File

@ -1,7 +1,7 @@
import type React from 'react'; import type React from 'react';
import type { FC } from 'react'; import type { FC } from 'react';
import { Link as RouterLink } from 'react-router-dom'; import { Link as RouterLink } from 'react-router-dom';
import { Box, Card, Typography, Link } from '@mui/material'; import { Box, Card, Typography, Link, styled } from '@mui/material';
import { ConflictWarning } from './Change/ConflictWarning.tsx'; import { ConflictWarning } from './Change/ConflictWarning.tsx';
interface IFeatureToggleChanges { interface IFeatureToggleChanges {
@ -12,6 +12,15 @@ interface IFeatureToggleChanges {
children?: React.ReactNode; children?: React.ReactNode;
} }
const HeaderGroup = styled('hgroup', {
shouldForwardProp: (prop) => prop !== 'conflict',
})<{ conflict?: string }>(({ theme, conflict }) => ({
display: 'flex',
paddingTop: theme.spacing(conflict ? 0 : 2),
paddingBottom: theme.spacing(2),
paddingInline: theme.spacing(3),
}));
export const FeatureToggleChanges: FC<IFeatureToggleChanges> = ({ export const FeatureToggleChanges: FC<IFeatureToggleChanges> = ({
featureName, featureName,
projectId, projectId,
@ -28,9 +37,7 @@ export const FeatureToggleChanges: FC<IFeatureToggleChanges> = ({
> >
<Box <Box
sx={(theme) => ({ sx={(theme) => ({
backgroundColor: conflict backgroundColor: theme.palette.neutral.light,
? theme.palette.neutral.light
: theme.palette.neutral.light,
borderRadius: (theme) => borderRadius: (theme) =>
`${theme.shape.borderRadiusLarge}px ${theme.shape.borderRadiusLarge}px 0 0`, `${theme.shape.borderRadiusLarge}px ${theme.shape.borderRadiusLarge}px 0 0`,
border: '1px solid', border: '1px solid',
@ -43,32 +50,26 @@ export const FeatureToggleChanges: FC<IFeatureToggleChanges> = ({
})} })}
> >
<ConflictWarning conflict={conflict} /> <ConflictWarning conflict={conflict} />
<Box <HeaderGroup conflict={conflict}>
sx={{ <Typography>Feature flag:</Typography>
display: 'flex', <Typography component='h3'>
pt: conflict ? 0 : 2, <Link
pb: 2, component={RouterLink}
px: 3, to={`/projects/${projectId}/features/${featureName}`}
}} color='primary'
> underline='hover'
<Typography>Feature flag name: </Typography> sx={{
marginLeft: 1,
<Link '& :hover': {
component={RouterLink} textDecoration: 'underline',
to={`/projects/${projectId}/features/${featureName}`} },
color='primary' }}
underline='hover' onClick={onNavigate}
sx={{ >
marginLeft: 1, <strong>{featureName}</strong>
'& :hover': { </Link>
textDecoration: 'underline', </Typography>
}, </HeaderGroup>
}}
onClick={onNavigate}
>
<strong>{featureName}</strong>
</Link>
</Box>
</Box> </Box>
<Box>{children}</Box> <Box>{children}</Box>
</Card> </Card>

View File

@ -26,7 +26,7 @@ export const ChangeRequestHeader: FC<{ changeRequest: ChangeRequestType }> = ({
title={title} title={title}
setTitle={setTitle} setTitle={setTitle}
> >
<StyledHeader variant='h1' sx={{ mr: 1.5 }}> <StyledHeader variant='h1' component='h2' sx={{ mr: 1.5 }}>
{title} {title}
</StyledHeader> </StyledHeader>
</ChangeRequestTitle> </ChangeRequestTitle>