Add a nice border around each filter control.

src/userquerywidget.js

@@ -3,7 +3,6 @@ import React from 'react';
 import Switch from '@material-ui/core/Switch';
 import Box from '@material-ui/core/Box';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
 import LabelIcon from '@material-ui/icons/Label';
 import ImportContactsIcon from '@material-ui/icons/ImportContacts';
@@ -32,6 +31,13 @@ const useStyles = makeStyles(theme => ({
     filtercontrol: {
         display: "flex",
     },
+    bordered: {
+        border: "1px solid black",
+        "border-radius": "3px",
+    },
+    margined: {
+        margin: "6px",
+    },
 }));
 
 export function TagEqualsExpressionControl(props) {
@@ -214,6 +220,7 @@ export function FilterControl(props) {
 
 export function UserQueryWidget(props) {
     const { userQuery, onChange } = props;
+    const classes = useStyles();
 
     var _ = require('lodash');
 
@@ -235,27 +242,33 @@ export function UserQueryWidget(props) {
 
     return (
         <>
-            <Box>
-                <FilterControl
-                    filter={userQuery.image_filter}
-                    onChange={handleImageFilterChange}
-                    resultType={ResultTypeEnum.IMAGE}
-                    resultTypeString="Images" />
-            </Box>
-            <Box>
-                <FilterControl
-                    filter={userQuery.album_filter}
-                    onChange={handleAlbumFilterChange}
-                    resultType={ResultTypeEnum.ALBUM}
-                    resultTypeString="Albums" />
-            </Box>
-            <Box>
-                <FilterControl
-                    filter={userQuery.tag_filter}
-                    onChange={handleTagFilterChange}
-                    resultType={ResultTypeEnum.TAG}
-                    resultTypeString="Tags" />
+            <Box className={classes.bordered + " " + classes.margined}>
+                <Box className={classes.margined}>
+                    <FilterControl
+                        filter={userQuery.image_filter}
+                        onChange={handleImageFilterChange}
+                        resultType={ResultTypeEnum.IMAGE}
+                        resultTypeString="Images" />
+                </Box>
             </Box>
+            <Box className={classes.bordered + " " + classes.margined}>
+                <Box className={classes.margined}>
+                    <FilterControl
+                        filter={userQuery.album_filter}
+                        onChange={handleAlbumFilterChange}
+                        resultType={ResultTypeEnum.ALBUM}
+                        resultTypeString="Albums" />
+                </Box>
+            </Box >
+            <Box className={classes.bordered + " " + classes.margined}>
+                <Box className={classes.margined}>
+                    <FilterControl
+                        filter={userQuery.tag_filter}
+                        onChange={handleTagFilterChange}
+                        resultType={ResultTypeEnum.TAG}
+                        resultTypeString="Tags" />
+                </Box>
+            </Box >
         </>
     );
 }