diff --git a/src/client/components/ComicDetail.tsx b/src/client/components/ComicDetail.tsx index 18f2de9..7b2f5c3 100644 --- a/src/client/components/ComicDetail.tsx +++ b/src/client/components/ComicDetail.tsx @@ -6,7 +6,7 @@ import ComicVineSearchForm from "./ComicVineSearchForm"; import AcquisitionPanel from "./AcquisitionPanel"; import DownloadsPanel from "./DownloadsPanel"; import SlidingPane from "react-sliding-pane"; -import Select from "react-select"; +import Select, { components } from "react-select"; import { css } from "@emotion/react"; import "react-sliding-pane/dist/react-sliding-pane.css"; @@ -253,52 +253,29 @@ export const ComicDetail = ({}: ComicDetailProps): 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 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 Placeholder = (props) => { + return ; + }; const actionOptions = [ { value: "match-on-comic-vine", label: CVMatchLabel }, { value: "edit-metdata", label: editLabel }, { value: "delete-comic", label: deleteLabel }, ]; + const handleActionSelection = (action) => { switch (action.value) { case "match-on-comic-vine": @@ -343,8 +320,13 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {