From 561d43520860ac8254ce959620802c658352f4d5 Mon Sep 17 00:00:00 2001
From: Tyler Jordan Wright <wrigh393@w2vm1.ecn.purdue.edu>
Date: Fri, 11 Dec 2020 12:04:19 -0500
Subject: [PATCH] Styling fixes for sort by buttons to add visual weight and
 make them easier to see what columns the buttons are related to.

---
 src/components/ItemTable/ItemTable.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js
index 059494f..65c6cf2 100644
--- 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,7 +88,7 @@ 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)
@@ -96,11 +96,11 @@ export default function ItemTable({ data, rowCanBeSelected }) {
                                                     >
                                                         <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)
@@ -108,7 +108,7 @@ export default function ItemTable({ data, rowCanBeSelected }) {
                                                     >
                                                         <ArrowDownward {...column.getSortByToggleProps(column.isSortedDesc)}
                                                             fontSize="inherit"
-                                                            color={column.isSorted && column.isSortedDesc ? "default" : "disabled"}
+                                                            color={column.isSorted && column.isSortedDesc ? "secondary" : "default"}
                                                         />
                                                     </IconButton>
                                                 </ButtonGroup>