refactor: adjust expandable row styles

dhis2 · Nov 14, 2023 · 2ae80b9 · 2ae80b9
1 parent def6c57
commit 2ae80b9
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 29 deletions.
diff --git a/src/components/JobTable/ExpandableRow.js b/src/components/JobTable/ExpandableRow.js
@@ -1,22 +1,15 @@
 import React from 'react'
 import { TableRow, TableCell } from '@dhis2/ui'
 import PropTypes from 'prop-types'
-import cx from 'classnames'
 import { jobTypesMap } from '../../services/server-translations'
 import styles from './ExpandableRow.module.css'
 
-const ExpandableRow = ({ job, isFirst, isLast }) => {
+const ExpandableRow = ({ job }) => {
     return (
-        <TableRow
-            className={cx(styles.row, {
-                [styles.first]: isFirst,
-                [styles.last]: isLast,
-            })}
-            suppressZebraStriping
-        >
-            <TableCell className={styles.cell} />
-            <TableCell className={styles.cell}>{job.name}</TableCell>
-            <TableCell className={styles.cell} colSpan="6">
+        <TableRow className={styles.row} suppressZebraStriping>
+            <TableCell />
+            <TableCell className={styles.indent}>{job.name}</TableCell>
+            <TableCell className={styles.indent} colSpan="6">
                 {jobTypesMap[job.type]}
             </TableCell>
         </TableRow>
@@ -26,8 +19,6 @@ const ExpandableRow = ({ job, isFirst, isLast }) => {
 const { shape, string } = PropTypes
 
 ExpandableRow.propTypes = {
-    isFirst: string.isRequired,
-    isLast: string.isRequired,
     job: shape({
         name: string.isRequired,
         type: string.isRequired,

diff --git a/src/components/JobTable/ExpandableRow.module.css b/src/components/JobTable/ExpandableRow.module.css
@@ -1,13 +1,8 @@
 .row {
-    background: var(--colors-grey300);
+    box-shadow: inset 8px 0 0 0 var(--colors-grey500);
 }
 
-.first {
-    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 */
+.indent {
     /* stylelint-disable-next-line declaration-no-important */
-    border-bottom: 1px solid var(--colors-grey300) !important;
+    padding-left: 32px !important;
 }
diff --git a/src/components/JobTable/QueueTableRow.js b/src/components/JobTable/QueueTableRow.js
@@ -70,13 +70,8 @@ const QueueTableRow = ({
                 </TableCell>
             </TableRow>
             {showJobs
-                ? sequence.map((job, index) => (
-                      <ExpandableRow
-                          key={job.id}
-                          job={job}
-                          isFirst={index === 0}
-                          isLast={index === sequence.length - 1}
-                      />
+                ? sequence.map((job) => (
+                      <ExpandableRow key={job.id} job={job} />
                   ))
                 : null}
         </>