From 3a54a24c70775c0af17263d30e088950ca551e7c Mon Sep 17 00:00:00 2001
From: AutumnVN <htuan03@gmail.com>
Date: Fri, 5 May 2023 09:41:01 -0700
Subject: VencordToolbox: Change img icon to svg (#1059)

Co-authored-by: V <vendicated@riseup.net>
---
 src/plugins/vencordToolbox.tsx       | 141 -----------------------------------
 src/plugins/vencordToolbox/index.css |   7 ++
 src/plugins/vencordToolbox/index.tsx | 141 +++++++++++++++++++++++++++++++++++
 3 files changed, 148 insertions(+), 141 deletions(-)
 delete mode 100644 src/plugins/vencordToolbox.tsx
 create mode 100644 src/plugins/vencordToolbox/index.css
 create mode 100644 src/plugins/vencordToolbox/index.tsx

(limited to 'src')

diff --git a/src/plugins/vencordToolbox.tsx b/src/plugins/vencordToolbox.tsx
deleted file mode 100644
index 939bbd5..0000000
--- a/src/plugins/vencordToolbox.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-/*
- * Vencord, a modification for Discord's desktop app
- * Copyright (c) 2023 Vendicated and contributors
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
-*/
-
-import { openNotificationLogModal } from "@api/Notifications/notificationLog";
-import ErrorBoundary from "@components/ErrorBoundary";
-import { Devs } from "@utils/constants";
-import { LazyComponent } from "@utils/misc";
-import definePlugin from "@utils/types";
-import { findByCode } from "@webpack";
-import { Menu, Popout, useState } from "@webpack/common";
-import type { ReactNode } from "react";
-
-const HeaderBarIcon = LazyComponent(() => findByCode(".HEADER_BAR_BADGE,", ".tooltip"));
-
-function VencordPopout(onClose: () => void) {
-    const pluginEntries = [] as ReactNode[];
-
-    for (const plugin of Object.values(Vencord.Plugins.plugins)) {
-        if (plugin.toolboxActions) {
-            pluginEntries.push(
-                <Menu.MenuGroup
-                    label={plugin.name}
-                    key={`vc-toolbox-${plugin.name}`}
-                >
-                    {Object.entries(plugin.toolboxActions).map(([text, action]) => {
-                        const key = `vc-toolbox-${plugin.name}-${text}`;
-
-                        return (
-                            <Menu.MenuItem
-                                id={key}
-                                key={key}
-                                label={text}
-                                action={action}
-                            />
-                        );
-                    })}
-                </Menu.MenuGroup>
-            );
-        }
-    }
-
-    return (
-        <Menu.Menu
-            navId="vc-toolbox"
-            onClose={onClose}
-        >
-            <Menu.MenuItem
-                id="vc-toolbox-notifications"
-                label="Open Notification Log"
-                action={openNotificationLogModal}
-            />
-            <Menu.MenuItem
-                id="vc-toolbox-quickcss"
-                label="Open QuickCSS"
-                action={() => VencordNative.quickCss.openEditor()}
-            />
-            {...pluginEntries}
-        </Menu.Menu>
-    );
-}
-
-function VencordPopoutIcon() {
-    return (
-        <img
-            width={24}
-            height={24}
-            src="https://raw.githubusercontent.com/Vencord/Website/main/public/assets/favicon.png"
-            alt="Vencord Toolbox"
-        />
-    );
-}
-
-function VencordPopoutButton() {
-    const [show, setShow] = useState(false);
-
-    return (
-        <Popout
-            position="bottom"
-            align="right"
-            animation={Popout.Animation.NONE}
-            shouldShow={show}
-            onRequestClose={() => setShow(false)}
-            renderPopout={() => VencordPopout(() => setShow(false))}
-        >
-            {(_, { isShown }) => (
-                <HeaderBarIcon
-                    onClick={() => setShow(v => !v)}
-                    tooltip={isShown ? null : "Vencord Toolbox"}
-                    icon={VencordPopoutIcon}
-                    selected={isShown}
-                />
-            )}
-        </Popout>
-    );
-}
-
-function ToolboxFragmentWrapper({ children }: { children: ReactNode[]; }) {
-    children.splice(
-        children.length - 1, 0,
-        <ErrorBoundary noop={true}>
-            <VencordPopoutButton />
-        </ErrorBoundary>
-    );
-
-    return <>{children}</>;
-}
-
-export default definePlugin({
-    name: "VencordToolbox",
-    description: "Adds a button next to the inbox button in the channel header that houses Vencord quick actions",
-    authors: [Devs.Ven],
-
-    patches: [
-        {
-            find: ".mobileToolbar",
-            replacement: {
-                match: /(?<=toolbar:function.{0,100}\()\i.Fragment,/,
-                replace: "$self.ToolboxFragmentWrapper,"
-            }
-        }
-    ],
-
-    ToolboxFragmentWrapper: ErrorBoundary.wrap(ToolboxFragmentWrapper, {
-        fallback: () => <p style={{ color: "red" }}>Failed to render :(</p>
-    })
-});
diff --git a/src/plugins/vencordToolbox/index.css b/src/plugins/vencordToolbox/index.css
new file mode 100644
index 0000000..422e36d
--- /dev/null
+++ b/src/plugins/vencordToolbox/index.css
@@ -0,0 +1,7 @@
+.vc-toolbox-btn svg {
+    color: var(--interactive-normal);
+}
+
+:is(.vc-toolbox-btn:hover, .vc-toolbox-btn[class*="selected"]) svg {
+    color: var(--interactive-active);
+}
diff --git a/src/plugins/vencordToolbox/index.tsx b/src/plugins/vencordToolbox/index.tsx
new file mode 100644
index 0000000..c2bfe6c
--- /dev/null
+++ b/src/plugins/vencordToolbox/index.tsx
@@ -0,0 +1,141 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2023 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import "./index.css";
+
+import { openNotificationLogModal } from "@api/Notifications/notificationLog";
+import ErrorBoundary from "@components/ErrorBoundary";
+import { Devs } from "@utils/constants";
+import { LazyComponent } from "@utils/misc";
+import definePlugin from "@utils/types";
+import { findByCode } from "@webpack";
+import { Menu, Popout, useState } from "@webpack/common";
+import type { ReactNode } from "react";
+
+const HeaderBarIcon = LazyComponent(() => findByCode(".HEADER_BAR_BADGE,", ".tooltip"));
+
+function VencordPopout(onClose: () => void) {
+    const pluginEntries = [] as ReactNode[];
+
+    for (const plugin of Object.values(Vencord.Plugins.plugins)) {
+        if (plugin.toolboxActions) {
+            pluginEntries.push(
+                <Menu.MenuGroup
+                    label={plugin.name}
+                    key={`vc-toolbox-${plugin.name}`}
+                >
+                    {Object.entries(plugin.toolboxActions).map(([text, action]) => {
+                        const key = `vc-toolbox-${plugin.name}-${text}`;
+
+                        return (
+                            <Menu.MenuItem
+                                id={key}
+                                key={key}
+                                label={text}
+                                action={action}
+                            />
+                        );
+                    })}
+                </Menu.MenuGroup>
+            );
+        }
+    }
+
+    return (
+        <Menu.Menu
+            navId="vc-toolbox"
+            onClose={onClose}
+        >
+            <Menu.MenuItem
+                id="vc-toolbox-notifications"
+                label="Open Notification Log"
+                action={openNotificationLogModal}
+            />
+            <Menu.MenuItem
+                id="vc-toolbox-quickcss"
+                label="Open QuickCSS"
+                action={() => VencordNative.quickCss.openEditor()}
+            />
+            {...pluginEntries}
+        </Menu.Menu>
+    );
+}
+
+function VencordPopoutIcon() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" width={24} height={24}>
+            <path fill="currentColor" d="M53 10h7v1h-1v1h-1v1h-1v1h-1v1h-1v1h5v1h-7v-1h1v-1h1v-1h1v-1h1v-1h1v-1h-5m-43 1v32h2v2h2v2h2v2h2v2h2v2h2v2h2v2h2v2h8v-2h2V46h-2v2h-2v2h-4v-2h-2v-2h-2v-2h-2v-2h-2v-2h-2V12m24 0v27h-2v3h4v-6h2v-2h4V12m13 2h5v1h-1v1h-1v1h-1v1h3v1h-5v-1h1v-1h1v-1h1v-1h-3m8 5h1v5h1v-1h1v1h-1v1h1v-1h1v1h-1v3h-1v1h-2v1h-1v1h1v-1h2v-1h1v2h-1v1h-2v1h-1v-1h-1v1h-6v-1h-1v-1h-1v-2h1v1h2v1h3v1h1v-1h-1v-1h-3v-1h-4v-4h1v-2h1v-1h1v-1h1v2h1v1h1v-1h1v1h-1v1h2v-2h1v-2h1v-1h1m-13 4h2v1h-1v4h1v2h1v1h1v1h1v1h4v1h-6v-1h-6v-1h-1v-5h1v-1h1v-2h2m17 3h1v3h-1v1h-1v1h-1v2h-2v-2h2v-1h1v-1h1m1 0h1v3h-1v1h-2v-1h1v-1h1m-30 2v8h-8v32h8v8h32v-8h8v-8H70v8H54V44h16v8h16v-8h-8v-8h-1v1h-7v-1h-2v1h-8v-1" />
+        </svg>
+    );
+}
+
+function VencordPopoutButton() {
+    const [show, setShow] = useState(false);
+
+    return (
+        <Popout
+            position="bottom"
+            align="right"
+            animation={Popout.Animation.NONE}
+            shouldShow={show}
+            onRequestClose={() => setShow(false)}
+            renderPopout={() => VencordPopout(() => setShow(false))}
+        >
+            {(_, { isShown }) => (
+                <HeaderBarIcon
+                    className="vc-toolbox-btn"
+                    onClick={() => setShow(v => !v)}
+                    tooltip={isShown ? null : "Vencord Toolbox"}
+                    icon={VencordPopoutIcon}
+                    selected={isShown}
+                />
+            )}
+        </Popout>
+    );
+}
+
+function ToolboxFragmentWrapper({ children }: { children: ReactNode[]; }) {
+    children.splice(
+        children.length - 1, 0,
+        <ErrorBoundary noop={true}>
+            <VencordPopoutButton />
+        </ErrorBoundary>
+    );
+
+    return <>{children}</>;
+}
+
+export default definePlugin({
+    name: "VencordToolbox",
+    description: "Adds a button next to the inbox button in the channel header that houses Vencord quick actions",
+    authors: [Devs.Ven, Devs.AutumnVN],
+
+    patches: [
+        {
+            find: ".mobileToolbar",
+            replacement: {
+                match: /(?<=toolbar:function.{0,100}\()\i.Fragment,/,
+                replace: "$self.ToolboxFragmentWrapper,"
+            }
+        }
+    ],
+
+    ToolboxFragmentWrapper: ErrorBoundary.wrap(ToolboxFragmentWrapper, {
+        fallback: () => <p style={{ color: "red" }}>Failed to render :(</p>
+    })
+});
-- 
cgit