Dark mode refactor (#98)

* 🏗️ Acquisition Panel refactor WIP

* 🔧 Formatted the search query box

* 🔧 Implementing download method

* 🏗️ Refactored the AirDC++ download panel

* 🌜 Initial Dark Mode support

* 🌜 Trying dark mode on the react-select

* Update App.scss

* 🏗️ Migrating Navbar to TailwindCSS

* 🖼️ Added solar icons

* 🔧 Added solar icons

* 🔧 Added code for dark mode toggle

* 🏗️ Wiring up the dark mode toggle

* 🌜 Added Dark mode to the body

* 🏗️ Building out the import page

* 🪑 Cleaning up the table styles

* 🏗️ Cleaned up past imports table

* 🏗️ Refactored Import socket events

* 🏗️ Refactored the card grid on dashboard

* 🏗️ Building variants for Cards

* 🏗️ Added a horizontal medium variant

* 🏗️ Cleaning up forms and cards

* 🔧 Styling form inputs

* 🏗️ Form refactor

* 🔠 Added a monospace font

* 🪑 Refactoring the table

* 🧹 Formatting in connection confirmation panels

* 🏗️ Refactoring table for library

* 🏗️ Added icons and details to metadata

* 🏗️ Cleaned the table further

* 🏗️ Fixed fonts, and comic detail page first draft

* ❌ Removing yarn.lockfile

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}