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',
display: 'block',
borderStyle: 'solid',
borderColor: `${theme.palette.primary.main} transparent`,
borderColor: `${theme.palette.primary.light} transparent`,
borderWidth: '0 6px 6px',
top: theme.spacing(3.25),
left: theme.spacing(1.75),
@ -79,7 +79,7 @@ const StageBox = styled(Box, {
color: theme.palette.text.secondary,
// active wrapper for stage name text
...(active && {
backgroundColor: theme.palette.primary.main,
backgroundColor: theme.palette.primary.light,
color: theme.palette.primary.contrastText,
fontWeight: theme.fontWeight.bold,
borderRadius: theme.spacing(0.5),
@ -88,7 +88,7 @@ const StageBox = styled(Box, {
}));
const ColorFill = styled(Box)(({ theme }) => ({
backgroundColor: theme.palette.primary.main,
backgroundColor: theme.palette.primary.light,
color: theme.palette.primary.contrastText,
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

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