Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-03-18 00:19:49 +01:00
Code Issues Projects Releases Wiki Activity

feat: restyle the project meta box (#6880)

Browse Source 
Old:


![image](https://github.com/Unleash/unleash/assets/964450/14b1b2d4-ab54-4027-902c-f1a3028e7ab4)


New:


![image](https://github.com/Unleash/unleash/assets/964450/8eb07085-e253-4fb4-acf0-2ace2cc4ad2f)
This commit is contained in:
Jaanus Sellin 2024-04-18 11:55:15 +03:00 committed by GitHub
parent 633cae6f0d
commit 0572d37181
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 11 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,8 +10,7 @@ import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
const StyledContainer = styled('div')(({ theme }) => ({
borderRadius: theme.shape.borderRadiusLarge,
color: theme.palette.primary.contrastText,
backgroundColor: theme.palette.background.alternative,
backgroundColor: theme.palette.background.paper,
display: 'flex',
flexDirection: 'column',
maxWidth: '350px',
@ -34,7 +33,7 @@ const StyledMetaDataHeader = styled('div')({
});
const StyledHeader = styled('h2')(({ theme }) => ({
fontSize: theme.fontSizes.bodySize,
fontSize: theme.fontSizes.mediumHeader,
fontWeight: 'normal',
margin: 0,
}));
@ -53,7 +52,6 @@ const StyledBodyItem = styled('span')(({ theme }) => ({
const StyledDescriptionContainer = styled('div')(({ theme }) => ({
display: 'flex',
alignItems: 'center',
color: theme.palette.primary.contrastText,
}));
const StyledDescription = styled('p')({
@ -77,7 +75,11 @@ const FeatureOverviewMetaData = () => {
marginRight: theme.spacing(2),
height: '40px',
width: '40px',
padding: theme.spacing(0.5),
backgroundColor:
theme.palette.background.alternative,
fill: theme.palette.primary.contrastText,
borderRadius: `${theme.shape.borderRadiusMedium}px`,
})}
/>{' '}
<StyledHeader>{capitalize(type || '')} toggle</StyledHeader>
@ -104,12 +106,7 @@ const FeatureOverviewMetaData = () => {
title: 'Edit description',
}}
>
<Edit
sx={(theme) => ({
color: theme.palette.primary
.contrastText,
})}
/>
<Edit />
</PermissionIconButton>
</StyledDescriptionContainer>
</StyledBodyItem>
@ -127,12 +124,7 @@ const FeatureOverviewMetaData = () => {
title: 'Edit description',
}}
>
<Edit
sx={(theme) => ({
color: theme.palette.primary
.contrastText,
})}
/>
<Edit />
</PermissionIconButton>
</StyledDescriptionContainer>
</span>

1
frontend/src/themes/dark-theme.ts
View File

@ -58,6 +58,7 @@ const theme = {
fontSizes: {
extraLargeHeader: '2.5rem',
largeHeader: '2rem',
mediumHeader: '1.5rem',
mainHeader: '1.25rem',
bodySize: '1rem',
smallBody: `${14 / 16}rem`,

1
frontend/src/themes/theme.ts
View File

@ -50,6 +50,7 @@ export const theme = {
fontSizes: {
extraLargeHeader: '2.5rem',
largeHeader: '2rem',
mediumHeader: '1.5rem',
mainHeader: '1.25rem',
bodySize: '1rem',
smallBody: `${14 / 16}rem`,

1
frontend/src/themes/themeTypes.ts
View File

@ -9,6 +9,7 @@ declare module '@mui/material/styles' {
fontSizes: {
extraLargeHeader: string;
largeHeader: string;
mediumHeader: string;
mainHeader: string;
bodySize: string;
smallBody: string;