From 9cfbea4c25f039fed45d865e66d7ab2dee5c6521 Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Mon, 12 Jun 2023 22:37:05 +1200
Subject: [PATCH] feat: Match styling of Mantine Select with InvokeAI

---
 .../common/components/IAIMantineSelect.tsx    | 38 ++++++++++++++++++-
 .../frontend/web/src/mantine-theme/theme.ts   | 16 --------
 2 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx b/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx
index 8f25e4b197..e5832519a7 100644
--- a/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx
+++ b/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx
@@ -5,7 +5,43 @@ type IAISelectProps = SelectProps;
 
 const IAIMantineSelect = (props: IAISelectProps) => {
   const { searchable = true, ...rest } = props;
-  return <Select searchable={searchable} {...rest} />;
+  return (
+    <Select
+      searchable={searchable}
+      styles={() => ({
+        label: {
+          color: 'var(--invokeai-colors-base-300)',
+          fontWeight: 'normal',
+        },
+        input: {
+          backgroundColor: 'var(--invokeai-colors-base-900)',
+          border: 'none',
+          color: 'var(--invokeai-colors-base-100)',
+          fontWeight: 500,
+        },
+        dropdown: {
+          backgroundColor: 'var(--invokeai-colors-base-800)',
+          borderColor: 'var(--invokeai-colors-base-700)',
+        },
+        item: {
+          color: 'var(--invokeai-colors-base-300)',
+          ':hover': {
+            color: 'var(--invokeai-colors-base-300)',
+            backgroundColor: 'var(--invokeai-colors-accent-750)',
+          },
+          '&[data-selected]': {
+            color: 'var(--invokeai-colors-base-300)',
+            backgroundColor: 'var(--invokeai-colors-accent-750)',
+            fontWeight: 500,
+            ':hover': {
+              backgroundColor: 'var(--invokeai-colors-accent-750)',
+            },
+          },
+        },
+      })}
+      {...rest}
+    />
+  );
 };
 
 export default memo(IAIMantineSelect);
diff --git a/invokeai/frontend/web/src/mantine-theme/theme.ts b/invokeai/frontend/web/src/mantine-theme/theme.ts
index e66d178554..c3af591217 100644
--- a/invokeai/frontend/web/src/mantine-theme/theme.ts
+++ b/invokeai/frontend/web/src/mantine-theme/theme.ts
@@ -3,20 +3,4 @@ import { MantineThemeOverride } from '@mantine/core';
 export const mantineTheme: MantineThemeOverride = {
   colorScheme: 'dark',
   fontFamily: `'InterVariable', sans-serif`,
-  colors: {
-    ocean: [
-      '#dcf5ff',
-      '#afddff',
-      '#80c4fd',
-      '#50acf9',
-      '#2295f6',
-      '#097bdd',
-      '#0060ad',
-      '#00447d',
-      '#00294e',
-      '#000f20',
-    ],
-  },
-  primaryColor: 'ocean',
-  primaryShade: 6,
 };