Add visual spacing and use small outlined styling

ECN · Nov 17, 2020 · 983e852 · 983e852
1 parent 172480b
commit 983e852
Showing 1 changed file with 38 additions and 32 deletions.
diff --git 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(
-        <Autocomplete
-            renderInput={(params) => (
-                <TextField
-                    {...params}
-                    placeholder={selectedQueues.length === 0 ? "Click or type to select queues." : ""}
-                    // The MUI Autocomplete component uses the InputProps.startAdornment to store chips fpr multi-selection.
-                    // Using InputProps.startAdornment directly will override those chips. Code below is a workaround.
-                    // See: https://github.com/mui-org/material-ui/issues/19479
-                    InputProps={{
-                        ...params.InputProps,
-                        startAdornment: (
-                            <>
-                                <InputAdornment position="start">
-                                    Active Queues: 
-                                </InputAdornment>
-                                {params.InputProps.startAdornment}
-                            </>
-                        ),
-                    }}
-                />
-            )}
+        <Box margin={`${theme.spacing(1)}px`}>
+            <Autocomplete
+                renderInput={(params) => (
+                    <TextField
+                        {...params}
+                        variant="outlined"
+                        placeholder={selectedQueues.length === 0 ? "Click or type to select queues." : ""}
+                        // The MUI Autocomplete component uses the InputProps.startAdornment to store chips fpr multi-selection.
+                        // Using InputProps.startAdornment directly will override those chips. Code below is a workaround.
+                        // See: https://github.com/mui-org/material-ui/issues/19479
+                        InputProps={{
+                            ...params.InputProps,
+                            startAdornment: (
+                                <>
+                                    <InputAdornment position="start">
+                                        Active Queues: 
+                                    </InputAdornment>
+                                    {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"
+            />
+        </Box>
     );
 };