From ac51ad1a678d9d8c4d0e76890bd17106836ec052 Mon Sep 17 00:00:00 2001
From: Nayam Amarshe <25067102+NayamAmarshe@users.noreply.github.com>
Date: Wed, 28 Sep 2022 10:04:17 +0530
Subject: [PATCH] Fixed dropdown style

---
 renderer/components/LeftPaneSteps.jsx | 22 +++++++++++++++++-----
 renderer/styles/globals.css           |  9 ++++++---
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/renderer/components/LeftPaneSteps.jsx b/renderer/components/LeftPaneSteps.jsx
index c0b0c61..ea97a90 100644
--- a/renderer/components/LeftPaneSteps.jsx
+++ b/renderer/components/LeftPaneSteps.jsx
@@ -26,6 +26,12 @@ function LeftPaneSteps(props) {
     },
   };
 
+  const modelOptions = [
+    { label: "General Photo", value: "realesrgan-x4plus" },
+    { label: "Digital Art", value: "realesrgan-x4plus-anime" },
+    { label: "Sharpen Image", value: "models-DF2K" },
+  ];
+
   return (
     <div className="animate-step-in animate flex h-screen flex-col gap-7 overflow-auto p-5">
       {/* BATCH OPTION */}
@@ -71,11 +77,7 @@ function LeftPaneSteps(props) {
         <p className="mb-2 text-sm text-white/60">Select Upscaling Type</p>
 
         <Select
-          options={[
-            { label: "General Photo", value: "realesrgan-x4plus" },
-            { label: "Digital Art", value: "realesrgan-x4plus-anime" },
-            { label: "Sharpen Image", value: "models-DF2K" },
-          ]}
+          options={modelOptions}
           components={{
             IndicatorSeparator: () => null,
             DropdownIndicator: () => null,
@@ -83,6 +85,16 @@ function LeftPaneSteps(props) {
           onChange={props.handleModelChange}
           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,
diff --git a/renderer/styles/globals.css b/renderer/styles/globals.css
index 9de84fd..d35f783 100644
--- a/renderer/styles/globals.css
+++ b/renderer/styles/globals.css
@@ -52,10 +52,13 @@
     @apply w-40 text-black;
   }
   .react-select-container .react-select__control {
-    @apply bg-gradient-white rounded-lg p-1;
+    @apply bg-gradient-white cursor-pointer rounded-lg p-1;
   }
-  .react-select {
-    @apply bg-red-500;
+  .react-select-container .react-select__menu {
+    @apply rounded-lg bg-slate-300 p-1;
+  }
+  .react-select-container .react-select__option {
+    @apply cursor-pointer rounded-md;
   }
 }