diff --git a/frontend/src/component/executiveDashboard/ExecutiveDashboard.tsx b/frontend/src/component/executiveDashboard/ExecutiveDashboard.tsx index 407ccf5805f..e9f924bec1b 100644 --- a/frontend/src/component/executiveDashboard/ExecutiveDashboard.tsx +++ b/frontend/src/component/executiveDashboard/ExecutiveDashboard.tsx @@ -1,4 +1,4 @@ -import { VFC } from 'react'; +import { useState, VFC } from 'react'; import { Box, styled } from '@mui/material'; import { ArrayParam, withDefault } from 'use-query-params'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; @@ -45,7 +45,19 @@ const ChartWidget = styled(Widget)(({ theme }) => ({ }, })); +const StickyWrapper = styled(Box)<{ scrolled?: boolean }>( + ({ theme, scrolled }) => ({ + position: 'sticky', + top: 0, + zIndex: 1000, + padding: scrolled ? theme.spacing(2, 0) : theme.spacing(0, 0, 2), + background: theme.palette.background.application, + transition: 'padding 0.3s ease', + }), +); + export const ExecutiveDashboard: VFC = () => { + const [scrolled, setScrolled] = useState(false); const { executiveDashboardData, loading, error } = useExecutiveDashboard(); const stateConfig = { projects: withDefault(ArrayParam, [allOption.id]), @@ -72,9 +84,21 @@ export const ExecutiveDashboard: VFC = () => { const summary = useFilteredFlagsSummary(projectsData); const isOneProjectSelected = projects.length === 1; + const handleScroll = () => { + if (!scrolled && window.scrollY > 0) { + setScrolled(true); + } else if (scrolled && window.scrollY === 0) { + setScrolled(false); + } + }; + + if (typeof window !== 'undefined') { + window.addEventListener('scroll', handleScroll); + } + return ( <> - ({ paddingBottom: theme.spacing(4) })}> + { /> } /> - + ({ padding: theme.spacing(3), @@ -29,7 +30,11 @@ export const Widget: FC<{ {title} } + show={ + + + + } /> {children} diff --git a/frontend/src/component/executiveDashboard/componentsStat/HealthStats/HealthStats.tsx b/frontend/src/component/executiveDashboard/componentsStat/HealthStats/HealthStats.tsx index c2f7b5a6726..d6c35f11f97 100644 --- a/frontend/src/component/executiveDashboard/componentsStat/HealthStats/HealthStats.tsx +++ b/frontend/src/component/executiveDashboard/componentsStat/HealthStats/HealthStats.tsx @@ -73,7 +73,7 @@ export const HealthStats: VFC = ({ x={206} y={72} fill={theme.palette.charts.health.text} - fontSize={12} + fontSize={13} textAnchor='middle' > Healthy @@ -100,7 +100,7 @@ export const HealthStats: VFC = ({ x={53} y={81} fill={theme.palette.charts.health.text} - fontSize={12} + fontSize={13} textAnchor='middle' > Stale @@ -127,7 +127,7 @@ export const HealthStats: VFC = ({ x={144} y={232} fill={theme.palette.charts.health.text} - fontSize={12} + fontSize={13} textAnchor='middle' > diff --git a/frontend/src/themes/theme.ts b/frontend/src/themes/theme.ts index 94c70a1f218..280be06356d 100644 --- a/frontend/src/themes/theme.ts +++ b/frontend/src/themes/theme.ts @@ -283,7 +283,7 @@ export const theme = { title: colors.grey[50], healthy: colors.purple[800], stale: colors.red[800], - potentiallyStale: colors.orange[800], + potentiallyStale: colors.orange[900], gradientStale: colors.red[300], gradientPotentiallyStale: colors.orange[500], },