frishi/threetwo
1
0
Fork 0
Code Issues 9 Pull Requests 6 Actions Packages Projects Releases 2 Wiki Activity

🃏 Styling the action menu

Browse Source
This commit is contained in:
Rishi Ghan
2023-12-30 09:19:48 -05:00
parent a33ebf542f
commit 6526e46edc
1 changed files with 35 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/client/components/ComicDetail/ActionMenu/Menu.tsx
View File

@@ -27,18 +27,27 @@ export const Menu = (props): ReactElement => {
}, []); }, []);
// Actions menu options and handler // Actions menu options and handler
const CVMatchLabel = ( const CVMatchLabel = (
<span> <span className="inline-flex flex-row items-center gap-2">
<i className="fa-solid fa-wand-magic"></i> Match on ComicVine <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> </span>
); );
const editLabel = ( const editLabel = (
<span> <span className="inline-flex flex-row items-center gap-2">
<i className="fa-regular fa-pen-to-square"></i> Edit Metadata <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> </span>
); );
const deleteLabel = ( const deleteLabel = (
<span> <span className="inline-flex flex-row items-center gap-2">
<i className="fa-regular fa-trash-alt"></i> Delete Comic <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> </span>
); );
const Placeholder = (props) => { const Placeholder = (props) => {
@@ -70,16 +79,22 @@ export const Menu = (props): ReactElement => {
} }
}; };
const customStyles = { const customStyles = {
menu: (base) => ({
...base,
backgroundColor: "rgb(156, 163, 175)",
}),
placeholder: (base) => ({ placeholder: (base) => ({
...base, ...base,
color: "black", color: "black",
}), }),
option: (base, { data, isDisabled, isFocused, isSelected }) => { option: (base, { data, isDisabled, isFocused, isSelected }) => ({
return { ...base,
...base, backgroundColor: isFocused ? "gray" : "rgb(156, 163, 175)",
backgroundColor: isFocused ? "gray" : "rgb(156, 163, 175)", }),
}; singleValue: (base) => ({
}, ...base,
paddingTop: "0.4rem",
}),
control: (base) => ({ control: (base) => ({
...base, ...base,
backgroundColor: "rgb(156, 163, 175)", backgroundColor: "rgb(156, 163, 175)",
@@ -91,7 +106,14 @@ export const Menu = (props): ReactElement => {
return ( return (
<Select <Select
components={{ Placeholder }} 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} styles={customStyles}
name="actions" name="actions"
isSearchable={false} isSearchable={false}