From 566efcafd853ee453ebc3151f45a00006179bdf3 Mon Sep 17 00:00:00 2001
From: Justin Campbell <campb303@purdue.edu>
Date: Wed, 16 Dec 2020 16:52:17 -0500
Subject: [PATCH 1/2] Add spacing for table

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

diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js
index 65c6cf2..89050fa 100644
--- a/src/components/ItemTable/ItemTable.js
+++ b/src/components/ItemTable/ItemTable.js
@@ -9,9 +9,9 @@ import { ArrowDownward, ArrowUpward } from "@material-ui/icons";
 
 
 export default function ItemTable({ data, rowCanBeSelected }) {
-    const [selectedRow, setSelectedRow] = useState({ queue: null, number: null});
+    const [selectedRow, setSelectedRow] = useState({ queue: null, number: null });
 
-    const theme = useTheme(); 
+    const theme = useTheme();
     const useStyles = makeStyles({
         // Fully visible for active icons
         activeSortIcon: {
@@ -34,6 +34,12 @@ export default function ItemTable({ data, rowCanBeSelected }) {
             borderLeftStyle: "solid",
             borderColor: theme.palette.type === "light" ? theme.palette.grey[300] : theme.palette.grey[500]
         },
+        tableMargin: {
+            marginTop: theme.spacing(2)
+        },
+        tableHeaderMargin: {
+            marginBottom: theme.spacing(1)
+        }
     });
     const classes = useStyles();
 
@@ -74,13 +80,14 @@ export default function ItemTable({ data, rowCanBeSelected }) {
 
     return (
         <TableContainer>
-            <Table {...getTableProps} aria-label="Table of Queue Items"  size="small">
+            <Table {...getTableProps} aria-label="Table of Queue Items" size="small" classes={{ root: classes.tableMargin }}>
+                
                 <TableHead>
                     {headerGroups.map(headerGroup => (
                         <TableRow {...headerGroup.getHeaderGroupProps()}>
                             {headerGroup.headers.map(column => (
                                 <Grid container spacing={1}>
-                                    <TableCell {...column.getHeaderProps()}>
+                                    <TableCell {...column.getHeaderProps()} classes={{ root: classes.tableHeaderMargin }}>
                                         <Grid container spacing={0}>
                                             <Grid item sm={10} >
                                                 {column.render("Filter")}
@@ -120,6 +127,7 @@ export default function ItemTable({ data, rowCanBeSelected }) {
                         </TableRow>
                     ))}
                 </TableHead>
+
                 <TableBody {...getTableBodyProps()}>
                     {rows.map((row, i) => {
                         prepareRow(row);
@@ -136,7 +144,7 @@ export default function ItemTable({ data, rowCanBeSelected }) {
                                 classes={{ root: (isSelected && rowCanBeSelected) ? classes.rowSelected : classes.bandedRows }}
                                 {...row.getRowProps()} >
                                 {row.cells.map(cell => (
-                                    <TableCell 
+                                    <TableCell
                                         classes={{ root: classes.columnBorders }}
                                         {...cell.getCellProps()}
                                     >
@@ -147,6 +155,7 @@ export default function ItemTable({ data, rowCanBeSelected }) {
                         );
                     })}
                 </TableBody>
+
             </Table>
         </TableContainer>
     );

From 56d6f28315cfce67a744c7996cbfaa93f08ff368 Mon Sep 17 00:00:00 2001
From: Justin Campbell <campb303@purdue.edu>
Date: Wed, 16 Dec 2020 16:52:31 -0500
Subject: [PATCH 2/2] Remove unused classes

---
 src/components/ItemTable/ItemTable.js | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js
index 89050fa..ce1987a 100644
--- a/src/components/ItemTable/ItemTable.js
+++ b/src/components/ItemTable/ItemTable.js
@@ -13,14 +13,6 @@ export default function ItemTable({ data, rowCanBeSelected }) {
 
     const theme = useTheme();
     const useStyles = makeStyles({
-        // Fully visible for active icons
-        activeSortIcon: {
-            opacity: 1,
-        },
-        // Half visible for inactive icons
-        inactiveSortIcon: {
-            opacity: 0.2,
-        },
         rowSelected: {
             backgroundColor: theme.palette.type === 'light' ? theme.palette.primary[100] : theme.palette.primary[600],
         },