From edd0529fc847dc84f3182f476a53f9e0a6400995 Mon Sep 17 00:00:00 2001
From: harish <harivarada1@gmail.com>
Date: Thu, 19 Dec 2024 19:07:28 -0500
Subject: [PATCH 01/10] #2811 progress bar

---
 .../src/components/OnboardingProgressBar.tsx  | 37 +++++++++++++++++++
 .../src/pages/HomePage/OnboardingHomePage.tsx | 24 +++++++-----
 .../pages/HomePage/components/Checklist.tsx   | 27 ++++++++------
 3 files changed, 68 insertions(+), 20 deletions(-)
 create mode 100644 src/frontend/src/components/OnboardingProgressBar.tsx

diff --git a/src/frontend/src/components/OnboardingProgressBar.tsx b/src/frontend/src/components/OnboardingProgressBar.tsx
new file mode 100644
index 0000000000..289642b75f
--- /dev/null
+++ b/src/frontend/src/components/OnboardingProgressBar.tsx
@@ -0,0 +1,37 @@
+import { Box, LinearProgress, linearProgressClasses, styled, Typography } from '@mui/material';
+
+interface ProgressBarWithValueProps {
+  value: number;
+}
+
+const StyledProgressBar = styled(LinearProgress)(({ theme }) => ({
+  height: 10,
+  borderRadius: 5,
+  [`&.${linearProgressClasses.colorPrimary}`]: {
+    backgroundColor: theme.palette.grey[theme.palette.mode === 'light' ? 200 : 800]
+  },
+  [`& .${linearProgressClasses.bar}`]: {
+    borderRadius: 5,
+    backgroundColor: '#ef4345'
+  }
+}));
+
+const OnboardingProgressBar: React.FC<ProgressBarWithValueProps> = ({ value }) => {
+  return (
+    <Box position="relative" display="flex" alignItems="center" width="100%">
+      <StyledProgressBar variant="determinate" value={value} style={{ flexGrow: 1 }} />
+      <Typography
+        variant="caption"
+        sx={{
+          marginLeft: 1,
+          fontWeight: 'bold',
+          color: 'text.primary'
+        }}
+      >
+        {`${Math.round(value)}%`}
+      </Typography>
+    </Box>
+  );
+};
+
+export default OnboardingProgressBar;
diff --git a/src/frontend/src/pages/HomePage/OnboardingHomePage.tsx b/src/frontend/src/pages/HomePage/OnboardingHomePage.tsx
index b294cb178e..fff9f91e8f 100644
--- a/src/frontend/src/pages/HomePage/OnboardingHomePage.tsx
+++ b/src/frontend/src/pages/HomePage/OnboardingHomePage.tsx
@@ -1,12 +1,14 @@
-import { Box, Grid, Typography } from '@mui/material';
+import React, { useState, useEffect } from 'react';
+import { Box, Grid, Typography, Button } from '@mui/material';
 import PageLayout from '../../components/PageLayout';
 import { useCurrentOrganization } from '../../hooks/organizations.hooks';
-import { useEffect } from 'react';
 import LoadingIndicator from '../../components/LoadingIndicator';
 import ErrorPage from '../ErrorPage';
 import { useHomePageContext } from '../../app/HomePageContext';
 import ChecklistSection from './components/ChecklistSection';
 import OnboardingInfoSection from './components/OnboardingInfoSection';
