Merge pull request #929 from Unleash/fix/sortable-cell-style

fix: users table sort header styles

frontend/src/component/common/Table/TableCellSortable/TableCellSortable.styles.ts

@@ -2,13 +2,10 @@ import { makeStyles } from '@material-ui/core/styles';
 
 export const useStyles = makeStyles(theme => ({
     tableCellHeaderSortable: {
+        padding: 0,
+        position: 'relative',
         cursor: 'pointer',
-        '&:hover': {
+        overflow: 'hidden',
-            backgroundColor: theme.v2.palette.grey[40],
-            '& > svg': {
-                color: theme.v2.palette.grey[90],
-            },
-        },
         '& > svg': {
             fontSize: theme.v2.fontSizes.headerIcon,
             verticalAlign: 'middle',
@@ -24,8 +21,22 @@ export const useStyles = makeStyles(theme => ({
     },
     sortButton: {
         all: 'unset',
+        padding: theme.spacing(2),
+        width: '100%',
         '&:focus-visible, &:active': {
             outline: 'revert',
         },
+        display: 'flex',
+        alignItems: 'center',
+        '&:hover': {
+            backgroundColor: theme.v2.palette.grey[40],
+            '& > svg': {
+                color: theme.v2.palette.grey[90],
+            },
+        },
+    },
+    icon: {
+        marginLeft: theme.spacing(0.5),
+        fontSize: theme.v2.fontSizes.headerIcon,
     },
 }));

frontend/src/component/common/Table/TableCellSortable/TableCellSortable.tsx

@@ -60,18 +60,33 @@ export const TableCellSortable = ({
         <TableCell aria-sort={ariaSort} className={cellClassName}>
             <button className={styles.sortButton} onClick={onSortClick}>
                 {children}
-            </button>
                 <ConditionallyRender
                     condition={sort.type === name}
                     show={
                         <ConditionallyRender
                             condition={Boolean(sort.desc)}
-                        show={<KeyboardArrowDown />}
+                            show={
-                        elseShow={<KeyboardArrowUp />}
+                                <KeyboardArrowDown
+                                    className={styles.icon}
+                                    fontSize="inherit"
                                 />
                             }
-                elseShow={<UnfoldMoreOutlined />}
+                            elseShow={
+                                <KeyboardArrowUp
+                                    className={styles.icon}
+                                    fontSize="inherit"
                                 />
+                            }
+                        />
+                    }
+                    elseShow={
+                        <UnfoldMoreOutlined
+                            className={styles.icon}
+                            fontSize="inherit"
+                        />
+                    }
+                />
+            </button>
         </TableCell>
     );
 };