diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FlagExposure.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FlagExposure.tsx index 7c1283b7f7..e02f419221 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FlagExposure.tsx +++ b/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 ( diff --git a/frontend/src/component/personalDashboard/ContentGridNoProjects.tsx b/frontend/src/component/personalDashboard/ContentGridNoProjects.tsx index f1454f5901..4a1f68c605 100644 --- a/frontend/src/component/personalDashboard/ContentGridNoProjects.tsx +++ b/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 = ({ owners, admins }) => { return ( - + My projects - - + + Potential next steps - - + + You don't currently have access to any projects in @@ -91,8 +91,8 @@ export const ContentGridNoProjects: React.FC = ({ owners, admins }) => { projects in the system and ask the owner for access. - - + + 1 @@ -133,8 +133,8 @@ export const ContentGridNoProjects: React.FC = ({ owners, admins }) => { )} - - + + 2 @@ -157,7 +157,7 @@ export const ContentGridNoProjects: React.FC = ({ owners, admins }) => { )} - + diff --git a/frontend/src/component/personalDashboard/Grid.tsx b/frontend/src/component/personalDashboard/Grid.tsx index 3173af1bf7..f10b033ca3 100644 --- a/frontend/src/component/personalDashboard/Grid.tsx +++ b/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, })); diff --git a/frontend/src/component/personalDashboard/MyProjects.tsx b/frontend/src/component/personalDashboard/MyProjects.tsx index f47e50b8a6..614342837c 100644 --- a/frontend/src/component/personalDashboard/MyProjects.tsx +++ b/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 ( - + My projects - - + Setup incomplete ) : null} - + - + {personalDashboardProjectDetails ? ( ) : null} - + ); diff --git a/frontend/src/component/personalDashboard/PersonalDashboard.tsx b/frontend/src/component/personalDashboard/PersonalDashboard.tsx index 607bb58691..a6e66ab81f 100644 --- a/frontend/src/component/personalDashboard/PersonalDashboard.tsx +++ b/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 = () => { - + My feature flags - - + @@ -197,7 +201,7 @@ export const PersonalDashboard = () => { onArchive={refetchDashboard} /> ) : null} - + {personalDashboard && personalDashboard.flags.length > 0 ? ( diff --git a/frontend/src/component/personalDashboard/ProjectSetupComplete.tsx b/frontend/src/component/personalDashboard/ProjectSetupComplete.tsx index b46cc9cfcd..8a6be4d960 100644 --- a/frontend/src/component/personalDashboard/ProjectSetupComplete.tsx +++ b/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<{ -

Project Insight

+ Project Insight