#2811 fixed progress bar styling

Northeastern-Electric-Racing · Dec 20, 2024 · 9b683ea · 9b683ea
1 parent 6825143
commit 9b683ea
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 27 deletions.
diff --git a/src/frontend/src/components/OnboardingProgressBar.tsx b/src/frontend/src/components/OnboardingProgressBar.tsx
@@ -1,34 +1,40 @@
-import { Box, LinearProgress, linearProgressClasses, styled, Typography } from '@mui/material';
+import { Box, LinearProgress, linearProgressClasses, styled, SxProps, Typography } from '@mui/material';
 
 interface ProgressBarWithValueProps {
   value: number;
+  text?: string;
+  typographySx?: SxProps;
+  progressBarSx?: SxProps;
 }
 
-const StyledProgressBar = styled(LinearProgress)(({ theme }) => ({
-  height: 20,
-  borderRadius: 5,
+const StyledProgressBar = styled(LinearProgress)(() => ({
+  height: '2.5vh',
+  borderRadius: 15,
+  border: '1px solid white',
   [`&.${linearProgressClasses.colorPrimary}`]: {
-    backgroundColor: theme.palette.grey[theme.palette.mode === 'light' ? 200 : 800]
+    backgroundColor: 'transparent'
   },
   [`& .${linearProgressClasses.bar}`]: {
     borderRadius: 5,
     backgroundColor: '#ef4345'
   }
 }));
 
-const OnboardingProgressBar: React.FC<ProgressBarWithValueProps> = ({ value }) => {
+const OnboardingProgressBar: React.FC<ProgressBarWithValueProps> = ({ value, text, typographySx, progressBarSx }) => {
   return (
     <Box position="relative" display="flex" alignItems="center" width="100%">
-      <StyledProgressBar variant="determinate" value={value} style={{ flexGrow: 1 }} />
+      <StyledProgressBar variant="determinate" value={value} style={{ flexGrow: 1 }} sx={progressBarSx} />
       <Typography
         variant="caption"
         sx={{
-          marginLeft: 1,
+          position: 'absolute',
+          left: '10px',
           fontWeight: 'bold',
-          color: 'text.primary'
+          color: value > 50 ? 'white' : 'text.primary',
+          ...typographySx
         }}
       >
-        {`${Math.round(value)}%`}
+        {`${Math.round(value)}% ${text}`}
       </Typography>
     </Box>
   );

diff --git a/src/frontend/src/pages/HomePage/OnboardingHomePage.tsx b/src/frontend/src/pages/HomePage/OnboardingHomePage.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { Box, Grid, Typography } from '@mui/material';
+import { Box, Grid, Typography, useTheme } from '@mui/material';
 import PageLayout from '../../components/PageLayout';
 import { useCurrentOrganization } from '../../hooks/organizations.hooks';
 import LoadingIndicator from '../../components/LoadingIndicator';
@@ -13,6 +13,7 @@ import { NERButton } from '../../components/NERButton';
 const OnboardingHomePage = () => {
   const { data: organization, isError, error, isLoading } = useCurrentOrganization();
   const { setCurrentHomePage } = useHomePageContext();
+  const theme = useTheme();
 
   useEffect(() => {
     setCurrentHomePage('onboarding');
@@ -23,16 +24,11 @@ const OnboardingHomePage = () => {
 
   return (
     <PageLayout title="Home" hidePageTitle>
-      <Grid container display="flex" alignItems="center" marginLeft={2} marginTop={4}>
+      <Grid container display="flex" alignItems="center" justifyContent={'space-between'} padding={1} marginTop={4}>
         <Grid item xs={12} md={7}>
           <Typography sx={{ fontSize: '2.5em' }}>Welcome to the {organization.name} Team</Typography>
         </Grid>
-        <Grid item xs={12} md={5} sx={{ display: 'flex', justifyContent: 'flex-end' }}>
-          <NERButton variant="contained" disabled>
-            Finished?
-          </NERButton>{' '}
-          {/* Disabled button */}
-        </Grid>
+        <NERButton variant="contained">Finished?</NERButton>
       </Grid>
       <Grid
         container
@@ -43,11 +39,25 @@ const OnboardingHomePage = () => {
         }}
       >
         <Box display="flex" justifyContent="center">
-          <Box sx={{ width: '80%', mt: 4, ml: 2, display: 'flex', alignItems: 'center' }}>
-            <Typography sx={{ fontSize: '1.5em', flexShrink: 0, marginRight: 2 }}>Overall Progress</Typography>
-            <Box sx={{ flexGrow: 1 }}>
-              <OnboardingProgressBar value={50} />
-            </Box>
+          <Box
+            sx={{
+              backgroundColor: theme.palette.background.paper,
+              borderRadius: 5,
+              p: 3.5,
+              flexGrow: 1,
+              width: '100%',
+              mt: 5,
+              ml: 4,
+              display: 'flex',
+              alignItems: 'center'
+            }}
+          >
+            <OnboardingProgressBar
+              value={50}
+              text={'Complete'}
+              typographySx={{ fontSize: '1.2em', ml: 1 }}
+              progressBarSx={{ height: '3vh' }}
+            />
           </Box>
         </Box>
         <Grid container display="flex">

diff --git a/src/frontend/src/pages/HomePage/components/Checklist.tsx b/src/frontend/src/pages/HomePage/components/Checklist.tsx
@@ -21,11 +21,11 @@ const Checklist: React.FC<{ parentChecklists: ChecklistType[]; checklistName?: s
       <Grid container spacing={2}>
         <Grid item xs={12}>
           <Grid container justifyContent="space-between" alignItems="center">
-            <Grid container alignItems="center" gap={2} sx={{ flexGrow: 1 }}>
-              <Typography fontSize="2em" fontWeight="bold">
+            <Grid container alignItems="center" sx={{ flexGrow: 1 }}>
+              <Typography fontSize="2em" fontWeight="bold" sx={{ marginRight: 2 }}>
                 {checklistName ?? 'General'} Checklist
               </Typography>
-              <Box sx={{ flexGrow: 1 }}>
+              <Box sx={{ flexGrow: 1, mx: 2 }}>
                 <OnboardingProgressBar value={51} />
               </Box>
               <IconButton onClick={toggleShowTasks}>{showTasks ? <KeyboardArrowDown /> : <KeyboardArrowRight />}</IconButton>

diff --git a/src/frontend/src/pages/HomePage/components/OnboardingInfoSection.tsx b/src/frontend/src/pages/HomePage/components/OnboardingInfoSection.tsx
@@ -54,7 +54,7 @@ const OnboardingInfoSection: React.FC = () => {
                       backgroundColor: '#616161',
                       color: 'white',
                       borderRadius: '10px',
-                      height: '5vh',
+                      padding: 2.5,
                       '&:hover': { backgroundColor: '#ef4345' }
                     }}
                     href={link.url}