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 = ( - - Match on ComicVine + +
+ +
+
Match on ComicVine
); const editLabel = ( - - Edit Metadata + +
+ +
+
Edit Metadata
); const deleteLabel = ( - - Delete Comic + +
+ +
+
Delete Comic
); 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 (