Cmdct 3983 - updates to tables (#770)

Enterprise-CMCS · Sep 27, 2024 · e8768fe · e8768fe
1 parent fb8646b
commit e8768fe
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 16 deletions.
diff --git a/services/ui-src/src/components/overlays/EntityDetailsDashboardOverlay.tsx b/services/ui-src/src/components/overlays/EntityDetailsDashboardOverlay.tsx
@@ -45,7 +45,7 @@ export const EntityDetailsDashboardOverlay = ({
   };
 
   const tableHeaders = () => {
-    return { headRow: ["", "", ""] };
+    return { headRow: ["", ""] };
   };
 
   const reportPageTitle = selectedEntity?.isInitiativeClosed
@@ -106,7 +106,7 @@ export const EntityDetailsDashboardOverlay = ({
             text={dashboard?.verbiage?.intro}
             initiativeName={reportPageTitle}
           />
-          <Table content={tableHeaders()}>
+          <Table sx={sx.table} content={tableHeaders()}>
             {entitySteps?.map((step, index) => (
               <EntityRow
                 key={`entityrow-${index}`}
@@ -156,6 +156,16 @@ const sx = {
     backgroundColor: "palette.white",
     width: "100%",
   },
+  table: {
+    th: {
+      fontWeight: "bold",
+      color: "palette.gray_medium",
+      paddingLeft: "1rem",
+      paddingRight: "0",
+      borderBottom: "1px solid",
+      borderColor: "palette.gray_light",
+    },
+  },
   backButton: {
     padding: 0,
     fontWeight: "normal",

diff --git a/services/ui-src/src/components/reports/DynamicModalOverlayReportPage.tsx b/services/ui-src/src/components/reports/DynamicModalOverlayReportPage.tsx
@@ -68,7 +68,7 @@ export const DynamicModalOverlayReportPage = ({
   );
   const tableHeaders = () => {
     if (isTablet || isMobile) return { headRow: ["", ""] };
-    return { headRow: ["", verbiage.tableHeader, ""] };
+    return { headRow: ["", verbiage.tableHeader] };
   };
 
   // Open/Close overlay action methods
@@ -194,15 +194,23 @@ const sx = {
       paddingRight: "0",
       borderBottom: "1px solid",
       borderColor: "palette.gray_light",
-      ".tablet &, .mobile &": {
-        border: "none",
-      },
       "&:nth-of-type(1)": {
         width: "2.5rem",
       },
       "&:nth-of-type(3)": {
         width: "260px",
       },
     },
+    /**
+     * removes bottom border only for
+     * State or Territory-Specific Initiatives
+     */
+    tr: {
+      "&:last-of-type": {
+        td: {
+          border: "none",
+        },
+      },
+    },
   },
 };
diff --git a/services/ui-src/src/components/reports/ModalDrawerReportPage.tsx b/services/ui-src/src/components/reports/ModalDrawerReportPage.tsx
@@ -184,7 +184,7 @@ export const ModalDrawerReportPage = ({ route, validateOnRender }: Props) => {
   };
 
   const tableHeaders = {
-    headRow: ["", "", "", ""],
+    headRow: ["", ""],
   };
 
   const defaultsPopsNotSelected = (targetPopulations: AnyObject[]) => {
@@ -326,10 +326,7 @@ const sx = {
       paddingLeft: "1rem",
       paddingRight: "0",
       borderBottom: "1px solid",
-      borderColor: "palette.gray_lighter",
-      ".tablet &, .mobile &": {
-        border: "none",
-      },
+      borderColor: "palette.gray_light",
       "&:nth-of-type(1)": {
         width: "2.5rem",
       },

diff --git a/services/ui-src/src/components/reports/ModalOverlayReportPage.tsx b/services/ui-src/src/components/reports/ModalOverlayReportPage.tsx
@@ -61,7 +61,7 @@ export const ModalOverlayReportPage = ({ route, setSidebarHidden }: Props) => {
   const dashSubTitle = (verbiage as AnyObject)?.dashboardSubtitle;
   const tableHeaders = () => {
     if (isTablet || isMobile) return { headRow: ["", ""] };
-    return { headRow: ["", verbiage.tableHeader, ""] };
+    return { headRow: ["", verbiage.tableHeader] };
   };
 
   // Add/edit entity modal disclosure and methods
@@ -257,6 +257,10 @@ const sx = {
         width: "260px",
       },
     },
+    tr: {
+      borderBottom: "1px solid",
+      borderColor: "palette.gray_light",
+    },
   },
   addEntityButton: {
     marginTop: "2rem",

diff --git a/services/ui-src/src/components/tables/EntityRow.tsx b/services/ui-src/src/components/tables/EntityRow.tsx
@@ -130,7 +130,7 @@ export const EntityRow = ({
       >
         <EntityStatusIcon entityStatus={entityStatus} />
       </Td>
-      <Td sx={sx.entityName} colSpan={3}>
+      <Td sx={sx.entityName}>
         <Box
           display={"flex"}
           flexDirection={isMobile ? "column" : "row"}
@@ -230,10 +230,8 @@ interface Props {
 
 const sx = {
   content: {
-    borderTop: "1px solid var(--chakra-colors-palette-gray_medium)",
-    borderBottom: "1px solid var(--chakra-colors-palette-gray_medium)",
     td: {
-      borderColor: "palette.gray_lighter",
+      borderColor: "palette.gray_light",
       paddingRight: 0,
     },
   },
@@ -248,6 +246,9 @@ const sx = {
       margin: "0.3rem auto",
       listStyleType: "none",
       lineHeight: "1.3rem",
+      ".mobile &": {
+        margin: "auto",
+      },
       li: {
         wordWrap: "break-word",
         whiteSpace: "break-spaces",