From 57bff96c999cce7ec1987c737476450802b67dcf Mon Sep 17 00:00:00 2001
From: Cafe137 <77121044+Cafe137@users.noreply.github.com>
Date: Tue, 25 Jan 2022 18:03:40 +0100
Subject: [PATCH] style: make select and text input style consistent (#295)

---
 src/components/SwarmSelect.tsx    |  7 +++++++
 src/components/SwarmTextInput.tsx | 16 +++++++++++++---
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/components/SwarmSelect.tsx b/src/components/SwarmSelect.tsx
index 4d2209f..4108fab 100644
--- a/src/components/SwarmSelect.tsx
+++ b/src/components/SwarmSelect.tsx
@@ -25,6 +25,11 @@ const useStyles = makeStyles((theme: Theme) =>
       '& fieldset': {
         border: 0,
       },
+      '& .MuiSelect-select': {
+        '&:focus': {
+          background: theme.palette.background.paper,
+        },
+      },
     },
     option: {
       height: '52px',
@@ -48,6 +53,7 @@ export function SwarmSelect({ defaultValue, formik, name, options, onChange, lab
           defaultValue={defaultValue || ''}
           className={classes.select}
           placeholder={label}
+          MenuProps={{ MenuListProps: { disablePadding: true }, PaperProps: { square: true } }}
         >
           {options.map((x, i) => (
             <MenuItem key={i} value={x.value} className={classes.option}>
@@ -71,6 +77,7 @@ export function SwarmSelect({ defaultValue, formik, name, options, onChange, lab
         defaultValue={defaultValue || ''}
         onChange={onChange}
         placeholder={label}
+        MenuProps={{ MenuListProps: { disablePadding: true }, PaperProps: { square: true } }}
       >
         {options.map((x, i) => (
           <MenuItem key={i} value={x.value} className={classes.option}>
diff --git a/src/components/SwarmTextInput.tsx b/src/components/SwarmTextInput.tsx
index 3a38fe4..659aa3d 100644
--- a/src/components/SwarmTextInput.tsx
+++ b/src/components/SwarmTextInput.tsx
@@ -16,10 +16,18 @@ const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     field: {
       background: theme.palette.background.paper,
-      height: '52px',
       '& fieldset': {
         border: 0,
       },
+      '& .Mui-focused': {
+        background: theme.palette.background.paper,
+      },
+      '& .MuiInputBase-root': {
+        background: theme.palette.background.paper,
+      },
+      '& .MuiFilledInput-root': {
+        borderRadius: 0,
+      },
     },
   }),
 )
@@ -36,9 +44,10 @@ export function SwarmTextInput({ name, label, password, optional, formik, onChan
         name={name}
         label={label}
         fullWidth
-        variant="outlined"
+        variant="filled"
         className={classes.field}
         defaultValue=""
+        InputProps={{ disableUnderline: true }}
       />
     )
   }
@@ -49,10 +58,11 @@ export function SwarmTextInput({ name, label, password, optional, formik, onChan
       required
       label={label}
       fullWidth
-      variant="outlined"
+      variant="filled"
       className={classes.field}
       defaultValue=""
       onChange={onChange}
+      InputProps={{ disableUnderline: true }}
     />
   )
 }