From b6529efd834598d953d51bfa1fc4cdbe945b8963 Mon Sep 17 00:00:00 2001
From: Krzysztof Bialoglowicz <krzysztof@mirumee.com>
Date: Tue, 3 Sep 2019 11:48:20 +0200
Subject: [PATCH] Fix product filter input and select

---
 src/components/Filter/Filter.tsx                 | 16 +++++++++-------
 .../SingleSelectField/SingleSelectField.tsx      |  6 +++---
 src/components/TableFilter/FilterChips.tsx       |  3 ++-
 src/theme.ts                                     |  5 +++++
 4 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/components/Filter/Filter.tsx b/src/components/Filter/Filter.tsx
index a68e682df..4f9fa8eed 100644
--- a/src/components/Filter/Filter.tsx
+++ b/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
diff --git a/src/components/SingleSelectField/SingleSelectField.tsx b/src/components/SingleSelectField/SingleSelectField.tsx
index 3c9c2be82..d8be758e8 100644
--- a/src/components/SingleSelectField/SingleSelectField.tsx
+++ b/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 ? (
diff --git a/src/components/TableFilter/FilterChips.tsx b/src/components/TableFilter/FilterChips.tsx
index 0462442a7..e6b658170 100644
--- a/src/components/TableFilter/FilterChips.tsx
+++ b/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",
diff --git a/src/theme.ts b/src/theme.ts
index 4a6afe5bf..54313ed74 100644
--- a/src/theme.ts
+++ b/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 + &": {