Merge branch 'enhancement-add-paper-to-components' into staging

ECN · Apr 22, 2021 · fb00034 · fb00034
2 parents 8e00db2 + 01e9329
commit fb00034
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 22 deletions.
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, makeStyles } 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(`${process.env.PUBLIC_URL}/api/data/get_queues`, requestOptions);
     const queueCountJson = await apiResponse.json();
-    
+
     return queueCountJson;
 };
 
@@ -38,6 +38,12 @@ export default function QueueSelector({ open, setOpen, value, setValue }) {
     const activeQueues = cookies['active-queues'] !== undefined ? cookies['active-queues'].split(',') : [];
 
     const theme = useTheme();
+    const useStyles = makeStyles({
+		Paper_root: {
+            margin: theme.spacing(1)
+        }
+	});
+	const classes = useStyles();
 
     // Prepopulate Active Queues from Cookies
     useEffect( _ => {
@@ -86,7 +92,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);
@@ -112,8 +118,8 @@ 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 is used for margin because Autocomplete CSS overrides don't work as expected.
+        <Paper elevation={0} classes={{ root: classes.Paper_root }}>
             <Autocomplete
                 renderInput={(params) => (
                     <TextField
@@ -129,7 +135,7 @@ export default function QueueSelector({ open, setOpen, value, setValue }) {
                             startAdornment: (
                                 <>
                                     <InputAdornment position="start">
-                                        Active Queues: 
+                                        Active Queues:
                                     </InputAdornment>
                                     {params.InputProps.startAdornment}
                                 </>
@@ -160,7 +166,7 @@ export default function QueueSelector({ open, setOpen, value, setValue }) {
                 multiple
                 autoHighlight
             />
-        </Box>
+        </Paper>
     );
 };