Merge pull request #72 from djnunez-aot/ui-styling

Fix MA's styling changes
bcgov · Sep 13, 2024 · 5bce4a8 · 5bce4a8
2 parents 0c79df7 + bff61a7
commit 5bce4a8
Show file tree

Hide file tree

Showing 8 changed files with 77 additions and 32 deletions.
diff --git a/submit-web/package-lock.json b/submit-web/package-lock.json
diff --git a/submit-web/package.json b/submit-web/package.json
@@ -24,7 +24,7 @@
     "@tanstack/router-plugin": "^1.45.7",
     "@types/react-input-mask": "^3.0.5",
     "axios": "^1.7.2",
-    "epic.theme": "^1.0.8",
+    "epic.theme": "latest",
     "keycloak-js": "^25.0.1",
     "oidc-client-ts": "^3.0.1",
     "react": "^18.2.0",

diff --git a/submit-web/src/components/Projects/Project.tsx b/submit-web/src/components/Projects/Project.tsx
@@ -52,7 +52,7 @@ export const Project = ({ accountProject }: ProjectParam) => {
       <Box
         sx={{
           borderRadius: "3px",
-          border: `1px solid #F2F2F2`,
+          border: `1px solid ${BCDesignTokens.surfaceColorBorderDefault}`,
           boxShadow: "0px 1px 2px rgba(0, 0, 0, 0.1)",
         }}
       >
@@ -78,13 +78,18 @@ export const Project = ({ accountProject }: ProjectParam) => {
           </CardInnerBox>
         </Box>
         <Box height={"100%"} px={BCDesignTokens.layoutPaddingXsmall}>
-          <Divider sx={{ mb: 0.5 }} />
+          <Divider
+            sx={{
+              ml: BCDesignTokens.layoutPaddingSmall,
+              mb: BCDesignTokens.layoutPaddingXsmall,
+            }}
+          />
           <Typography
             variant="body1"
             sx={{
               fontWeight: "bold",
               backgroundColor: BCDesignTokens.themeGold10,
-              pl: BCDesignTokens.layoutPaddingSmall,
+              ml: BCDesignTokens.layoutPaddingSmall,
             }}
           >
             Active Submissions
@@ -101,6 +106,7 @@ export const Project = ({ accountProject }: ProjectParam) => {
             sx={{
               mb: BCDesignTokens.layoutPaddingXsmall,
               mt: BCDesignTokens.layoutPaddingSmall,
+              ml: BCDesignTokens.layoutPaddingSmall,
             }}
           />
           <Typography

diff --git a/submit-web/src/components/Projects/ProjectTableRow.tsx b/submit-web/src/components/Projects/ProjectTableRow.tsx
@@ -8,6 +8,7 @@ interface ProjectRowProps {
   subPackage: SubmissionPackage;
   onSubmissionClick: (submissionId: number) => void;
 }
+const border = `1px solid ${BCDesignTokens.surfaceColorBorderDefault}`;
 
 export default function ProjectTableRow({
   subPackage,
@@ -21,9 +22,9 @@ export default function ProjectTableRow({
           scope="row"
           colSpan={6}
           sx={{
-            borderTop: "1px solid #F2F2F2",
-            borderBottom: "1px solid #F2F2F2",
-            borderLeft: "1px solid #F2F2F2",
+            borderTop: border,
+            borderBottom: border,
+            borderLeft: border,
             borderTopLeftRadius: 5,
             borderBottomLeftRadius: 5,
             py: BCDesignTokens.layoutPaddingXsmall,
@@ -54,8 +55,8 @@ export default function ProjectTableRow({
           colSpan={2}
           align="right"
           sx={{
-            borderTop: "1px solid #F2F2F2",
-            borderBottom: "1px solid #F2F2F2",
+            borderTop: border,
+            borderBottom: border,
             py: BCDesignTokens.layoutPaddingXsmall,
           }}
         >
@@ -65,8 +66,8 @@ export default function ProjectTableRow({
           colSpan={2}
           align="right"
           sx={{
-            borderTop: "1px solid #F2F2F2",
-            borderBottom: "1px solid #F2F2F2",
+            borderTop: border,
+            borderBottom: border,
             py: BCDesignTokens.layoutPaddingXsmall,
           }}
         >
@@ -76,11 +77,11 @@ export default function ProjectTableRow({
           colSpan={2}
           align="right"
           sx={{
-            borderTop: "1px solid #F2F2F2",
+            borderTop: border,
             borderTopRightRadius: 5,
             borderBottomRightRadius: 5,
-            borderBottom: "1px solid #F2F2F2",
-            borderRight: "1px solid #F2F2F2",
+            borderBottom: border,
+            borderRight: border,
             py: BCDesignTokens.layoutPaddingXsmall,
           }}
         >

diff --git a/submit-web/src/components/Shared/ContentBox/index.tsx b/submit-web/src/components/Shared/ContentBox/index.tsx
@@ -14,7 +14,11 @@ export const ContentBox = ({
   ...rest
 }: ContentBoxProps) => {
   return (
-    <Paper elevation={2} {...rest}>
+    <Paper
+      elevation={2}
+      {...rest}
+      sx={{ boxShadow: BCDesignTokens.surfaceShadowMedium }}
+    >
       <Box
         sx={{
           display: "flex",

diff --git a/submit-web/src/components/Submission/ItemsTable.tsx b/submit-web/src/components/Submission/ItemsTable.tsx
@@ -31,6 +31,7 @@ export default function ItemsTable({
     setOrder(isAsc ? "desc" : "asc");
     setOrderBy(property);
   };
+
   const sortedSubmissionItems = submissionItems
     .map((subItem) => ({
       id: subItem.id,

diff --git a/submit-web/src/components/Submission/SubmissionItemTableRow.tsx b/submit-web/src/components/Submission/SubmissionItemTableRow.tsx
@@ -18,7 +18,7 @@ type SubmissionItemTableRowProps = {
 const StyledTableCell = styled(TableCell)(() => ({
   borderTop: `1px solid ${BCDesignTokens.themeBlue20}`,
   borderBottom: `1px solid ${BCDesignTokens.themeBlue20}`,
-  py: BCDesignTokens.layoutPaddingXsmall,
+  padding: `${BCDesignTokens.layoutPaddingSmall} !important`,
   "&:first-of-type": {
     borderLeft: `1px solid ${BCDesignTokens.themeBlue20}`,
     borderTopLeftRadius: 5,
@@ -54,29 +54,23 @@ export default function SubmissionItemTableRow({
             }}
           >
             <Typography
-              variant="h5"
+              variant="h6"
               color="inherit"
               fontWeight={900}
-              sx={{ mr: 0.5 }}
+              sx={{ mx: 0.5 }}
             >
               {item.name}
             </Typography>
           </MuiLink>
         </StyledTableCell>
         <StyledTableCell align="right"></StyledTableCell>
         <StyledTableCell align="right">{item.version ?? "--"}</StyledTableCell>
-        <StyledTableCell
-          align="right"
-          sx={{ py: BCDesignTokens.layoutPaddingSmall }}
-        >
+        <StyledTableCell align="right">
           <SubmissionStatusChip
             status={SUBMISSION_STATUS.NEW_SUBMISSION.value}
           />
         </StyledTableCell>
-        <StyledTableCell
-          align="right"
-          sx={{ py: BCDesignTokens.layoutPaddingSmall }}
-        >
+        <StyledTableCell align="right">
           <Link
             style={{
               color: BCDesignTokens.typographyColorLink,

diff --git a/submit-web/src/components/registration/addProjects/ProjectCard/ManagementPlan.tsx b/submit-web/src/components/registration/addProjects/ProjectCard/ManagementPlan.tsx
@@ -57,7 +57,7 @@ export const ManagementPlan = ({ project }: { project: Project }) => {
           <Box
             sx={{
               borderRadius: "3px",
-              border: `1px solid #F2F2F2`,
+              border: `1px solid ${BCDesignTokens.surfaceColorBorderDefault}`,
               boxShadow: "0px 1px 2px rgba(0, 0, 0, 0.1)",
             }}
             height={187}
@@ -73,7 +73,7 @@ export const ManagementPlan = ({ project }: { project: Project }) => {
             <Box height={"50%"}>
               <CardInnerBox
                 sx={{
-                  borderTop: `1px solid #F2F2F2`,
+                  border: `1px solid ${BCDesignTokens.surfaceColorBorderDefault}`,
                 }}
               >
                 <Typography variant="body1">