Fix product filter input and select

src/components/Filter/Filter.tsx

@@ -60,21 +60,23 @@ const styles = (theme: Theme) =>
     filterButton: {
       alignItems: "center",
       backgroundColor: fade(theme.palette.primary.main, 0.6),
-      borderRadius: "19px",
+      borderRadius: "4px",
       display: "flex",
-      height: "38px",
+      height: "45px",
       justifyContent: "space-around",
       margin: `0 ${theme.spacing.unit * 2}px ${theme.spacing.unit}px`,
       marginLeft: 0,
-      padding: "0 16px"
-    },
-    filterLabel: {
-      marginBottom: theme.spacing.unit
+      padding: "0 16px",
+      position: "relative",
+      top: -5
     },
     paper: {
       marginTop: theme.spacing.unit * 2,
       padding: theme.spacing.unit * 2,
-      width: 240
+      width: 240,
+      "& p": {
+        paddingBottom: 10
+      }
     },
     popover: {
       zIndex: 1

src/components/SingleSelectField/SingleSelectField.tsx

@@ -1,4 +1,4 @@
-import FilledInput from "@material-ui/core/FilledInput";
+import OutlinedInput from "@material-ui/core/OutlinedInput";
 import FormControl from "@material-ui/core/FormControl";
 import FormHelperText from "@material-ui/core/FormHelperText";
 import InputLabel from "@material-ui/core/InputLabel";
@@ -65,14 +65,14 @@ export const SingleSelectField = withStyles(styles, {
       >
         <InputLabel shrink={!!value}>{label}</InputLabel>
         <Select
-          variant="filled"
+          variant="outlined"
           fullWidth
           renderValue={choiceValue =>
             choiceValue ? choicesByKey[choiceValue.toString()] : placeholder
           }
           value={value || ""}
           onChange={onChange}
-          input={<FilledInput name={name} />}
+          input={<OutlinedInput name={name} labelWidth={180} />}
           {...selectProps}
         >
           {choices.length > 0 ? (

src/components/TableFilter/FilterChips.tsx

@@ -45,7 +45,8 @@ const useStyles = makeStyles(
       actionContainer: {
         display: "flex",
         flexWrap: "wrap",
-        padding: `${theme.spacing.unit}px ${theme.spacing.unit * 3}px`
+        padding: `${theme.spacing.unit * 2}px ${theme.spacing.unit *
+          3}px ${theme.spacing.unit / 2}px ${theme.spacing.unit * 3}px`
       },
       filterButton: {
         alignItems: "center",

src/theme.ts

@@ -228,6 +228,11 @@ export default (colors: IThemeColors): Theme =>
           borderColor: colors.input.border
         }
       },
+      MuiSelect: {
+        outlined: {
+          padding: ["15px 12px 17px", "!important"] as any
+        }
+      },
       MuiSwitch: {
         bar: {
           "$colorPrimary$checked + &": {