diff --git a/src/components/QueueSelector/QueueSelector.js b/src/components/QueueSelector/QueueSelector.js index 01a605b..fb0f6bf 100644 --- a/src/components/QueueSelector/QueueSelector.js +++ b/src/components/QueueSelector/QueueSelector.js @@ -1,12 +1,14 @@ import React from "react"; import PropTypes from "prop-types"; -import { TextField, Checkbox, InputAdornment } from "@material-ui/core"; +import { TextField, Checkbox, InputAdornment, Box, useTheme } from "@material-ui/core"; import { Autocomplete } from "@material-ui/lab"; import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank'; import CheckBoxIcon from '@material-ui/icons/CheckBox'; export default function QueueSelector({ queues, selectedQueues, setSelectedQueues }) { + const theme = useTheme(); + const handleChange = (event, newValue) => { setSelectedQueues(newValue) }; @@ -24,38 +26,42 @@ export default function QueueSelector({ queues, selectedQueues, setSelectedQueue ); return( - ( - - - Active Queues: - - {params.InputProps.startAdornment} - - ), - }} - /> - )} + + ( + + + Active Queues: + + {params.InputProps.startAdornment} + + ), + }} + /> + )} - options={queues} - onChange={handleChange} - getOptionLabel={(option) => `${option.name} (${option.number_of_items})`} - renderOption={optionRenderer} - getOptionSelected={ (option, value) => option.name === value.name } - disableCloseOnSelect - disableListWrap - fullWidth - multiple - /> + options={queues} + onChange={handleChange} + getOptionLabel={(option) => `${option.name} (${option.number_of_items})`} + renderOption={optionRenderer} + getOptionSelected={ (option, value) => option.name === value.name } + disableCloseOnSelect + disableListWrap + fullWidth + multiple + size="small" + /> + ); };