fix: dashboard layout (#6063)

Align widgets properly on main screen. Responsive view in next PRs
Unleash · Jan 30, 2024 · 46fb40c · 46fb40c
1 parent 9d2c65c
commit 46fb40c
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 68 deletions.
diff --git 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 = () => {
             </Box>
             <StyledGrid>
                 <UserStats />
-                <FlagStats />
                 <UsersChart
                     userTrends={executiveDashboardData?.userTrends ?? []}
                 />
-                <Paper>Stats</Paper>
+                <FlagStats />
                 <FlagsChart
                     flagsTrends={executiveDashboardData?.flagsTrends ?? []}
                 />

diff --git 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<IFlagsChartComponentProps> = ({
 
     return (
         <Paper sx={(theme) => ({ padding: theme.spacing(4) })}>
+            <Typography
+                variant='h3'
+                sx={(theme) => ({ marginBottom: theme.spacing(3) })}
+            >
+                Number of flags
+            </Typography>
             <Line options={options} data={data} />
         </Paper>
     );

diff --git 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 (
-        <>
-            <Box sx={{ display: 'flex', flexDirection: 'column' }}>
-                <StyledContent>
-                    <StyledHeader variant='h1'>Total users</StyledHeader>
-                    <StyledUserContainer>
-                        <StyledUserBox>
-                            <StyledUserCount variant='h2'>9999</StyledUserCount>
-                        </StyledUserBox>
-                        <StyledCustomShadow />
-                    </StyledUserContainer>
-
-                    <StyledUserDistributionContainer>
-                        <UserDistribution />
-                    </StyledUserDistributionContainer>
-
-                    <StyledDistInfoContainer>
-                        <UserDistributionInfo
-                            type='active'
-                            percentage='70'
-                            count='9999'
-                        />
-                        <UserDistributionInfo
-                            type='inactive'
-                            percentage='30'
-                            count='9999'
-                        />
-                    </StyledDistInfoContainer>
-
-                    <StyledLinkContainer>
-                        <StyledLink to='/admin/users'>
-                            View users <ChevronRight />
-                        </StyledLink>
-                    </StyledLinkContainer>
-                </StyledContent>
-            </Box>
-        </>
+        <StyledContent>
+            <StyledHeader variant='h1'>Total users</StyledHeader>
+            <StyledUserContainer>
+                <StyledUserBox>
+                    <StyledUserCount variant='h2'>9999</StyledUserCount>
+                </StyledUserBox>
+                <StyledCustomShadow />
+            </StyledUserContainer>
+
+            <StyledUserDistributionContainer>
+                <UserDistribution />
+            </StyledUserDistributionContainer>
+
+            <StyledDistInfoContainer>
+                <UserDistributionInfo
+                    type='active'
+                    percentage='70'
+                    count='9999'
+                />
+                <UserDistributionInfo
+                    type='inactive'
+                    percentage='30'
+                    count='9999'
+                />
+            </StyledDistInfoContainer>
+
+            <StyledLinkContainer>
+                <StyledLink to='/admin/users'>
+                    View users <ChevronRight />
+                </StyledLink>
+            </StyledLinkContainer>
+        </StyledContent>
     );
 };
 
@@ -204,20 +200,18 @@ const UserDistributionInfo: React.FC<IUserDistributionInfoProps> = ({
 }) => {
     return (
         <StyledUserDistContainer>
-            <Box sx={{ display: 'flex' }}>
-                <StyledUserDistIndicator type={type} />
-                <StyledDistInfoInnerContainer>
-                    <StyledDistInfoTextContainer>
-                        <Typography variant='body1'>
-                            {type === 'active' ? 'Active' : 'Inactive'} users
-                        </Typography>
-                        <Typography variant='body2'>{percentage}%</Typography>
-                    </StyledDistInfoTextContainer>
-                    <StyledCountTypography variant='h2'>
-                        {count}
-                    </StyledCountTypography>
-                </StyledDistInfoInnerContainer>
-            </Box>
+            <StyledUserDistIndicator type={type} />
+            <StyledDistInfoInnerContainer>
+                <StyledDistInfoTextContainer>
+                    <Typography variant='body1'>
+                        {type === 'active' ? 'Active' : 'Inactive'} users
+                    </Typography>
+                    <Typography variant='body2'>{percentage}%</Typography>
+                </StyledDistInfoTextContainer>
+                <StyledCountTypography variant='h2'>
+                    {count}
+                </StyledCountTypography>
+            </StyledDistInfoInnerContainer>
         </StyledUserDistContainer>
     );
 };