+import OnboardingProgressBar from '../../components/OnboardingProgressBar';
+import { NERButton } from '../../components/NERButton';
 
 const OnboardingHomePage = () => {
   const { data: organization, isError, error, isLoading } = useCurrentOrganization();
@@ -21,13 +23,12 @@ const OnboardingHomePage = () => {
 
   return (
     <PageLayout title="Home" hidePageTitle>
-      <Grid container display={'flex'} alignItems={'center'} marginLeft={2} marginTop={4}>
+      <Grid container display="flex" alignItems="center" marginLeft={2} marginTop={4}>
         <Grid item xs={12} md={7}>
           <Typography sx={{ fontSize: '2.5em' }}>Welcome to the {organization.name} Team</Typography>
         </Grid>
-        {/* This will be replaced with the 'Finished' button*/}
         <Grid item xs={12} md={5} sx={{ display: 'flex', justifyContent: 'flex-end' }}>
-          <Typography sx={{ fontSize: '2em' }}>Finished</Typography>
+          <NERButton variant="contained">Finished?</NERButton>
         </Grid>
       </Grid>
       <Grid
@@ -38,11 +39,15 @@ const OnboardingHomePage = () => {
           flexDirection: 'column'
         }}
       >
-        <Box display={'flex'} justifyContent={'center'}>
-          {/* This will be replaced with the 'Progress Bar' component*/}
-          <Typography sx={{ fontSize: '2em', mt: 4, ml: 2 }}>Progress Bar</Typography>
+        <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>
         </Box>
-        <Grid container display={'flex'}>
+        <Grid container display="flex">
           <Grid
             item
             xs={12}
@@ -67,4 +72,5 @@ const OnboardingHomePage = () => {
     </PageLayout>
   );
 };
+
 export default OnboardingHomePage;
diff --git a/src/frontend/src/pages/HomePage/components/Checklist.tsx b/src/frontend/src/pages/HomePage/components/Checklist.tsx
index c6168222ec..baf3c893c2 100644
--- a/src/frontend/src/pages/HomePage/components/Checklist.tsx
+++ b/src/frontend/src/pages/HomePage/components/Checklist.tsx
@@ -3,6 +3,7 @@ import { Checklist as ChecklistType } from 'shared';
 import { Typography, Grid, Box, IconButton, useTheme } from '@mui/material';
 import { KeyboardArrowRight, KeyboardArrowDown } from '@mui/icons-material';
 import Task from './Task';
+import OnboardingProgressBar from '../../../components/OnboardingProgressBar';
 
 const Checklist: React.FC<{ parentChecklists: ChecklistType[]; checklistName?: string }> = ({
   parentChecklists,
@@ -16,19 +17,23 @@ const Checklist: React.FC<{ parentChecklists: ChecklistType[]; checklistName?: s
   };
 
   return (
-    <Box sx={{ backgroundColor: theme.palette.background.paper, borderRadius: 5 }}>
-      <Grid container>
-        <Grid item xs={12} padding={2.5}>
-          <Grid display="flex" alignItems="center" justifyContent="space-between">
+    <Box sx={{ backgroundColor: theme.palette.background.paper, borderRadius: 5, p: 2 }}>
+      <Grid container spacing={2}>
+        <Grid item xs={12}>
+          <Grid container justifyContent="space-between" alignItems="center">
             <Typography fontSize="2em" fontWeight="bold">
               {checklistName ?? 'General'} Checklist
             </Typography>
-            <Grid display="flex" alignItems="center" gap={2}>
-              <progress value={50} max={100} />
+            <Grid container alignItems="center" gap={2} sx={{ flexGrow: 1 }}>
+              <Box sx={{ flexGrow: 1 }}>
+                <OnboardingProgressBar value={50} />
+              </Box>
               <IconButton onClick={toggleShowTasks}>{showTasks ? <KeyboardArrowDown /> : <KeyboardArrowRight />}</IconButton>
             </Grid>
           </Grid>
-          {showTasks && (
+        </Grid>
+        {showTasks && (
+          <Grid item xs={12}>
             <Box
               sx={{
                 marginTop: 3,
@@ -38,12 +43,12 @@ const Checklist: React.FC<{ parentChecklists: ChecklistType[]; checklistName?: s
                 justifyContent: 'center'
               }}
             >
-              {parentChecklists.map((parentChecklist) => (
-                <Task subtasks={parentChecklist.subtasks} parentTask={parentChecklist} />
+              {parentChecklists.map((parentChecklist, index) => (
+                <Task key={index} subtasks={parentChecklist.subtasks} parentTask={parentChecklist} />
               ))}
             </Box>
-          )}
-        </Grid>
+          </Grid>
+        )}
       </Grid>
     </Box>
   );

From 8a0147457cc2c0c5e1d85a1dc722cbe588b214af Mon Sep 17 00:00:00 2001
From: harish <harivarada1@gmail.com>
Date: Thu, 19 Dec 2024 19:13:35 -0500
Subject: [PATCH 02/10] #2811 disabled button

---
 src/frontend/src/pages/HomePage/OnboardingHomePage.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/pages/HomePage/OnboardingHomePage.tsx b/src/frontend/src/pages/HomePage/OnboardingHomePage.tsx
index fff9f91e8f..7014419b37 100644
--- a/src/frontend/src/pages/HomePage/OnboardingHomePage.tsx
+++ b/src/frontend/src/pages/HomePage/OnboardingHomePage.tsx
@@ -1,5 +1,5 @@
-import React, { useState, useEffect } from 'react';
-import { Box, Grid, Typography, Button } from '@mui/material';
+import React, { useEffect } from 'react';
+import { Box, Grid, Typography } from '@mui/material';
 import PageLayout from '../../components/PageLayout';
 import { useCurrentOrganization } from '../../hooks/organizations.hooks';
 import LoadingIndicator from '../../components/LoadingIndicator';
@@ -28,7 +28,10 @@ const OnboardingHomePage = () => {
           <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">Finished?</NERButton>
+          <NERButton variant="contained" disabled>
+            Finished?
+          </NERButton>{' '}
+          {/* Disabled button */}
         </Grid>
       </Grid>
       <Grid

From cefa85ec7c422db11c948f003e3ec3e9b05b5983 Mon Sep 17 00:00:00 2001
From: harish <harivarada1@gmail.com>
Date: Fri, 20 Dec 2024 12:40:22 -0500
Subject: [PATCH 03/10] 2811 styling

---
 src/frontend/src/components/OnboardingProgressBar.tsx    | 2 +-
 src/frontend/src/pages/HomePage/components/Checklist.tsx | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/components/OnboardingProgressBar.tsx b/src/frontend/src/components/OnboardingProgressBar.tsx
index 289642b75f..9f196145f1 100644
--- a/src/frontend/src/components/OnboardingProgressBar.tsx
+++ b/src/frontend/src/components/OnboardingProgressBar.tsx
@@ -5,7 +5,7 @@ interface ProgressBarWithValueProps {
 }
 
 const StyledProgressBar = styled(LinearProgress)(({ theme }) => ({
-  height: 10,
+  height: 20,
   borderRadius: 5,
   [`&.${linearProgressClasses.colorPrimary}`]: {
     backgroundColor: theme.palette.grey[theme.palette.mode === 'light' ? 200 : 800]
diff --git a/src/frontend/src/pages/HomePage/components/Checklist.tsx b/src/frontend/src/pages/HomePage/components/Checklist.tsx
index baf3c893c2..f6d30c7a35 100644
--- a/src/frontend/src/pages/HomePage/components/Checklist.tsx
+++ b/src/frontend/src/pages/HomePage/components/Checklist.tsx
@@ -21,10 +21,10 @@ const Checklist: React.FC<{ parentChecklists: ChecklistType[]; checklistName?: s
       <Grid container spacing={2}>
         <Grid item xs={12}>
           <Grid container justifyContent="space-between" alignItems="center">
-            <Typography fontSize="2em" fontWeight="bold">
-              {checklistName ?? 'General'} Checklist
-            </Typography>
             <Grid container alignItems="center" gap={2} sx={{ flexGrow: 1 }}>
+              <Typography fontSize="2em" fontWeight="bold">
+                {checklistName ?? 'General'} Checklist
+              </Typography>
               <Box sx={{ flexGrow: 1 }}>
                 <OnboardingProgressBar value={50} />
               </Box>

From acbbb18eb960d93000fc42f7b2667935e6402a1a Mon Sep 17 00:00:00 2001
From: harish <harivarada1@gmail.com>
Date: Fri, 20 Dec 2024 12:43:56 -0500
Subject: [PATCH 04/10] #2811 merge conflicts

---
 src/frontend/src/pages/HomePage/components/Checklist.tsx | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/src/frontend/src/pages/HomePage/components/Checklist.tsx b/src/frontend/src/pages/HomePage/components/Checklist.tsx
index 853061454c..f6d30c7a35 100644
--- a/src/frontend/src/pages/HomePage/components/Checklist.tsx
+++ b/src/frontend/src/pages/HomePage/components/Checklist.tsx
@@ -28,15 +28,6 @@ const Checklist: React.FC<{ parentChecklists: ChecklistType[]; checklistName?: s
               <Box sx={{ flexGrow: 1 }}>
                 <OnboardingProgressBar value={50} />
               </Box>
-    <Box sx={{ backgroundColor: theme.palette.background.paper, borderRadius: 5 }}>
-      <Grid container>
-        <Grid item xs={12} padding={2.5}>
-          <Grid display="flex" alignItems="center" justifyContent="space-between">
-            <Typography fontSize="2em" fontWeight="bold">
-              {checklistName} Checklist
-            </Typography>
-            <Grid display="flex" alignItems="center" gap={2}>
-              <progress value={50} max={100} />
               <IconButton onClick={toggleShowTasks}>{showTasks ? <KeyboardArrowDown /> : <KeyboardArrowRight />}</IconButton>
             </Grid>
           </Grid>

From 68251431a1a7752aaac388c38255f9e52b475f81 Mon Sep 17 00:00:00 2001
From: harish <harivarada1@gmail.com>
Date: Fri, 20 Dec 2024 13:01:07 -0500
Subject: [PATCH 05/10] #2811 random commit

---
 src/frontend/src/pages/HomePage/components/Checklist.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/src/pages/HomePage/components/Checklist.tsx b/src/frontend/src/pages/HomePage/components/Checklist.tsx
index f6d30c7a35..e1451fa7e7 100644
--- a/src/frontend/src/pages/HomePage/components/Checklist.tsx
+++ b/src/frontend/src/pages/HomePage/components/Checklist.tsx
@@ -26,7 +26,7 @@ const Checklist: React.FC<{ parentChecklists: ChecklistType[]; checklistName?: s
                 {checklistName ?? 'General'} Checklist
               </Typography>
               <Box sx={{ flexGrow: 1 }}>
-                <OnboardingProgressBar value={50} />
+                <OnboardingProgressBar value={51} />
               </Box>
               <IconButton onClick={toggleShowTasks}>{showTasks ? <KeyboardArrowDown /> : <KeyboardArrowRight />}</IconButton>
             </Grid>

From 9b683eaec0bc0469f7d1ca26b2dab6dd0bf226bf Mon Sep 17 00:00:00 2001
From: aaryan1203 <aaryanjain1203@gmail.com>
Date: Fri, 20 Dec 2024 13:59:00 -0500
Subject: [PATCH 06/10] #2811 fixed progress bar styling

---
 .../src/components/OnboardingProgressBar.tsx  | 26 ++++++++------
 .../src/pages/HomePage/OnboardingHomePage.tsx | 36 ++++++++++++-------
 .../pages/HomePage/components/Checklist.tsx   |  6 ++--
 .../components/OnboardingInfoSection.tsx      |  2 +-
 4 files changed, 43 insertions(+), 27 deletions(-)

diff --git a/src/frontend/src/components/OnboardingProgressBar.tsx b/src/frontend/src/components/OnboardingProgressBar.tsx
index 9f196145f1..174f5fca50 100644
--- a/src/frontend/src/components/OnboardingProgressBar.tsx
+++ b/src/frontend/src/components/OnboardingProgressBar.tsx
@@ -1,14 +1,18 @@
-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,
@@ -16,19 +20,21 @@ const StyledProgressBar = styled(LinearProgress)(({ theme }) => ({
   }
 }));
 
-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
index 7014419b37..7bdbb46382 100644
--- 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
index e1451fa7e7..7b06e40cb7 100644
--- 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
index 35ab7efc70..e0c8a8c71c 100644
--- 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}

From 41ef6c83f92e462aa96a9a1aea59b1f74c5f0650 Mon Sep 17 00:00:00 2001
From: aaryan1203 <aaryanjain1203@gmail.com>
Date: Fri, 20 Dec 2024 14:02:16 -0500
Subject: [PATCH 07/10] #2811 styling

---
 src/frontend/src/components/OnboardingProgressBar.tsx  | 3 ++-
 src/frontend/src/pages/HomePage/OnboardingHomePage.tsx | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/components/OnboardingProgressBar.tsx b/src/frontend/src/components/OnboardingProgressBar.tsx
index 174f5fca50..7c8ea927fe 100644
--- a/src/frontend/src/components/OnboardingProgressBar.tsx
+++ b/src/frontend/src/components/OnboardingProgressBar.tsx
@@ -27,6 +27,7 @@ const OnboardingProgressBar: React.FC<ProgressBarWithValueProps> = ({ value, tex
       <Typography
         variant="caption"
         sx={{
+          ml: 1,
           position: 'absolute',
           left: '10px',
           fontWeight: 'bold',
@@ -34,7 +35,7 @@ const OnboardingProgressBar: React.FC<ProgressBarWithValueProps> = ({ value, tex
           ...typographySx
         }}
       >
-        {`${Math.round(value)}% ${text}`}
+        {`${Math.round(value)}% ${text ? text : ''}`}
       </Typography>
     </Box>
   );
diff --git a/src/frontend/src/pages/HomePage/OnboardingHomePage.tsx b/src/frontend/src/pages/HomePage/OnboardingHomePage.tsx
index 7bdbb46382..a9e8dd006d 100644
--- a/src/frontend/src/pages/HomePage/OnboardingHomePage.tsx
+++ b/src/frontend/src/pages/HomePage/OnboardingHomePage.tsx
@@ -55,7 +55,7 @@ const OnboardingHomePage = () => {
             <OnboardingProgressBar
               value={50}
               text={'Complete'}
-              typographySx={{ fontSize: '1.2em', ml: 1 }}
+              typographySx={{ fontSize: '1.2em' }}
               progressBarSx={{ height: '3vh' }}
             />
           </Box>

From d148c78e728eefb02616ad21b8465e1a2e7e2aa1 Mon Sep 17 00:00:00 2001
From: aaryan1203 <aaryanjain1203@gmail.com>
Date: Fri, 20 Dec 2024 14:08:30 -0500
Subject: [PATCH 08/10] #2811 fixed flakey test

---
 src/backend/tests/unmocked/organization.test.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/backend/tests/unmocked/organization.test.ts b/src/backend/tests/unmocked/organization.test.ts
index 38d179e23a..bfbc552cdb 100644
--- a/src/backend/tests/unmocked/organization.test.ts
+++ b/src/backend/tests/unmocked/organization.test.ts
@@ -280,8 +280,8 @@ describe('Organization Tests', () => {
       });
 
       expect(allContacts.length).toBe(2);
-      expect(allContacts[0].userId).toBe(testBatman.userId);
-      expect(allContacts[1].userId).toBe(testSuperman.userId);
+      expect(allContacts.some((contact) => contact.userId === testBatman.userId)).toBeTruthy();
+      expect(allContacts.some((contact) => contact.userId === testSuperman.userId)).toBeTruthy();
 
       expect(updatedOrganization).not.toBeNull();
       expect(updatedOrganization.contacts[0].title).toBe('Chief Software Engineer');

From 8477bb89d583c27c520ae5309d7fcebbfedc15c2 Mon Sep 17 00:00:00 2001
From: harish <harivarada1@gmail.com>
Date: Fri, 20 Dec 2024 18:44:47 -0500
Subject: [PATCH 09/10] #2811 changing prop names

---
 src/frontend/src/components/OnboardingProgressBar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/components/OnboardingProgressBar.tsx b/src/frontend/src/components/OnboardingProgressBar.tsx
index 7c8ea927fe..c5ce8fd783 100644
--- a/src/frontend/src/components/OnboardingProgressBar.tsx
+++ b/src/frontend/src/components/OnboardingProgressBar.tsx
@@ -1,6 +1,6 @@
 import { Box, LinearProgress, linearProgressClasses, styled, SxProps, Typography } from '@mui/material';
 
-interface ProgressBarWithValueProps {
+interface OnboardingProgressBarProps {
   value: number;
   text?: string;
   typographySx?: SxProps;
@@ -20,7 +20,7 @@ const StyledProgressBar = styled(LinearProgress)(() => ({
   }
 }));
 
-const OnboardingProgressBar: React.FC<ProgressBarWithValueProps> = ({ value, text, typographySx, progressBarSx }) => {
+const OnboardingProgressBar: React.FC<OnboardingProgressBarProps> = ({ value, text, typographySx, progressBarSx }) => {
   return (
     <Box position="relative" display="flex" alignItems="center" width="100%">
       <StyledProgressBar variant="determinate" value={value} style={{ flexGrow: 1 }} sx={progressBarSx} />

From 33cdb37bf26940846a9811d2836c26ecb76bc6fd Mon Sep 17 00:00:00 2001
From: aaryan1203 <aaryanjain1203@gmail.com>
Date: Sat, 21 Dec 2024 17:38:22 -0500
Subject: [PATCH 10/10] #2811 removed extra grids

---
 .../pages/HomePage/components/Checklist.tsx   | 20 ++++++++-----------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/src/frontend/src/pages/HomePage/components/Checklist.tsx b/src/frontend/src/pages/HomePage/components/Checklist.tsx
index 7b06e40cb7..267cd75f2f 100644
--- a/src/frontend/src/pages/HomePage/components/Checklist.tsx
+++ b/src/frontend/src/pages/HomePage/components/Checklist.tsx
@@ -19,18 +19,14 @@ const Checklist: React.FC<{ parentChecklists: ChecklistType[]; checklistName?: s
   return (
     <Box sx={{ backgroundColor: theme.palette.background.paper, borderRadius: 5, p: 2 }}>
       <Grid container spacing={2}>
-        <Grid item xs={12}>
-          <Grid container justifyContent="space-between" alignItems="center">
-            <Grid container alignItems="center" sx={{ flexGrow: 1 }}>
-              <Typography fontSize="2em" fontWeight="bold" sx={{ marginRight: 2 }}>
-                {checklistName ?? 'General'} Checklist
-              </Typography>
-              <Box sx={{ flexGrow: 1, mx: 2 }}>
-                <OnboardingProgressBar value={51} />
-              </Box>
-              <IconButton onClick={toggleShowTasks}>{showTasks ? <KeyboardArrowDown /> : <KeyboardArrowRight />}</IconButton>
-            </Grid>
-          </Grid>
+        <Grid item xs={12} container justifyContent="space-between" alignItems="center" sx={{ flexGrow: 1 }}>
+          <Typography fontSize="2em" fontWeight="bold" sx={{ marginRight: 2 }}>
+            {checklistName ?? 'General'} Checklist
+          </Typography>
+          <Box sx={{ flexGrow: 1, mx: 2 }}>
+            <OnboardingProgressBar value={51} />
+          </Box>
+          <IconButton onClick={toggleShowTasks}>{showTasks ? <KeyboardArrowDown /> : <KeyboardArrowRight />}</IconButton>
         </Grid>
         {showTasks && (
           <Grid item xs={12}>