diff --git a/frontend/src/component/executiveDashboard/ExecutiveDashboard.tsx b/frontend/src/component/executiveDashboard/ExecutiveDashboard.tsx index 8d88dcb324..d3527b1cf7 100644 --- a/frontend/src/component/executiveDashboard/ExecutiveDashboard.tsx +++ b/frontend/src/component/executiveDashboard/ExecutiveDashboard.tsx @@ -11,7 +11,7 @@ const StyledGrid = styled(Box)(({ theme }) => ({ display: 'grid', gridTemplateColumns: `300px 1fr`, // TODO: responsive grid size - gridAutoRows: '1fr', + gridAutoRows: 'auto', gap: theme.spacing(2), })); @@ -31,11 +31,10 @@ export const ExecutiveDashboard: VFC = () => { - - Stats + diff --git a/frontend/src/component/executiveDashboard/FlagsChart/FlagsChartComponent.tsx b/frontend/src/component/executiveDashboard/FlagsChart/FlagsChartComponent.tsx index 6dc058366a..25e0e05adb 100644 --- a/frontend/src/component/executiveDashboard/FlagsChart/FlagsChartComponent.tsx +++ b/frontend/src/component/executiveDashboard/FlagsChart/FlagsChartComponent.tsx @@ -12,7 +12,7 @@ import { } from 'chart.js'; import { Line } from 'react-chartjs-2'; import 'chartjs-adapter-date-fns'; -import { Paper, Theme, useTheme } from '@mui/material'; +import { Paper, Theme, Typography, useTheme } from '@mui/material'; import { useLocationSettings, type ILocationSettings, @@ -54,20 +54,6 @@ const createOptions = (theme: Theme, locationSettings: ILocationSettings) => ({ responsive: true, plugins: { - title: { - text: 'Number of flags', - position: 'top', - align: 'start', - display: true, - font: { - size: 16, - weight: '400', - }, - padding: { - bottom: 24, - }, - color: theme.palette.text.primary, - }, legend: { position: 'bottom', }, @@ -132,6 +118,12 @@ const FlagsChartComponent: VFC = ({ return ( ({ padding: theme.spacing(4) })}> + ({ marginBottom: theme.spacing(3) })} + > + Number of flags + ); diff --git a/frontend/src/component/executiveDashboard/UserStats/UserStats.tsx b/frontend/src/component/executiveDashboard/UserStats/UserStats.tsx index f959996e83..0f13f64b06 100644 --- a/frontend/src/component/executiveDashboard/UserStats/UserStats.tsx +++ b/frontend/src/component/executiveDashboard/UserStats/UserStats.tsx @@ -75,42 +75,38 @@ const StyledLink = styled(Link)({ export const UserStats = () => { return ( - <> - - - Total users - - - 9999 - - - + + Total users + + + 9999 + + + - - - + + + - - - - + + + + - - - View users - - - - - + + + View users + + + ); }; @@ -204,20 +200,18 @@ const UserDistributionInfo: React.FC = ({ }) => { return ( - - - - - - {type === 'active' ? 'Active' : 'Inactive'} users - - {percentage}% - - - {count} - - - + + + + + {type === 'active' ? 'Active' : 'Inactive'} users + + {percentage}% + + + {count} + + ); };