From 35398672902c1b510dd10a182e605d766d8dfbf9 Mon Sep 17 00:00:00 2001
From: Feenix <25067102+NayamAmarshe@users.noreply.github.com>
Date: Mon, 14 Nov 2022 21:37:39 +0530
Subject: [PATCH] Fixed react-select coloring

---
 renderer/components/LeftPaneSteps.tsx | 38 +++------------------------
 renderer/pages/index.tsx              |  2 +-
 renderer/styles/globals.css           | 27 ++++++++++++++++---
 3 files changed, 27 insertions(+), 40 deletions(-)

diff --git a/renderer/components/LeftPaneSteps.tsx b/renderer/components/LeftPaneSteps.tsx
index f5d053b..4304935 100644
--- a/renderer/components/LeftPaneSteps.tsx
+++ b/renderer/components/LeftPaneSteps.tsx
@@ -33,7 +33,7 @@ function LeftPaneSteps(props) {
   ];
 
   return (
-    <div className="animate-step-in animate flex h-screen flex-col gap-7 overflow-auto p-5">
+    <div className="animate-step-in animate flex h-screen flex-col gap-7 overflow-auto rounded-r-lg p-5">
       {/* BATCH OPTION */}
       <div className="flex flex-row items-center gap-2">
         <input
@@ -87,42 +87,10 @@ function LeftPaneSteps(props) {
             DropdownIndicator: () => null,
           }}
           onChange={props.handleModelChange}
-          className="react-select-container select"
+          className="react-select-container"
           classNamePrefix="react-select"
           defaultValue={modelOptions[0]}
-          theme={(theme) => ({
-            ...theme,
-            colors: {
-              ...theme.colors,
-              primary: "rgb(71 85 105)",
-              primary25: "#f5f5f5",
-              primary50: "#f5f5f5",
-            },
-          })}
-          styles={{
-            input: (provided, state) => ({
-              ...provided,
-              color: "rgb(100 100 100)",
-            }),
-            dropdownIndicator: (provided, state) => ({
-              ...provided,
-              color: "rgb(15 15 15)",
-            }),
-            placeholder: (provided, state) => ({
-              ...provided,
-              color: "rgb(15 15 15)",
-              fontWeight: "500",
-            }),
-            singleValue: (provided, state) => ({
-              ...provided,
-              color: "rgb(15 15 15)",
-              fontWeight: "500",
-            }),
-            menu: (provided, state) => ({
-              ...provided,
-              background: "#f5f5f5",
-            }),
-          }}
+          defaultMenuIsOpen={true}
         />
 
         {props.model !== "models-DF2K" && !props.batchMode && (
diff --git a/renderer/pages/index.tsx b/renderer/pages/index.tsx
index 308accb..11b9262 100644
--- a/renderer/pages/index.tsx
+++ b/renderer/pages/index.tsx
@@ -264,7 +264,7 @@ const Home = () => {
 
   return (
     <div className="flex h-screen w-screen flex-row overflow-hidden bg-base-300">
-      <div className="flex h-screen w-96 flex-col bg-base-100">
+      <div className="flex h-screen w-96 flex-col rounded-r-2xl bg-base-100">
         {((!batchMode && imagePath.length > 0) ||
           (batchMode && batchFolderPath.length > 0)) && (
           <ResetButton resetImagePaths={resetImagePaths} />
diff --git a/renderer/styles/globals.css b/renderer/styles/globals.css
index 1b16d77..ea200d8 100644
--- a/renderer/styles/globals.css
+++ b/renderer/styles/globals.css
@@ -48,17 +48,36 @@
   .step-heading {
     @apply mb-2 font-semibold;
   }
+
   .react-select-container {
-    @apply w-40 text-black;
+    @apply w-40;
   }
   .react-select-container .react-select__control {
-    @apply cursor-pointer rounded-lg p-1;
+    @apply h-12 cursor-pointer rounded-lg !border-0 !border-none !border-transparent bg-primary shadow-none;
   }
+
+  .react-select-container .react-select__control--menu-is-open {
+    @apply bg-primary-focus;
+  }
+
+  .react-select-container .react-select__single-value {
+    @apply text-sm font-semibold uppercase text-primary-content;
+  }
+
+  .react-select-container .react-select__input-container {
+    @apply text-sm font-semibold uppercase text-primary-content;
+  }
+
   .react-select-container .react-select__menu {
-    @apply rounded-lg bg-slate-300 p-1;
+    @apply rounded-lg bg-primary p-1;
   }
+
   .react-select-container .react-select__option {
-    @apply cursor-pointer rounded-md;
+    @apply cursor-pointer rounded-md bg-primary text-slate-50 hover:bg-primary-focus;
+  }
+
+  .react-select-container .react-select__option--is-selected {
+    @apply bg-accent;
   }
 }