style: make select and text input style consistent (#295)

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}>

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 }}
     />
   )
 }