From: Lisa Knox <lisaknox83@gmail.com>
Date: Thu, 27 Jul 2023 16:50:25 +0000 (-0400)
Subject: 15768: checkbox css Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox@curii.com>
X-Git-Tag: 2.7.1~13^2~77
X-Git-Url: https://git.arvados.org/arvados-workbench2.git/commitdiff_plain/68b5966bf4a5d80d6667abab421a4309ad688a38

15768: checkbox css Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox@curii.com>
---

diff --git a/src/components/data-table/data-table.tsx b/src/components/data-table/data-table.tsx
index 7a9d95b0..effc46ab 100644
--- a/src/components/data-table/data-table.tsx
+++ b/src/components/data-table/data-table.tsx
@@ -64,6 +64,7 @@ type CssRules =
     | 'checkBoxHead'
     | 'checkBoxCell'
     | 'checkBox'
+    | 'firstTableCell'
     | 'tableCell'
     | 'arrow'
     | 'arrowButton'
@@ -106,6 +107,9 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
         paddingRight: '24px',
         color: '#737373',
     },
+    firstTableCell: {
+        paddingLeft: '5px',
+    },
     tableCellWorkflows: {
         '&:nth-last-child(2)': {
             padding: '0px',
@@ -293,11 +297,15 @@ export const DataTable = withStyles(styles)(
                         <Tooltip title={this.state.isSelected ? 'Deselect All' : 'Select All'}>
                             <input type='checkbox' className={classes.checkBox} checked={isSelected} onChange={this.handleSelectorSelect}></input>
                         </Tooltip>
-                        <DataTableMultiselectPopover name={`Options`} options={this.multiselectOptions} checkedList={checkedList}></DataTableMultiselectPopover>
+                        <DataTableMultiselectPopover
+                            name={`Options`}
+                            options={this.multiselectOptions}
+                            checkedList={checkedList}
+                        ></DataTableMultiselectPopover>
                     </div>
                 </TableCell>
             ) : (
-                <TableCell className={classes.tableCell} key={key || index}>
+                <TableCell className={index == 1 ? classes.firstTableCell : classes.tableCell} key={key || index}>
                     {renderHeader ? (
                         renderHeader()
                     ) : countNodes(filters) > 0 ? (
@@ -346,7 +354,13 @@ export const DataTable = withStyles(styles)(
                     {this.mapVisibleColumns((column, index) => (
                         <TableCell
                             key={column.key || index}
-                            className={currentRoute === '/workflows' ? classes.tableCellWorkflows : index === 0 ? classes.checkBoxCell : classes.tableCell}
+                            className={
+                                currentRoute === '/workflows'
+                                    ? classes.tableCellWorkflows
+                                    : index === 0
+                                    ? classes.checkBoxCell
+                                    : `${classes.tableCell} ${index === 1 ? classes.firstTableCell : ''}`
+                            }
                         >
                             {column.render(item)}
                         </TableCell>