partial: autocomplete and theme

new-lamassu-admin/src/components/SearchBox.jsx

@@ -52,7 +52,7 @@ const SearchBox = memo(
         clearOnEscape
         multiple
         filterSelectedOptions
-        getOptionSelected={(option, value) => option.type === value.type}
+        isOptionEqualToValue={(option, value) => option.type === value.type}
         PaperComponent={({ children }) => (
           <Paper elevation={0} className={classes.popup}>
             <div className={classes.separator} />

new-lamassu-admin/src/components/inputs/base/Autocomplete.jsx

@@ -84,7 +84,7 @@ const Autocomplete = ({
       disableClearable
       ChipProps={{ onDelete: null }}
       clearOnEscape
-      getOptionSelected={R.eqProps(valueProp)}
+      isOptionEqualToValue={R.eqProps(valueProp)}
       {...props}
       renderInput={params => {
         return (
@@ -102,7 +102,7 @@ const Autocomplete = ({
       }}
       renderOption={(iprops, props) => {
         if (!props.warning && !props.warningMessage)
-          return R.path([labelProp])(props)
+          return <li {...iprops}>{R.path([labelProp])(props)}</li>
 
         const warningColors = {
           clean: spring4,
@@ -119,6 +119,7 @@ const Autocomplete = ({
           />
         )
 
+        console.log('props.warningMessage: ', props)
         return (
           <li {...iprops}>
             <Box

new-lamassu-admin/src/styling/theme.js

@@ -39,11 +39,12 @@ let theme = createTheme({
   },
 })
 
-theme = createTheme({
+theme = createTheme(theme, {
   components: {
     MuiTypography: {
       styleOverrides: {
-        root: { ...p }
+        root: { ...p },
+        body1: { ...p },
       }
     },
     MuiButtonBase: {
@@ -98,6 +99,21 @@ theme = createTheme({
         }
       }
     },
+    MuiMenuItem: {
+      styleOverrides: {
+        root: {
+          '&:hover': {
+            backgroundColor: subheaderColor
+          },
+          '&.Mui-selected': {
+            '&:hover': {
+              backgroundColor: subheaderColor
+            },
+            backgroundColor: subheaderColor
+          }
+        }
+      }
+    },
     MuiAutocomplete: {
       styleOverrides: {
         root: {
@@ -107,9 +123,12 @@ theme = createTheme({
           padding: `6px 16px`
         },
         option: {
-          '&[data-focus="true"]': {
+          '&.Mui-focused': {
             backgroundColor: subheaderColor
-          }
+          },
+          '&[aria-selected="true"]': {
+            backgroundColor: `${subheaderColor} !important`
+          },
         },
         paper: {
           color: fontColor,