🔧 Fixed the styling of the actions menu dropdown

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: "match-on-comic-vine", label: CVMatchLabel },
-    { value: "edit-metdata", label: "Edit Metadata" },
+    { value: "edit-metdata", label: editLabel },
-    { value: "delete-comic", label: "Delete Comic" },
+    { 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">
+              <div className="column is-one-fifth is-narrow is-size-7">
-                  <Select
+                <Select
-                    className="basic-single"
+                  className="basic-single"
-                    classNamePrefix="select"
+                  classNamePrefix="select"
-                    defaultValue={actionOptions[0]}
+                  defaultValue={actionOptions[0]}
-                    name="color"
+                  name="color"
-                    isSearchable={false}
+                  isSearchable={false}
-                    options={actionOptions}
+                  options={actionOptions}
-                    onChange={handleActionSelection}
+                  onChange={handleActionSelection}
-                  />
+                />
-                  </div>
+              </div>
             </div>
 
             {isComicBookMetadataAvailable ? <MetadataTabGroup /> : null}