Improve the design of Table with sorting buttons

Author: adamkudrna

src/lib/components/Table/_components/TableCell.scss

@@ -14,12 +14,13 @@
     border-bottom-width: 2px;
 }
 
+.tableHeadCellLayout {
+    display: flex;
+    gap: settings.$cell-padding-x;
+    align-items: center;
+}
+
 .isTableCellSortingActive,
 .isTableHeadCellSortingActive {
     background-color: settings.$sorted-background-color;
 }
-
-.sortButton {
-    display: inline-block;
-    margin-right: settings.$cell-padding-x;
-}

src/lib/components/Table/_components/TableHeaderCell/TableHeaderCell.jsx

@@ -16,23 +16,26 @@ export const TableHeaderCell = ({
       className={isSortingActive ? styles.isTableHeadCellSortingActive : styles.tableHeadCell}
       id={id}
     >
-      {sort && column.isSortable && (
-        <div className={styles.sortButton}>
+      <span className={styles.tableHeadCellLayout}>
+        {sort && column.isSortable && (
           <Button
+            aria-pressed={isSortingActive}
             beforeLabel={
               sortDirection === 'asc'
                 ? sort.ascendingIcon
                 : sort.descendingIcon
             }
+            color={isSortingActive ? 'selected' : 'secondary'}
             id={id && `${id}__sortButton`}
             label={sortDirection}
             labelVisibility="none"
             onClick={() => sort.onClick(column.name, sortDirection)}
             priority="flat"
+            size="small"
           />
-        </div>
-      )}
-      {column.label}
+        )}
+        {column.label}
+      </span>
     </th>
   );
 };