Improve UI consistency of Catalog filters

Signed-off-by: Tyler Davis <tylerd@canva.com>

plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.tsx

@@ -63,7 +63,10 @@ export type CatalogReactEntityAutocompletePickerClassKey = 'root' | 'label';
 const useStyles = makeStyles(
   {
     root: {},
-    label: {},
+    label: {
+      textTransform: 'none',
+      fontWeight: 'bold',
+    },
   },
   { name: 'CatalogReactEntityAutocompletePicker' },
 );

plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePickerInput.tsx

@@ -14,14 +14,17 @@
  * limitations under the License.
  */
 import TextField, { TextFieldProps } from '@material-ui/core/TextField';
-import { makeStyles } from '@material-ui/core/styles';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import React from 'react';
 import classnames from 'classnames';
 
 const useStyles = makeStyles(
-  {
-    input: {},
-  },
+  (theme: Theme) =>
+    createStyles({
+      input: {
+        backgroundColor: theme.palette.background.paper,
+      },
+    }),
   {
     name: 'CatalogReactEntityAutocompletePickerInput',
   },

plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx

@@ -25,7 +25,7 @@ import FormControlLabel from '@material-ui/core/FormControlLabel';
 import TextField from '@material-ui/core/TextField';
 import Typography from '@material-ui/core/Typography';
 import Tooltip from '@material-ui/core/Tooltip';
-import { makeStyles } from '@material-ui/core/styles';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import CheckBoxIcon from '@material-ui/icons/CheckBox';
 import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
@@ -47,17 +47,23 @@ import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 export type CatalogReactEntityOwnerPickerClassKey = 'input';
 
 const useStyles = makeStyles(
-  {
-    root: {},
-    label: {},
-    input: {},
-    fullWidth: { width: '100%' },
-    boxLabel: {
-      width: '100%',
-      textOverflow: 'ellipsis',
-      overflow: 'hidden',
-    },
-  },
+  (theme: Theme) =>
+    createStyles({
+      root: {},
+      label: {
+        textTransform: 'none',
+        fontWeight: 'bold',
+      },
+      input: {
+        backgroundColor: theme.palette.background.paper,
+      },
+      fullWidth: { width: '100%' },
+      boxLabel: {
+        width: '100%',
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+      },
+    }),
   { name: 'CatalogReactEntityOwnerPicker' },
 );
 

plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.tsx

@@ -20,7 +20,7 @@ import Checkbox from '@material-ui/core/Checkbox';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import TextField from '@material-ui/core/TextField';
 import Typography from '@material-ui/core/Typography';
-import { makeStyles } from '@material-ui/core/styles';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import CheckBoxIcon from '@material-ui/icons/CheckBox';
 import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
@@ -34,11 +34,17 @@ import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 export type CatalogReactEntityProcessingStatusPickerClassKey = 'input';
 
 const useStyles = makeStyles(
-  {
-    root: {},
-    input: {},
-    label: {},
-  },
+  (theme: Theme) =>
+    createStyles({
+      root: {},
+      input: {
+        backgroundColor: theme.palette.background.paper,
+      },
+      label: {
+        textTransform: 'none',
+        fontWeight: 'bold',
+      },
+    }),
   { name: 'CatalogReactEntityProcessingStatusPickerPicker' },
 );