Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-04-10 01:16:39 +02: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 }) => ({ const StyledContainer = styled('div')(({ theme }) => ({
borderRadius: theme.shape.borderRadiusLarge, borderRadius: theme.shape.borderRadiusLarge,
color: theme.palette.primary.contrastText, backgroundColor: theme.palette.background.paper,
backgroundColor: theme.palette.background.alternative,
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
maxWidth: '350px', maxWidth: '350px',
@ -34,7 +33,7 @@ const StyledMetaDataHeader = styled('div')({
}); });
const StyledHeader = styled('h2')(({ theme }) => ({ const StyledHeader = styled('h2')(({ theme }) => ({
fontSize: theme.fontSizes.bodySize, fontSize: theme.fontSizes.mediumHeader,
fontWeight: 'normal', fontWeight: 'normal',
margin: 0, margin: 0,
})); }));
@ -53,7 +52,6 @@ const StyledBodyItem = styled('span')(({ theme }) => ({
const StyledDescriptionContainer = styled('div')(({ theme }) => ({ const StyledDescriptionContainer = styled('div')(({ theme }) => ({
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
color: theme.palette.primary.contrastText,
})); }));
const StyledDescription = styled('p')({ const StyledDescription = styled('p')({
@ -77,7 +75,11 @@ const FeatureOverviewMetaData = () => {
marginRight: theme.spacing(2), marginRight: theme.spacing(2),
height: '40px', height: '40px',
width: '40px', width: '40px',
padding: theme.spacing(0.5),
backgroundColor:
theme.palette.background.alternative,
fill: theme.palette.primary.contrastText, fill: theme.palette.primary.contrastText,
borderRadius: `${theme.shape.borderRadiusMedium}px`,
})} })}
/>{' '} />{' '}
<StyledHeader>{capitalize(type || '')} toggle</StyledHeader> <StyledHeader>{capitalize(type || '')} toggle</StyledHeader>
@ -104,12 +106,7 @@ const FeatureOverviewMetaData = () => {
title: 'Edit description', title: 'Edit description',
}} }}
> >
<Edit <Edit />
sx={(theme) => ({
color: theme.palette.primary
.contrastText,
})}
/>
</PermissionIconButton> </PermissionIconButton>
</StyledDescriptionContainer> </StyledDescriptionContainer>
</StyledBodyItem> </StyledBodyItem>
@ -127,12 +124,7 @@ const FeatureOverviewMetaData = () => {
title: 'Edit description', title: 'Edit description',
}} }}
> >
<Edit <Edit />
sx={(theme) => ({
color: theme.palette.primary
.contrastText,
})}
/>
</PermissionIconButton> </PermissionIconButton>
</StyledDescriptionContainer> </StyledDescriptionContainer>
</span> </span>

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

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

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

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

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

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