From 1ed6a622d4e5c747bf3045034c7a036afb8cbad8 Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Sun, 3 Dec 2023 16:02:54 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=9C=20Trying=20dark=20mode=20on=20the?=
 =?UTF-8?q?=20react-select?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/assets/scss/App.scss                  |  5 +++--
 .../components/ComicDetail/ActionMenu/Menu.tsx   | 16 ++++++++++++++--
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/client/assets/scss/App.scss b/src/client/assets/scss/App.scss
index ea111bc..c0fa831 100644
--- a/src/client/assets/scss/App.scss
+++ b/src/client/assets/scss/App.scss
@@ -366,7 +366,7 @@ pre {
 
 // comicvine metadata
 .comicvine-metadata {
-  background-color: #f2f1f9;
+  background-color: #d6cc99;
   padding: 0.8rem;
   border-radius: 0.5rem;
 }
@@ -381,7 +381,8 @@ pre {
 }
 
 .comicInfo-metadata {
-  background-color: #f7ebdd;
+  background-color: #d6cc99;
+  color: #000;
   padding: 0.8rem;
   border-radius: 0.5rem;
 }
diff --git a/src/client/components/ComicDetail/ActionMenu/Menu.tsx b/src/client/components/ComicDetail/ActionMenu/Menu.tsx
index 39bda45..aede5df 100644
--- a/src/client/components/ComicDetail/ActionMenu/Menu.tsx
+++ b/src/client/components/ComicDetail/ActionMenu/Menu.tsx
@@ -69,17 +69,29 @@ export const Menu = (props): ReactElement => {
         break;
     }
   };
+  const customStyles = {
+    option: (base, { data, isDisabled, isFocused, isSelected }) => {
+      return {
+        ...base,
+        backgroundColor: isFocused ? "gray" : "black",
+      };
+    },
+    control: (base) => ({
+      ...base,
+      backgroundColor: "black",
+      border: "1px solid #CCC",
+    }),
+  };
 
   return (
     <Select
-      className="basic-single"
-      classNamePrefix="select"
       components={{ Placeholder }}
       placeholder={
         <span>
           <i className="fa-solid fa-list"></i> Actions
         </span>
       }
+      styles={customStyles}
       name="actions"
       isSearchable={false}
       options={filteredActionOptions}