From 4f28100fb1e0c39c4e61e1bbebd01e6f8727753c Mon Sep 17 00:00:00 2001
From: Tyler Davis <tylerd@canva.com>
Date: Mon, 11 Nov 2024 18:19:51 +1100
Subject: [PATCH] Improve UI consistency of Catalog filters

Signed-off-by: Tyler Davis <tylerd@canva.com>
---
 .../EntityAutocompletePicker.tsx              |  5 +++-
 .../EntityAutocompletePickerInput.tsx         | 11 ++++---
 .../EntityOwnerPicker/EntityOwnerPicker.tsx   | 30 +++++++++++--------
 .../EntityProcessingStatusPicker.tsx          | 18 +++++++----
 4 files changed, 41 insertions(+), 23 deletions(-)

diff --git a/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.tsx b/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.tsx
index 4bd9f100f9..eba4cc3a7a 100644
--- a/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.tsx
+++ b/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' },
 );
diff --git a/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePickerInput.tsx b/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePickerInput.tsx
index 47ef76e8e2..133024330c 100644
--- a/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePickerInput.tsx
+++ b/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',
   },
diff --git a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx
index 565472b152..57bf124bf6 100644
--- a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx
+++ b/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' },
 );
 
diff --git a/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.tsx b/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.tsx
index 76b7aa1885..a2f0c8f729 100644
--- a/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.tsx
+++ b/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' },
 );