From 14cdc800c3e2b79e40c2ec3cac2de9a9ae4df2f3 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 12 Jun 2023 21:27:31 +1000
Subject: [PATCH] feat(ui): pedantic mantine select theming

---
 .../common/components/IAIMantineSelect.tsx    | 34 +++++++++++++------
 1 file changed, 24 insertions(+), 10 deletions(-)

diff --git a/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx b/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx
index e5832519a7..82b1042029 100644
--- a/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx
+++ b/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx
@@ -9,32 +9,46 @@ const IAIMantineSelect = (props: IAISelectProps) => {
     <Select
       searchable={searchable}
       styles={() => ({
+        root: {},
         label: {
           color: 'var(--invokeai-colors-base-300)',
           fontWeight: 'normal',
         },
         input: {
           backgroundColor: 'var(--invokeai-colors-base-900)',
-          border: 'none',
+          borderWidth: '2px',
+          borderColor: 'var(--invokeai-colors-base-800)',
           color: 'var(--invokeai-colors-base-100)',
-          fontWeight: 500,
+          fontWeight: 600,
+          '&:hover': { borderColor: 'var(--invokeai-colors-base-700)' },
+          '&:focus': {
+            borderColor: 'var(--invokeai-colors-accent-600)',
+          },
         },
         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)',
+          backgroundColor: 'var(--invokeai-colors-base-800)',
+          color: 'var(--invokeai-colors-base-200)',
+          '&[data-hovered]': {
+            color: 'var(--invokeai-colors-base-100)',
+            backgroundColor: 'var(--invokeai-colors-base-750)',
+          },
+          '&[data-active]': {
+            backgroundColor: 'var(--invokeai-colors-base-750)',
+            '&:hover': {
+              color: 'var(--invokeai-colors-base-100)',
+              backgroundColor: 'var(--invokeai-colors-base-750)',
+            },
           },
           '&[data-selected]': {
-            color: 'var(--invokeai-colors-base-300)',
+            color: 'var(--invokeai-colors-base-50)',
             backgroundColor: 'var(--invokeai-colors-accent-750)',
-            fontWeight: 500,
-            ':hover': {
-              backgroundColor: 'var(--invokeai-colors-accent-750)',
+            fontWeight: 600,
+            '&:hover': {
+              backgroundColor: 'var(--invokeai-colors-accent-700)',
             },
           },
         },