From 6526e46edc6d5d69c900262471bd96f817e6872c Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Sat, 30 Dec 2023 09:19:48 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=83=8F=20Styling=20the=20action=20menu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ComicDetail/ActionMenu/Menu.tsx           | 48 ++++++++++++++-----
 1 file changed, 35 insertions(+), 13 deletions(-)

diff --git a/src/client/components/ComicDetail/ActionMenu/Menu.tsx b/src/client/components/ComicDetail/ActionMenu/Menu.tsx
index 2a68361..1101dbe 100644
--- a/src/client/components/ComicDetail/ActionMenu/Menu.tsx
+++ b/src/client/components/ComicDetail/ActionMenu/Menu.tsx
@@ -27,18 +27,27 @@ export const Menu = (props): ReactElement => {
   }, []);
   //  Actions menu options and handler
   const CVMatchLabel = (
-    <span>
-      <i className="fa-solid fa-wand-magic"></i> Match on ComicVine
+    <span className="inline-flex flex-row items-center gap-2">
+      <div className="w-6 h-6">
+        <i className="icon-[solar--magic-stick-3-bold-duotone] w-6 h-6"></i>
+      </div>
+      <div>Match on ComicVine</div>
     </span>
   );
   const editLabel = (
-    <span>
-      <i className="fa-regular fa-pen-to-square"></i> Edit Metadata
+    <span className="inline-flex flex-row items-center gap-2">
+      <div className="w-6 h-6">
+        <i className="icon-[solar--pen-2-bold-duotone] w-6 h-6"></i>
+      </div>
+      <div>Edit Metadata</div>
     </span>
   );
   const deleteLabel = (
-    <span>
-      <i className="fa-regular fa-trash-alt"></i> Delete Comic
+    <span className="inline-flex flex-row items-center gap-2">
+      <div className="w-6 h-6">
+        <i className="icon-[solar--trash-bin-trash-bold-duotone] w-6 h-6"></i>
+      </div>
+      <div>Delete Comic</div>
     </span>
   );
   const Placeholder = (props) => {
@@ -70,16 +79,22 @@ export const Menu = (props): ReactElement => {
     }
   };
   const customStyles = {
+    menu: (base) => ({
+      ...base,
+      backgroundColor: "rgb(156, 163, 175)",
+    }),
     placeholder: (base) => ({
       ...base,
       color: "black",
     }),
-    option: (base, { data, isDisabled, isFocused, isSelected }) => {
-      return {
-        ...base,
-        backgroundColor: isFocused ? "gray" : "rgb(156, 163, 175)",
-      };
-    },
+    option: (base, { data, isDisabled, isFocused, isSelected }) => ({
+      ...base,
+      backgroundColor: isFocused ? "gray" : "rgb(156, 163, 175)",
+    }),
+    singleValue: (base) => ({
+      ...base,
+      paddingTop: "0.4rem",
+    }),
     control: (base) => ({
       ...base,
       backgroundColor: "rgb(156, 163, 175)",
@@ -91,7 +106,14 @@ export const Menu = (props): ReactElement => {
   return (
     <Select
       components={{ Placeholder }}
-      placeholder={<span>Select Action</span>}
+      placeholder={
+        <span className="inline-flex flex-row items-center gap-2 pt-1">
+          <div className="w-6 h-6">
+            <i className="icon-[solar--cursor-bold-duotone] w-6 h-6"></i>
+          </div>
+          <div>Select An Action</div>
+        </span>
+      }
       styles={customStyles}
       name="actions"
       isSearchable={false}