feat: make personal dashboard UI more compact (#8359)

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FlagExposure.tsx

@@ -1,5 +1,4 @@
 import { type FC, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
 import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
 import type { ILastSeenEnvironments } from 'interfaces/featureToggle';
 import { Box } from '@mui/material';
@@ -14,7 +13,6 @@ export const FlagExposure: FC<{
     flagName: string;
     onArchive: () => void;
 }> = ({ project, flagName, onArchive }) => {
-    const navigate = useNavigate();
     const { feature, refetchFeature } = useFeature(project, flagName);
     const lastSeenEnvironments: ILastSeenEnvironments[] =
         feature.environments?.map((env) => ({
@@ -31,6 +29,7 @@ export const FlagExposure: FC<{
     return (
         <Box sx={{ display: 'flex' }}>
             <FeatureEnvironmentSeen
+                sx={{ pt: 0, pb: 0 }}
                 featureLastSeen={feature.lastSeenAt}
                 environments={lastSeenEnvironments}
             />

frontend/src/component/personalDashboard/ContentGridNoProjects.tsx

@@ -8,7 +8,7 @@ import {
     ContentGridContainer,
     EmptyGridItem,
     ProjectGrid,
-    SpacedGridItem,
+    GridItem,
 } from './Grid';
 
 const PaddedEmptyGridItem = styled(EmptyGridItem)(({ theme }) => ({
@@ -70,13 +70,13 @@ export const ContentGridNoProjects: React.FC<Props> = ({ owners, admins }) => {
     return (
         <ContentGridContainer>
             <ProjectGrid>
-                <SpacedGridItem gridArea='title'>
+                <GridItem gridArea='title'>
                     <Typography variant='h3'>My projects</Typography>
-                </SpacedGridItem>
-                <SpacedGridItem gridArea='onboarding'>
+                </GridItem>
+                <GridItem gridArea='onboarding'>
                     <Typography>Potential next steps</Typography>
-                </SpacedGridItem>
-                <SpacedGridItem gridArea='projects'>
+                </GridItem>
+                <GridItem gridArea='projects'>
                     <GridContent>
                         <Typography>
                             You don't currently have access to any projects in
@@ -91,8 +91,8 @@ export const ContentGridNoProjects: React.FC<Props> = ({ owners, admins }) => {
                             projects in the system and ask the owner for access.
                         </Typography>
                     </GridContent>
-                </SpacedGridItem>
-                <SpacedGridItem gridArea='box1'>
+                </GridItem>
+                <GridItem gridArea='box1'>
                     <GridContent>
                         <TitleContainer>
                             <NeutralCircleContainer>1</NeutralCircleContainer>
@@ -133,8 +133,8 @@ export const ContentGridNoProjects: React.FC<Props> = ({ owners, admins }) => {
                             )}
                         </BoxMainContent>
                     </GridContent>
-                </SpacedGridItem>
-                <SpacedGridItem gridArea='box2'>
+                </GridItem>
+                <GridItem gridArea='box2'>
                     <GridContent>
                         <TitleContainer>
                             <NeutralCircleContainer>2</NeutralCircleContainer>
@@ -157,7 +157,7 @@ export const ContentGridNoProjects: React.FC<Props> = ({ owners, admins }) => {
                             )}
                         </BoxMainContent>
                     </GridContent>
-                </SpacedGridItem>
+                </GridItem>
                 <EmptyGridItem />
                 <PaddedEmptyGridItem gridArea='owners' />
             </ProjectGrid>

frontend/src/component/personalDashboard/Grid.tsx

@@ -59,10 +59,17 @@ export const FlagGrid = styled(ContentGrid)(
     }),
 );
 
+export const GridItem = styled('div', {
+    shouldForwardProp: (prop) => prop !== 'gridArea',
+})<{ gridArea: string }>(({ theme, gridArea }) => ({
+    padding: theme.spacing(2, 4),
+    gridArea,
+}));
+
 export const SpacedGridItem = styled('div', {
     shouldForwardProp: (prop) => prop !== 'gridArea',
 })<{ gridArea: string }>(({ theme, gridArea }) => ({
-    padding: theme.spacing(4),
+    padding: theme.spacing(3, 4),
     gridArea,
 }));
 

frontend/src/component/personalDashboard/MyProjects.tsx

@@ -9,7 +9,7 @@ import {
 } from '@mui/material';
 import { Badge } from '../common/Badge/Badge';
 import { ProjectIcon } from '../common/ProjectIcon/ProjectIcon';
-import LinkIcon from '@mui/icons-material/Link';
+import LinkIcon from '@mui/icons-material/ArrowForward';
 import { ProjectSetupComplete } from './ProjectSetupComplete';
 import { ConnectSDK, CreateFlag, ExistingFlag } from './ConnectSDK';
 import { LatestProjectEvents } from './LatestProjectEvents';
@@ -26,6 +26,7 @@ import {
     ListItemBox,
     listItemStyle,
     ProjectGrid,
+    GridItem,
     SpacedGridItem,
 } from './Grid';
 
@@ -82,10 +83,10 @@ export const MyProjects: FC<{
     return (
         <ContentGridContainer>
             <ProjectGrid>
-                <SpacedGridItem gridArea='title'>
+                <GridItem gridArea='title'>
                     <Typography variant='h3'>My projects</Typography>
-                </SpacedGridItem>
-                <SpacedGridItem
+                </GridItem>
+                <GridItem
                     gridArea='onboarding'
                     sx={{
                         display: 'flex',
@@ -95,7 +96,7 @@ export const MyProjects: FC<{
                     {setupIncomplete ? (
                         <Badge color='warning'>Setup incomplete</Badge>
                     ) : null}
-                </SpacedGridItem>
+                </GridItem>
                 <SpacedGridItem gridArea='projects'>
                     <List
                         disablePadding={true}
@@ -172,7 +173,7 @@ export const MyProjects: FC<{
                     ) : null}
                 </SpacedGridItem>
                 <EmptyGridItem />
-                <SpacedGridItem gridArea='owners'>
+                <GridItem gridArea='owners'>
                     {personalDashboardProjectDetails ? (
                         <RoleAndOwnerInfo
                             roles={personalDashboardProjectDetails.roles.map(
@@ -181,7 +182,7 @@ export const MyProjects: FC<{
                             owners={personalDashboardProjectDetails.owners}
                         />
                     ) : null}
-                </SpacedGridItem>
+                </GridItem>
             </ProjectGrid>
         </ContentGridContainer>
     );

frontend/src/component/personalDashboard/PersonalDashboard.tsx

@@ -9,7 +9,7 @@ import {
     Typography,
 } from '@mui/material';
 import React, { type FC, useEffect, useState } from 'react';
-import LinkIcon from '@mui/icons-material/Link';
+import LinkIcon from '@mui/icons-material/ArrowForward';
 import { WelcomeDialog } from './WelcomeDialog';
 import { useLocalStorageState } from 'hooks/useLocalStorageState';
 import { usePersonalDashboard } from 'hooks/api/getters/usePersonalDashboard/usePersonalDashboard';
@@ -28,6 +28,7 @@ import {
     FlagGrid,
     ListItemBox,
     listItemStyle,
+    GridItem,
     SpacedGridItem,
 } from './Grid';
 import { ContentGridNoProjects } from './ContentGridNoProjects';
@@ -183,10 +184,13 @@ export const PersonalDashboard = () => {
 
             <ContentGridContainer>
                 <FlagGrid sx={{ mt: 2 }}>
-                    <SpacedGridItem gridArea='title'>
+                    <GridItem
+                        gridArea='title'
+                        sx={{ display: 'flex', alignItems: 'center' }}
+                    >
                         <Typography variant='h3'>My feature flags</Typography>
-                    </SpacedGridItem>
-                    <SpacedGridItem
+                    </GridItem>
+                    <GridItem
                         gridArea='lifecycle'
                         sx={{ display: 'flex', justifyContent: 'flex-end' }}
                     >
@@ -197,7 +201,7 @@ export const PersonalDashboard = () => {
                                 onArchive={refetchDashboard}
                             />
                         ) : null}
-                    </SpacedGridItem>
+                    </GridItem>
                     <SpacedGridItem gridArea='flags'>
                         {personalDashboard &&
                         personalDashboard.flags.length > 0 ? (

frontend/src/component/personalDashboard/ProjectSetupComplete.tsx

@@ -11,7 +11,6 @@ const TitleContainer = styled('div')(({ theme }) => ({
     flexDirection: 'row',
     gap: theme.spacing(2),
     alignItems: 'center',
-    justifyContent: 'center',
 }));
 
 const Health = styled('div')(({ theme }) => ({
@@ -30,7 +29,11 @@ const ActionBox = styled('article')(({ theme }) => ({
 }));
 
 const PercentageScore = styled('span')(({ theme }) => ({
-    color: theme.palette.primary.main,
+    fontWeight: theme.typography.fontWeightBold,
+}));
+
+const ProjectInsight = styled('h3')(({ theme }) => ({
+    margin: 0,
 }));
 
 const ConnectedSdkProject: FC<{ project: string }> = ({ project }) => {
@@ -135,7 +138,7 @@ export const ProjectSetupComplete: FC<{
         <ActionBox>
             <TitleContainer>
                 <Lightbulb color='primary' />
-                <h3>Project Insight</h3>
+                <ProjectInsight>Project Insight</ProjectInsight>
             </TitleContainer>
 
             <Health>