feat: restyle the project meta box (#6880)

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)
Unleash · Apr 18, 2024 · 0572d37 · 0572d37
1 parent 633cae6
commit 0572d37
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 16 deletions.
diff --git a/...t/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx b/...t/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx
@@ -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>

diff --git a/frontend/src/themes/dark-theme.ts b/frontend/src/themes/dark-theme.ts
@@ -58,6 +58,7 @@ const theme = {
     fontSizes: {
         extraLargeHeader: '2.5rem',
         largeHeader: '2rem',
+        mediumHeader: '1.5rem',
         mainHeader: '1.25rem',
         bodySize: '1rem',
         smallBody: `${14 / 16}rem`,

diff --git a/frontend/src/themes/theme.ts b/frontend/src/themes/theme.ts
@@ -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`,

diff --git a/frontend/src/themes/themeTypes.ts b/frontend/src/themes/themeTypes.ts
@@ -9,6 +9,7 @@ declare module '@mui/material/styles' {
         fontSizes: {
             extraLargeHeader: string;
             largeHeader: string;
+            mediumHeader: string;
             mainHeader: string;
             bodySize: string;
             smallBody: string;