diff --git a/src/core/client.mjs b/src/core/client.mjs index 61cbe2c..afe1a82 100644 --- a/src/core/client.mjs +++ b/src/core/client.mjs @@ -53,6 +53,7 @@ export default async (api, db) => { _notionTheme = notionTheme; const msg = { namespace: "notion-enhancer", + iconStyle: menuButtonIconStyle, mode: notionTheme, }; $menuFrame?.contentWindow.postMessage(msg, "*"); diff --git a/src/core/menu/components.mjs b/src/core/menu/components.mjs index be6c77e..62d4f73 100644 --- a/src/core/menu/components.mjs +++ b/src/core/menu/components.mjs @@ -29,10 +29,9 @@ function SidebarSection({}, ...children) { function SidebarButton({ icon, ...props }, ...children) { const { html } = globalThis.__enhancerApi, - iconSize = - icon === "notion-enhancer" - ? "w-[16px] h-[16px] ml-[2px] mr-[10px]" - : "w-[18px] h-[18px] ml-px mr-[9px]", + iconSize = icon.startsWith("notion-enhancer") + ? "w-[17px] h-[17px] ml-[1.5px] mr-[9.5px]" + : "w-[18px] h-[18px] ml-px mr-[9px]", $el = html`<${props.href ? "a" : "button"} class="flex select-none cursor-pointer w-full items-center py-[5px] px-[15px] text-[14px] last:mb-[12px] diff --git a/src/core/menu/menu.mjs b/src/core/menu/menu.mjs index e587e9c..c473162 100644 --- a/src/core/menu/menu.mjs +++ b/src/core/menu/menu.mjs @@ -14,7 +14,7 @@ import { } from "./components.mjs"; let renderStarted; -const render = async () => { +const render = async (iconStyle) => { const { html, getCore } = globalThis.__enhancerApi; if (!html || !getCore || renderStarted) return; renderStarted = true; @@ -24,7 +24,10 @@ const render = async () => { const $sidebar = html`<${Sidebar}> ${[ "notion-enhancer", - { icon: "notion-enhancer", title: "Welcome" }, + { + icon: `notion-enhancer${iconStyle === "Monochrome" ? "?mask" : ""}`, + title: "Welcome", + }, { icon: "message-circle", title: "Community", @@ -94,7 +97,7 @@ window.addEventListener("message", async (event) => { // load stylesheets from enabled themes await import("../../load.mjs"); // wait for api globals to be available - requestIdleCallback(render); + requestIdleCallback(() => render(event.data?.iconStyle)); }); useState(["theme"], ([mode]) => { if (mode === "dark") document.body.classList.add("dark");