style: refine expandable styles

dhis2 · Nov 8, 2023 · def6c57 · def6c57
1 parent d5d84f3
commit def6c57
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/src/components/JobTable/ExpandableRow.js b/src/components/JobTable/ExpandableRow.js
@@ -14,9 +14,11 @@ const ExpandableRow = ({ job, isFirst, isLast }) => {
             })}
             suppressZebraStriping
         >
-            <TableCell />
-            <TableCell>{job.name}</TableCell>
-            <TableCell colSpan="6">{jobTypesMap[job.type]}</TableCell>
+            <TableCell className={styles.cell} />
+            <TableCell className={styles.cell}>{job.name}</TableCell>
+            <TableCell className={styles.cell} colSpan="6">
+                {jobTypesMap[job.type]}
+            </TableCell>
         </TableRow>
     )
 }

diff --git a/src/components/JobTable/ExpandableRow.module.css b/src/components/JobTable/ExpandableRow.module.css
@@ -6,6 +6,8 @@
     box-shadow: inset 0 5px 4px -4px var(--colors-grey600);
 }
 
-.last {
-    box-shadow: inset 0 -5px 4px -4px var(--colors-grey600);
+.last .cell {
+    /* Using important here to override the specificity of styled-jsx's inline styles */
+    /* stylelint-disable-next-line declaration-no-important */
+    border-bottom: 1px solid var(--colors-grey300) !important;
 }