From 05efc6b244976dc70cc41eb3d4a8a95799637c06 Mon Sep 17 00:00:00 2001 From: Healsi Date: Thu, 22 Jan 2026 12:39:25 +0100 Subject: [PATCH] UI tweaks: Navigation sidebar improvements and layout refinements (#11242) This PR includes various UI improvements and refinements. All changes focus on improving the visual consistency and layout of the navigation sidebar and related UI components. Navigation sidebar layout is restructured to remain sticky while the page scrolls image Footer is moved to under the main content and not the menu, to allow for a fixed menu while scrolling image Moved change request banner to only overlay the content and not the navigation. image Changed headers on impact metric cards to improve typographic hierarchy image Header on "Strategy types" is made consistent with other page headers image Release template card titles are set to bold for typographic consistency image --------- Co-authored-by: Henning Sillerud --- .../VerticalTabs/VerticalTab/VerticalTab.tsx | 2 +- .../component/impact-metrics/ChartItem.tsx | 2 +- .../impact-metrics/PlausibleChartItem.tsx | 2 +- .../MainLayout/AdminMenu/AdminListItem.tsx | 21 +- .../AdminMenu/AdminNavigationItems.tsx | 14 +- .../layout/MainLayout/MainLayout.tsx | 107 +- .../NavigationSidebar/NavigationList.tsx | 20 +- .../NavigationSidebar/NavigationSidebar.tsx | 220 +- frontend/src/component/menu/Footer/Footer.tsx | 650 +++--- .../Footer/__snapshots__/Footer.test.tsx.snap | 1796 +++++++++-------- .../personalDashboard/SharedComponents.tsx | 2 +- .../ReleasePlanTemplateCard.tsx | 1 - .../StrategiesList/StrategiesList.tsx | 32 +- 13 files changed, 1498 insertions(+), 1371 deletions(-) diff --git a/frontend/src/component/common/VerticalTabs/VerticalTab/VerticalTab.tsx b/frontend/src/component/common/VerticalTabs/VerticalTab/VerticalTab.tsx index 6ac27e89d3..934c584449 100644 --- a/frontend/src/component/common/VerticalTabs/VerticalTab/VerticalTab.tsx +++ b/frontend/src/component/common/VerticalTabs/VerticalTab/VerticalTab.tsx @@ -20,7 +20,7 @@ const StyledTab = styled(Button)<{ selected: boolean }>( textAlign: 'left', padding: theme.spacing(0, 2), gap: theme.spacing(1), - fontSize: theme.fontSizes.bodySize, + fontSize: theme.typography.body2.fontSize, fontWeight: selected ? theme.fontWeight.bold : theme.fontWeight.medium, diff --git a/frontend/src/component/impact-metrics/ChartItem.tsx b/frontend/src/component/impact-metrics/ChartItem.tsx index 5e45f15748..8cb998af11 100644 --- a/frontend/src/component/impact-metrics/ChartItem.tsx +++ b/frontend/src/component/impact-metrics/ChartItem.tsx @@ -108,7 +108,7 @@ export const ChartItem: FC = ({ {config.mode === 'read' ? : null} {config.title && ( - {config.title} + {config.title} )} {getConfigDescription(config)} diff --git a/frontend/src/component/impact-metrics/PlausibleChartItem.tsx b/frontend/src/component/impact-metrics/PlausibleChartItem.tsx index 1c1ffa5325..2361cbe9e8 100644 --- a/frontend/src/component/impact-metrics/PlausibleChartItem.tsx +++ b/frontend/src/component/impact-metrics/PlausibleChartItem.tsx @@ -49,7 +49,7 @@ export const PlausibleChartItem: FC = () => ( - Plausible Analytics + Plausible Analytics Favorite events from Plausible analytics diff --git a/frontend/src/component/layout/MainLayout/AdminMenu/AdminListItem.tsx b/frontend/src/component/layout/MainLayout/AdminMenu/AdminListItem.tsx index ae2e53c81d..7383ddda4b 100644 --- a/frontend/src/component/layout/MainLayout/AdminMenu/AdminListItem.tsx +++ b/frontend/src/component/layout/MainLayout/AdminMenu/AdminListItem.tsx @@ -65,12 +65,19 @@ const subListItemButtonStyle = (theme: Theme) => ({ }, }); -const CappedText = styled(Typography)(({ theme }) => ({ +const CappedText = styled(Typography, { + shouldForwardProp: (prop) => prop !== 'bold', +})<{ + bold?: boolean; +}>(({ theme, bold }) => ({ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', width: '100%', - paddingTop: theme.spacing(0.25), + fontWeight: bold + ? theme.typography.fontWeightBold + : theme.typography.fontWeightMedium, + fontSize: theme.typography.body2.fontSize, })); const StyledListItemIcon = styled(ListItemIcon)(({ theme }) => ({ @@ -138,11 +145,7 @@ export const MenuGroup = ({ {isActiveMenu ? activeIcon : icon} - - {title} - + {title} {children} @@ -170,7 +173,7 @@ export const AdminListItem: FC<{ > {children} - {text} + {text} {badge} @@ -198,7 +201,7 @@ export const AdminSubListItem: FC<{ > {children} - {text} + {text} {badge} diff --git a/frontend/src/component/layout/MainLayout/AdminMenu/AdminNavigationItems.tsx b/frontend/src/component/layout/MainLayout/AdminMenu/AdminNavigationItems.tsx index 219104fd19..3076a7d888 100644 --- a/frontend/src/component/layout/MainLayout/AdminMenu/AdminNavigationItems.tsx +++ b/frontend/src/component/layout/MainLayout/AdminMenu/AdminNavigationItems.tsx @@ -46,14 +46,20 @@ const SettingsHeader = styled(Typography)(({ theme }) => ({ fontWeight: theme.fontWeight.bold, })); -const CappedText = styled(Typography)(({ theme }) => ({ +const CappedText = styled(Typography, { + shouldForwardProp: (prop) => prop !== 'bold', +})<{ + bold?: boolean; +}>(({ theme, bold }) => ({ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', width: '100%', - paddingTop: theme.spacing(0.25), marginLeft: theme.spacing(0.75), - fontWeight: theme.typography.fontWeightBold, + fontWeight: bold + ? theme.typography.fontWeightBold + : theme.typography.fontWeightMedium, + fontSize: theme.typography.body2.fontSize, })); const StyledListItemText = styled(ListItemText)(({ theme }) => ({ @@ -107,7 +113,7 @@ export const DashboardLink = ({ onClick }: { onClick: () => void }) => { > - Back to Unleash + Back to Unleash diff --git a/frontend/src/component/layout/MainLayout/MainLayout.tsx b/frontend/src/component/layout/MainLayout/MainLayout.tsx index dbb678732a..b2edde6943 100644 --- a/frontend/src/component/layout/MainLayout/MainLayout.tsx +++ b/frontend/src/component/layout/MainLayout/MainLayout.tsx @@ -25,8 +25,6 @@ interface IMainLayoutProps { } const MainLayoutContainer = styled(Grid)(() => ({ - height: '100%', - justifyContent: 'space-between', display: 'flex', flexDirection: 'column', flexGrow: 1, @@ -58,7 +56,6 @@ const MainLayoutContent = styled(Grid)(({ theme }) => ({ [theme.breakpoints.down('sm')]: { minWidth: '100%', }, - minHeight: '94vh', })); const MainLayoutContentWrapper = styled('div')(({ theme }) => ({ @@ -67,6 +64,8 @@ const MainLayoutContentWrapper = styled('div')(({ theme }) => ({ width: '100%', backgroundColor: theme.palette.background.application, position: 'relative', + display: 'flex', + flexDirection: 'column', })); const StyledImg = styled('img')(() => ({ @@ -77,10 +76,10 @@ const StyledImg = styled('img')(() => ({ width: 400, pointerEvents: 'none', userSelect: 'none', + zIndex: 0, })); const MainLayoutContentContainer = styled('main')(({ theme }) => ({ - height: '100%', padding: theme.spacing(0, 0, 6.5, 0), position: 'relative', [theme.breakpoints.down('md')]: { @@ -89,6 +88,38 @@ const MainLayoutContentContainer = styled('main')(({ theme }) => ({ zIndex: 200, })); +const LayoutFlexContainer = styled(Box)(() => ({ + display: 'flex', + marginTop: 0, +})); + +const MainContentWrapper = styled(Box)(() => ({ + display: 'flex', + flexDirection: 'column', + flexGrow: 1, + minWidth: 0, +})); + +const HeaderContentContainer = styled(Box)(() => ({ + display: 'flex', + flexDirection: 'column', + minHeight: '100vh', + flexShrink: 0, +})); + +const ContentFlexContainer = styled(Box)(() => ({ + flex: 1, + display: 'flex', + flexDirection: 'column', + minHeight: 0, +})); + +const StyledMainLayoutContent = styled(MainLayoutContent)(() => ({ + display: 'flex', + flexDirection: 'column', + flex: 1, +})); + export const MainLayout = forwardRef( ({ children }, ref) => { const { uiConfig } = useUiConfig(); @@ -105,20 +136,7 @@ export const MainLayout = forwardRef( - } - /> - - ({ - display: 'flex', - mt: 0, - })} - > + ( } /> - -
+ + + } + /> + +
- - - - - - {children} - - - - + + + + + + + {children} + + + + + +