feat: improve feature overview styling (#6910)

Unleash · Apr 23, 2024 · bf33664 · bf33664
1 parent 8ec9a0f
commit bf33664
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 20 deletions.
diff --git a/...omponent/feature/FeatureView/FeatureOverview/FeatureLifecycle/FeatureLifecycleTooltip.tsx b/...omponent/feature/FeatureView/FeatureOverview/FeatureLifecycle/FeatureLifecycleTooltip.tsx
@@ -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

diff --git a/...t/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx b/...t/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx
@@ -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,37 +100,31 @@ 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' }}
                                 >
                                     <FeatureLifecycleStageIcon
                                         stage={{ name: 'initial' }}
                                     />
                                 </FeatureLifecycleTooltip>
-                            </StyledBodyItem>
+                            </StyledRow>
                         }
                     />
 
                     <ConditionallyRender
                         condition={Boolean(description)}
                         show={
                             <StyledBodyItem data-loading>
-                                <div>Description:</div>
+                                <StyledLabel>Description:</StyledLabel>
                                 <StyledDescriptionContainer>
                                     <StyledDescription>
                                         {description}