diff --git a/src/components/ItemTableFilter/ItemTableFilter.js b/src/components/ItemTableFilter/ItemTableFilter.js index f17101b..7dfcfa9 100644 --- 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 ( - - {label} - - + + + {label} + + + ); }; diff --git a/src/components/QueueSelector/QueueSelector.js b/src/components/QueueSelector/QueueSelector.js index e39fb87..072471d 100644 --- 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. - + // Paper is used for margin because Autocomplete CSS overrides don't work as expected. + ( - Active Queues: + Active Queues: {params.InputProps.startAdornment} @@ -160,7 +166,7 @@ export default function QueueSelector({ open, setOpen, value, setValue }) { multiple autoHighlight /> - + ); };