From c098912d6e88640d743b2469b388fd78b4fd0b0e Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Fri, 3 Sep 2021 14:23:56 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Fixed=20the=20styling=20of=20the?=
 =?UTF-8?q?=20actions=20menu=20dropdown?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/components/ComicDetail.tsx | 73 +++++++++++++++++++++------
 1 file changed, 57 insertions(+), 16 deletions(-)

diff --git a/src/client/components/ComicDetail.tsx b/src/client/components/ComicDetail.tsx
index deb9cc9..18f2de9 100644
--- a/src/client/components/ComicDetail.tsx
+++ b/src/client/components/ComicDetail.tsx
@@ -251,10 +251,53 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
   }
 
   //  actions menu options and handler
+  const CVMatchLabel = (
+    <span>
+      <i className="fas fa-magic"></i> Match on ComicVine{" "}
+    </span>
+  );
+
+  const editLabel = (
+    <span>
+      <i className="fas fa-pencil-alt"></i> Edit Metadata{" "}
+    </span>
+  );
+  const deleteLabel = (
+    <span>
+      <i className="fas fa-trash-alt"></i> Delete Comic{" "}
+    </span>
+  );
+  const customStyles = {
+    control: base => ({
+        ...base,
+        minHeight: 35
+    }),
+    dropdownIndicator: base => ({
+        ...base,
+        padding: 4
+    }),
+    clearIndicator: base => ({
+        ...base,
+        padding: 4
+    }),
+    multiValue: base => ({
+        ...base,
+        backgroundColor: variables.colorPrimaryLighter
+    }),
+    valueContainer: base => ({
+        ...base,
+        padding: '0px 6px'
+    }),
+    input: base => ({
+        ...base,
+        margin: 0,
+        padding: 0
+    })
+};
   const actionOptions = [
-    { value: "match-on-comic-vine", label: "Match on Comic Vine" },
-    { value: "edit-metdata", label: "Edit Metadata" },
-    { value: "delete-comic", label: "Delete Comic" },
+    { value: "match-on-comic-vine", label: CVMatchLabel },
+    { value: "edit-metdata", label: editLabel },
+    { value: "delete-comic", label: deleteLabel },
   ];
   const handleActionSelection = (action) => {
     switch (action.value) {
@@ -294,21 +337,19 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
                     updatedAt={comicBookDetailData.updatedAt}
                   />
                 )}
-
-                
               </div>
               {/* action dropdown */}
-              <div className="column is-one-quarter is-narrow">
-                  <Select
-                    className="basic-single"
-                    classNamePrefix="select"
-                    defaultValue={actionOptions[0]}
-                    name="color"
-                    isSearchable={false}
-                    options={actionOptions}
-                    onChange={handleActionSelection}
-                  />
-                  </div>
+              <div className="column is-one-fifth is-narrow is-size-7">
+                <Select
+                  className="basic-single"
+                  classNamePrefix="select"
+                  defaultValue={actionOptions[0]}
+                  name="color"
+                  isSearchable={false}
+                  options={actionOptions}
+                  onChange={handleActionSelection}
+                />
+              </div>
             </div>
 
             {isComicBookMetadataAvailable ? <MetadataTabGroup /> : null}