From 81b64e61e72a511386d206aef6337248b5a17033 Mon Sep 17 00:00:00 2001
From: Tymoteusz Czech <tymek+gpg@getunleash.ai>
Date: Fri, 29 Apr 2022 13:30:50 +0200
Subject: [PATCH] fix: users table sort header styles

---
 .../TableCellSortable.styles.ts               | 23 +++++++++---
 .../TableCellSortable/TableCellSortable.tsx   | 37 +++++++++++++------
 2 files changed, 43 insertions(+), 17 deletions(-)

diff --git a/frontend/src/component/common/Table/TableCellSortable/TableCellSortable.styles.ts b/frontend/src/component/common/Table/TableCellSortable/TableCellSortable.styles.ts
index 6eefb52943..c9ee0f1777 100644
--- a/frontend/src/component/common/Table/TableCellSortable/TableCellSortable.styles.ts
+++ b/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': {
-            backgroundColor: theme.v2.palette.grey[40],
-            '& > svg': {
-                color: theme.v2.palette.grey[90],
-            },
-        },
+        overflow: 'hidden',
         '& > 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,
     },
 }));
diff --git a/frontend/src/component/common/Table/TableCellSortable/TableCellSortable.tsx b/frontend/src/component/common/Table/TableCellSortable/TableCellSortable.tsx
index 2d8f7054ce..88dfcbac04 100644
--- a/frontend/src/component/common/Table/TableCellSortable/TableCellSortable.tsx
+++ b/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}
+                <ConditionallyRender
+                    condition={sort.type === name}
+                    show={
+                        <ConditionallyRender
+                            condition={Boolean(sort.desc)}
+                            show={
+                                <KeyboardArrowDown
+                                    className={styles.icon}
+                                    fontSize="inherit"
+                                />
+                            }
+                            elseShow={
+                                <KeyboardArrowUp
+                                    className={styles.icon}
+                                    fontSize="inherit"
+                                />
+                            }
+                        />
+                    }
+                    elseShow={
+                        <UnfoldMoreOutlined
+                            className={styles.icon}
+                            fontSize="inherit"
+                        />
+                    }
+                />
             </button>
-            <ConditionallyRender
-                condition={sort.type === name}
-                show={
-                    <ConditionallyRender
-                        condition={Boolean(sort.desc)}
-                        show={<KeyboardArrowDown />}
-                        elseShow={<KeyboardArrowUp />}
-                    />
-                }
-                elseShow={<UnfoldMoreOutlined />}
-            />
         </TableCell>
     );
 };