From 0572d371819713e045cea68bd97f40b67d47225e Mon Sep 17 00:00:00 2001
From: Jaanus Sellin <sellinjaanus@gmail.com>
Date: Thu, 18 Apr 2024 11:55:15 +0300
Subject: [PATCH] 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)
---
 .../FeatureOverviewMetaData.tsx               | 24 +++++++------------
 frontend/src/themes/dark-theme.ts             |  1 +
 frontend/src/themes/theme.ts                  |  1 +
 frontend/src/themes/themeTypes.ts             |  1 +
 4 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx
index 3f0d9a63f3..50ca2ed8ef 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx
+++ b/frontend/src/component/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
index ff5a7d382e..acf4bd89e8 100644
--- 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
index 7f5be98cbc..61bbf23266 100644
--- 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
index 9ebd477849..ca04500239 100644
--- 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;