Styling fixes for sort by buttons to add visual weight and make them …

…easier to see what columns the buttons are related to.
ECN · Dec 11, 2020 · 561d435 · 561d435
1 parent 3a95107
commit 561d435
Showing 1 changed file with 5 additions and 5 deletions.
diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
 import { useTable, useFilters, useFlexLayout, useSortBy } from "react-table";
-import { Table, TableBody, TableCell, TableHead, TableRow, TableContainer, Paper, Grid, ButtonGroup, IconButton, makeStyles, useTheme } from "@material-ui/core";
+import { Table, TableBody, TableCell, TableHead, TableRow, TableContainer, Grid, ButtonGroup, IconButton, makeStyles, useTheme } from "@material-ui/core";
 import { useHistory } from "react-router-dom";
 import RelativeTime from "react-relative-time";
 import ItemTableFilter from "../ItemTableFilter/"
@@ -88,27 +88,27 @@ export default function ItemTable({ data, rowCanBeSelected }) {
                                             <Grid item sm={2} alignItems='center' justify='center'>
                                                 <ButtonGroup orientation="vertical" size="small">
                                                     <IconButton
-                                                        size="small"
+                                                        edge="start"
                                                         onClick={(_ => {
                                                             const isSortedAsc = column.isSorted && !column.isSortedDesc;
                                                             isSortedAsc ? column.clearSortBy() : column.toggleSortBy(false)
                                                         })}
                                                     >
                                                         <ArrowUpward {...column.getSortByToggleProps()}
                                                             fontSize="inherit"
-                                                            color={column.isSorted && column.isSortedDesc === false ? "default" : "disabled"}
+                                                            color={column.isSorted && column.isSortedDesc === false ? "secondary" : "default"}
                                                         />
                                                     </IconButton>
                                                     <IconButton
-                                                        size="small"
+                                                        edge="start"
                                                         onClick={(_ => {
                                                             const isSortedDesc = column.isSorted && column.isSortedDesc;
                                                             isSortedDesc ? column.clearSortBy() : column.toggleSortBy(true)
                                                         })}
                                                     >
                                                         <ArrowDownward {...column.getSortByToggleProps(column.isSortedDesc)}
                                                             fontSize="inherit"
-                                                            color={column.isSorted && column.isSortedDesc ? "default" : "disabled"}
+                                                            color={column.isSorted && column.isSortedDesc ? "secondary" : "default"}
                                                         />
                                                     </IconButton>
                                                 </ButtonGroup>