Added Paper component to ItemHeaderView, ItemTable, ItemTableFilter, …

…and QueueSelector
ECN · Apr 21, 2021 · 7d57ef9 · 7d57ef9
1 parent 322a075
commit 7d57ef9
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 28 deletions.
diff --git a/src/components/ItemHeaderView/ItemHeaderView.js b/src/components/ItemHeaderView/ItemHeaderView.js
@@ -1,7 +1,7 @@
 import React, { useMemo } from "react";
 import PropTypes from "prop-types";
 import { useTable, useFlexLayout, useFilters } from "react-table";
-import { TableContainer, Table, TableHead, TableRow, TableCell, TableBody, TextField, useTheme, makeStyles } from "@material-ui/core";
+import { TableContainer, Paper, Table, TableHead, TableRow, TableCell, TableBody, TextField, useTheme, makeStyles } from "@material-ui/core";
 
 export default function ItemHeaderView({ data }) {
 
@@ -51,7 +51,7 @@ export default function ItemHeaderView({ data }) {
 	} = tableInstance;
 
 	return (
-		<TableContainer>
+		<TableContainer component={Paper}>
 			<Table {...getTableProps} size="small">
 				<TableHead>
 					{headerGroups.map(headerGroup => (

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, Box, Grid, ButtonGroup, IconButton, makeStyles, useTheme } from "@material-ui/core";
+import { Table, TableBody, TableCell, TableHead, TableRow, TableContainer, Paper, Box, 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/"
@@ -22,7 +22,7 @@ export default function ItemTable({ data, rowCanBeSelected, loading }) {
         },
         hoverBackgroundColor: {
             "&:hover": {
-                // The !important is placed here to enforce CSS specificity. 
+                // The !important is placed here to enforce CSS specificity.
                 // See: https://material-ui.com/styles/advanced/#css-injection-order
                 backgroundColor: `${theme.palette.primary[200]} !important`,
             },
@@ -90,14 +90,14 @@ export default function ItemTable({ data, rowCanBeSelected, loading }) {
     const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, } = tableInstance;
 
     return (
-        loading 
+        loading
         ? (
             <Box className={classes.loadingAnnimation}>
                 <img src={jester} alt="Items are loading." />
             </Box>
         )
         : (
-            <TableContainer>
+            <TableContainer component={Paper}>
                 <Table
                     {...getTableProps}
                     aria-label="Table of Queue Items"
@@ -157,7 +157,7 @@ export default function ItemTable({ data, rowCanBeSelected, loading }) {
                                         history.push(`/${row.original.queue}/${row.original.number}`);
                                         setSelectedRow({ queue: row.original.queue, number: row.original.number });
                                     }}
-                                    // This functionality should be achieved by using the selected prop and 
+                                    // This functionality should be achieved by using the selected prop and
                                     // overriding the selected class but this applied the secondary color at 0.08% opacity.
                                     // Overridding the root class is a workaround.
                                     classes={{

diff --git a/src/components/ItemTableFilter/ItemTableFilter.js b/src/components/ItemTableFilter/ItemTableFilter.js
@@ -1,12 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Box, FormControl, InputLabel, makeStyles, OutlinedInput,} from "@material-ui/core";
+import { Box, FormControl, InputLabel, makeStyles, OutlinedInput, Paper } from "@material-ui/core";
 
 export default function ItemTableFilter({ label, onChange }) {
   const useStyles = makeStyles({
     filterContainer: {
       overflowX: "hidden"
     },
+    paperStyles: {
+      overflow: "hidden"
+    }
   });
   const classes = useStyles();
 
@@ -15,19 +18,21 @@ export default function ItemTableFilter({ label, onChange }) {
   // See: https://github.itap.purdue.edu/ECN/webqueue2/issues/156
   return (
     <Box classes={{ root: classes.filterContainer }} >
-      <FormControl
-        color="secondary"
-        fullWidth
-        margin="dense"
-        size="small"
-        variant="outlined"
-      >
-        <InputLabel htmlFor={label}>{label}</InputLabel>
-        <OutlinedInput
-          onChange={onChange}
-          label={label}
-        />
-      </FormControl>
+      <Paper classes={{ root: classes.paperStyles }} elevation={0}>
+        <FormControl
+          color="secondary"
+          fullWidth
+          margin="dense"
+          size="small"
+          variant="outlined"
+        >
+          <InputLabel htmlFor={label}>{label}</InputLabel>
+          <OutlinedInput
+            onChange={onChange}
+            label={label}
+          />
+        </FormControl>
+      </Paper>
     </Box>
   );
 };

diff --git a/src/components/QueueSelector/QueueSelector.js b/src/components/QueueSelector/QueueSelector.js
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
-import { TextField, Checkbox, InputAdornment, Box, useTheme } from "@material-ui/core";
+import { TextField, Checkbox, InputAdornment, useTheme, Paper } from "@material-ui/core";
 import { Autocomplete } from "@material-ui/lab";
 import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
 import CheckBoxIcon from '@material-ui/icons/CheckBox';
@@ -17,14 +17,14 @@ const getQueueCounts = async (access_token) => {
     if (access_token === null){
         return undefined
     }
-    
+
     let myHeaders = new Headers();
     myHeaders.append("Authorization", `Bearer ${access_token}`);
     let requestOptions = { headers: myHeaders };
 
     const apiResponse = await fetch(`/api/get_queues`, requestOptions);
     const queueCountJson = await apiResponse.json();
-    
+
     return queueCountJson;
 };
 
@@ -86,7 +86,7 @@ export default function QueueSelector({ open, setOpen, value, setValue }) {
 
         // Set active-queues cookie to csv of selected queue names
         const activeQueueOptions = {
-            path: "/", 
+            path: "/",
             expires: (_ => {
                 let expiration_date = new Date();
                 expiration_date.setDate(expiration_date.getDate() + 365);
@@ -113,7 +113,7 @@ export default function QueueSelector({ open, setOpen, value, setValue }) {
 
     return(
         // Box is used for margin because Autocomplete CSS overrides don't work as expected.
-        <Box margin={`${theme.spacing(1)}px`}>
+        <Paper elevation={0} margin={`${theme.spacing(1)}px`}>
             <Autocomplete
                 renderInput={(params) => (
                     <TextField
@@ -129,7 +129,7 @@ export default function QueueSelector({ open, setOpen, value, setValue }) {
                             startAdornment: (
                                 <>
                                     <InputAdornment position="start">
-                                        Active Queues: 
+                                        Active Queues:
                                     </InputAdornment>
                                     {params.InputProps.startAdornment}
                                 </>
@@ -160,7 +160,7 @@ export default function QueueSelector({ open, setOpen, value, setValue }) {
                 multiple
                 autoHighlight
             />
-        </Box>
+        </Paper>
     );
 };