Merge pull request #40 from bcgov/table-touch-ups

Fix projects table spacing
bcgov · Aug 23, 2024 · a464787 · a464787
2 parents d880ff3 + 0c5c415
commit a464787
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 9 deletions.
diff --git a/submit-web/src/components/Projects/Project.tsx b/submit-web/src/components/Projects/Project.tsx
@@ -78,7 +78,10 @@ export const Project = ({ accountProject }: ProjectParam) => {
           <Box
             display={"flex"}
             justifyContent={"space-between"}
-            sx={{ py: BCDesignTokens.layoutPaddingXlarge }}
+            sx={{
+              pt: BCDesignTokens.layoutPaddingMedium,
+              pb: BCDesignTokens.layoutPaddingXlarge,
+            }}
           >
             <CardInnerBox>
               <Typography variant="h4" fontWeight={400}>
@@ -104,10 +107,17 @@ export const Project = ({ accountProject }: ProjectParam) => {
             >
               Active Submissions
             </Typography>
-            <CardInnerBox sx={{ height: "100%", py: 2 }}>
+            <CardInnerBox
+              sx={{ height: "100%", py: BCDesignTokens.layoutPaddingSmall }}
+            >
               <SubmissionTable plans={plans} />
             </CardInnerBox>
-            <Divider sx={{ mb: 0.5 }} />
+            <Divider
+              sx={{
+                mb: BCDesignTokens.layoutPaddingXsmall,
+                mt: BCDesignTokens.layoutPaddingSmall,
+              }}
+            />
             <Typography
               variant="body1"
               sx={{
@@ -117,7 +127,9 @@ export const Project = ({ accountProject }: ProjectParam) => {
             >
               Past Submissions
             </Typography>
-            <CardInnerBox sx={{ height: "100%", my: 2 }}>
+            <CardInnerBox
+              sx={{ height: "100%", py: BCDesignTokens.layoutPaddingMedium }}
+            >
               <SubmissionTable headless plans={plans} />
             </CardInnerBox>
           </Box>

diff --git a/submit-web/src/components/Projects/SubmissionTable.tsx b/submit-web/src/components/Projects/SubmissionTable.tsx
@@ -27,22 +27,30 @@ export default function SubmissionTable({
         {!headless && (
           <TableHead sx={{ border: 0 }}>
             <TableRow>
-              <TableCell sx={{ color: BCDesignTokens.themeGray70 }}>
+              <TableCell
+                colSpan={6}
+                sx={{
+                  color: BCDesignTokens.themeGray70,
+                }}
+              >
                 Submission Name
               </TableCell>
               <TableCell
-                align="center"
+                colSpan={2}
+                align="right"
                 sx={{ color: BCDesignTokens.themeGray70 }}
               >
                 Submitted On
               </TableCell>
               <TableCell
-                align="center"
+                colSpan={2}
+                align="right"
                 sx={{ color: BCDesignTokens.themeGray70 }}
               >
                 Submitted By
               </TableCell>
               <TableCell
+                colSpan={2}
                 align="center"
                 sx={{ color: BCDesignTokens.themeGray70 }}
               >
@@ -57,12 +65,14 @@ export default function SubmissionTable({
               <TableCell
                 component="th"
                 scope="row"
+                colSpan={6}
                 sx={{
                   borderTop: "2px solid #F2F2F2",
                   borderBottom: "2px solid #F2F2F2",
                   borderLeft: "2px solid #F2F2F2",
                   borderTopLeftRadius: 5,
                   borderBottomLeftRadius: 5,
+                  py: BCDesignTokens.layoutPaddingSmall,
                 }}
               >
                 <Link
@@ -85,31 +95,37 @@ export default function SubmissionTable({
                 </Link>
               </TableCell>
               <TableCell
-                align="center"
+                colSpan={2}
+                align="right"
                 sx={{
                   borderTop: "2px solid #F2F2F2",
                   borderBottom: "2px solid #F2F2F2",
+                  py: BCDesignTokens.layoutPaddingSmall,
                 }}
               >
                 {plan.submittedDate || "--"}
               </TableCell>
               <TableCell
-                align="center"
+                colSpan={2}
+                align="right"
                 sx={{
                   borderTop: "2px solid #F2F2F2",
                   borderBottom: "2px solid #F2F2F2",
+                  py: BCDesignTokens.layoutPaddingSmall,
                 }}
               >
                 {plan.submittedBy || "--"}
               </TableCell>
               <TableCell
+                colSpan={2}
                 align="right"
                 sx={{
                   borderTop: "2px solid #F2F2F2",
                   borderTopRightRadius: 5,
                   borderBottomRightRadius: 5,
                   borderBottom: "2px solid #F2F2F2",
                   borderRight: "2px solid #F2F2F2",
+                  py: BCDesignTokens.layoutPaddingSmall,
                 }}
               >
                 <ProjectStatusChip isCompleted={plan.isCompleted} />