Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00
Code Issues Projects Releases Wiki Activity

feat: improve feature overview styling (#6910)

Browse Source
This commit is contained in:
Mateusz Kwasniewski 2024-04-23 15:08:59 +02:00 committed by GitHub
parent 8ec9a0f62d
commit bf3366434c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 25 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FeatureLifecycleTooltip.tsx
View File

@ -58,7 +58,7 @@ const StageBox = styled(Box, {
position: 'absolute', position: 'absolute',
display: 'block', display: 'block',
borderStyle: 'solid', borderStyle: 'solid',
borderColor: `${theme.palette.primary.main} transparent`, borderColor: `${theme.palette.primary.light} transparent`,
borderWidth: '0 6px 6px', borderWidth: '0 6px 6px',
top: theme.spacing(3.25), top: theme.spacing(3.25),
left: theme.spacing(1.75), left: theme.spacing(1.75),
@ -79,7 +79,7 @@ const StageBox = styled(Box, {
color: theme.palette.text.secondary, color: theme.palette.text.secondary,
// active wrapper for stage name text // active wrapper for stage name text
...(active && { ...(active && {
backgroundColor: theme.palette.primary.main, backgroundColor: theme.palette.primary.light,
color: theme.palette.primary.contrastText, color: theme.palette.primary.contrastText,
fontWeight: theme.fontWeight.bold, fontWeight: theme.fontWeight.bold,
borderRadius: theme.spacing(0.5), borderRadius: theme.spacing(0.5),
@ -88,7 +88,7 @@ const StageBox = styled(Box, {
})); }));
const ColorFill = styled(Box)(({ theme }) => ({ const ColorFill = styled(Box)(({ theme }) => ({
backgroundColor: theme.palette.primary.main, backgroundColor: theme.palette.primary.light,
color: theme.palette.primary.contrastText, color: theme.palette.primary.contrastText,
borderRadius: theme.spacing(0, 0, 1, 1), // has to match the parent tooltip container borderRadius: theme.spacing(0, 0, 1, 1), // has to match the parent tooltip container
margin: theme.spacing(-1, -1.5), // has to match the parent tooltip container margin: theme.spacing(-1, -1.5), // has to match the parent tooltip container

39
frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx
View File

@ -36,7 +36,7 @@ const StyledMetaDataHeader = styled('div')({
}); });
const StyledHeader = styled('h2')(({ theme }) => ({ const StyledHeader = styled('h2')(({ theme }) => ({
fontSize: theme.fontSizes.mediumHeader, fontSize: theme.fontSizes.mainHeader,
fontWeight: 'normal', fontWeight: 'normal',
margin: 0, margin: 0,
})); }));
@ -45,11 +45,17 @@ const StyledBody = styled('div')(({ theme }) => ({
margin: theme.spacing(2, 0), margin: theme.spacing(2, 0),
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
fontSize: theme.fontSizes.smallBody,
})); }));
const StyledBodyItem = styled('span')(({ theme }) => ({ const StyledBodyItem = styled('span')(({ theme }) => ({
margin: theme.spacing(1, 0), padding: theme.spacing(0.5, 0),
fontSize: theme.fontSizes.bodySize, }));
const StyledRow = styled('div')(({ theme }) => ({
display: 'flex',
justifyContent: 'space-between',
padding: theme.spacing(1, 0),
})); }));
const StyledDescriptionContainer = styled('div')(({ theme }) => ({ const StyledDescriptionContainer = styled('div')(({ theme }) => ({
@ -61,6 +67,11 @@ const StyledDescription = styled('p')({
wordBreak: 'break-word', wordBreak: 'break-word',
}); });
export const StyledLabel = styled('span')(({ theme }) => ({
color: theme.palette.text.secondary,
marginRight: theme.spacing(1),
}));
const FeatureOverviewMetaData = () => { const FeatureOverviewMetaData = () => {
const projectId = useRequiredPathParam('projectId'); const projectId = useRequiredPathParam('projectId');
const featureId = useRequiredPathParam('featureId'); const featureId = useRequiredPathParam('featureId');
@ -89,21 +100,15 @@ const FeatureOverviewMetaData = () => {
<StyledHeader>{capitalize(type || '')} toggle</StyledHeader> <StyledHeader>{capitalize(type || '')} toggle</StyledHeader>
</StyledMetaDataHeader> </StyledMetaDataHeader>
<StyledBody> <StyledBody>
<StyledBodyItem data-loading> <StyledRow data-loading>
Project: {project} <StyledLabel>Project:</StyledLabel>
</StyledBodyItem> <span>{project}</span>
</StyledRow>
<ConditionallyRender <ConditionallyRender
condition={featureLifecycleEnabled} condition={featureLifecycleEnabled}
show={ show={
<StyledBodyItem <StyledRow data-loading>
sx={{ <StyledLabel>Lifecycle:</StyledLabel>
display: 'flex',
gap: 1,
alignItems: 'start',
}}
data-loading
>
<span>Lifecycle:</span>
<FeatureLifecycleTooltip <FeatureLifecycleTooltip
stage={{ name: 'initial' }} stage={{ name: 'initial' }}
> >
@ -111,7 +116,7 @@ const FeatureOverviewMetaData = () => {
stage={{ name: 'initial' }} stage={{ name: 'initial' }}
/> />
</FeatureLifecycleTooltip> </FeatureLifecycleTooltip>
</StyledBodyItem> </StyledRow>
} }
/> />
@ -119,7 +124,7 @@ const FeatureOverviewMetaData = () => {
condition={Boolean(description)} condition={Boolean(description)}
show={ show={
<StyledBodyItem data-loading> <StyledBodyItem data-loading>
<div>Description:</div> <StyledLabel>Description:</StyledLabel>
<StyledDescriptionContainer> <StyledDescriptionContainer>
<StyledDescription> <StyledDescription>
{description} {description}