Translate Badge Modal

src/components/settings/DonateButton.tsx

@@ -67,3 +67,22 @@ export function InviteButton({
         </Button>
     );
 }
+
+export function TranslateButton({
+    className,
+    ...props
+}: Partial<ButtonProps>) {
+    const link = "https://weblate.equicord.org/projects/equicord/";
+    return (
+        <Button
+            {...props}
+            variant="none"
+            size="medium"
+            type="button"
+            onClick={() => VencordNative.native.openExternal(link)}
+            className={className || "vc-translate-button"}
+        >
+            Translate Here
+        </Button>
+    );
+}

src/components/settings/SpecialCard.css

@@ -26,6 +26,18 @@
     background-color: color-mix(in srgb, #c3a3ce 50%, rgb(240 178 240));
 }
 
+.vc-translate-button {
+    overflow: visible !important;
+    color: black;
+    background-color: color-mix(in srgb, #575757 50%, rgb(255, 255, 255));
+}
+
+.vc-translate-button:hover {
+    overflow: visible !important;
+    color: black;
+    background-color: color-mix(in srgb, #575757 50%, rgb(201, 201, 201));
+}
+
 .vc-invite-link {
     width: 16px;
     height: 16px;
@@ -142,4 +154,14 @@
 
 .vc-special-image {
     width: 65%;
+}
+
+.vc-translate-modal-icon {
+    margin: auto;
+    width: 60px;
+}
+
+.vc-translate-modal-paragraph {
+    padding: 12px;
+    text-align: center;
 }

src/plugins/_api/badges/index.tsx

@@ -30,7 +30,7 @@ import { ContextMenuApi, Menu, Toasts, UserStore } from "@webpack/common";
 
 import Plugins, { PluginMeta } from "~plugins";
 
-import { EquicordDonorModal, VencordDonorModal } from "./modals";
+import { EquicordDonorModal, EquicordTranslatorModal, VencordDonorModal } from "./modals";
 
 const CONTRIBUTOR_BADGE = "https://cdn.discordapp.com/emojis/1092089799109775453.png?size=64";
 const EQUICORD_CONTRIBUTOR_BADGE = "https://equicord.org/assets/favicon.png";
@@ -253,7 +253,7 @@ export default definePlugin({
                 ContextMenuApi.openContextMenu(event, () => <BadgeContextMenu badge={badge} />);
             },
             onClick() {
-                return EquicordDonorModal();
+                return badge.tooltip === "Equicord Translator" ? EquicordTranslatorModal() : EquicordDonorModal();
             },
         } satisfies ProfileBadge));
     }

src/plugins/_api/badges/modals.tsx

@@ -9,7 +9,7 @@ import { Flex } from "@components/Flex";
 import { HeadingPrimary } from "@components/Heading";
 import { Heart } from "@components/Heart";
 import { Paragraph } from "@components/Paragraph";
-import { DonateButton } from "@components/settings";
+import { DonateButton, TranslateButton } from "@components/settings";
 import { Margins } from "@utils/margins";
 import { closeModal, ModalContent, ModalFooter, ModalHeader, ModalRoot, openModal } from "@utils/modal";
 
@@ -72,7 +72,6 @@ export function EquicordDonorModal() {
     const modalKey = openModal(props => (
         <ErrorBoundary noop onError={() => {
             closeModal(modalKey);
-            // Will get my own in the future
             VencordNative.native.openExternal("https://github.com/sponsors/thororen1234");
         }}>
             <ModalRoot {...props}>
@@ -123,3 +122,47 @@ export function EquicordDonorModal() {
         </ErrorBoundary>
     ));
 }
+
+export function EquicordTranslatorModal() {
+    const modalKey = openModal(props => (
+        <ErrorBoundary noop onError={() => {
+            closeModal(modalKey);
+        }}>
+            <ModalRoot {...props}>
+                <ModalHeader>
+                    <HeadingPrimary
+                        style={{
+                            width: "100%",
+                            textAlign: "center",
+                            margin: 0
+                        }}
+                    >
+                        <Flex justifyContent="center" alignItems="center" gap="0.5em">
+                            Equicord Translator
+                        </Flex>
+                    </HeadingPrimary>
+                </ModalHeader>
+                <ModalContent>
+                    <Flex>
+                        <img
+                            className="vc-translate-modal-icon"
+                            role="presentation"
+                            src="https://badge.equicord.org/badges/848339671629299742/f8154d5ae343292050cf63dc3a1a4fdda451b602.png"
+                            alt=""
+                        />
+                    </Flex>
+                    <div className="vc-translate-modal-paragraph">
+                        <Paragraph>
+                            Awarded to contributors who expand Equicord’s language support by translating content for the community.
+                        </Paragraph>
+                    </div>
+                </ModalContent>
+                <ModalFooter>
+                    <Flex justifyContent="center" style={{ width: "100%" }}>
+                        <TranslateButton />
+                    </Flex>
+                </ModalFooter>
+            </ModalRoot>
+        </ErrorBoundary>
+    ));
+}

src/utils/constants.ts

@@ -1263,7 +1263,15 @@ export const EquicordDevs = Object.freeze({
     Leon135: {
         name: "Leon135",
         id: 309275452231385088n,
-    }
+    },
+    bbpltergiest: {
+        name: "bbpltergiest",
+        id: 279448683672502274n,
+    },
+    mshl: {
+        name: "m.shl",
+        id: 1025245410224263258n,
+    },
 } satisfies Record<string, Dev>);
 
 // iife so #__PURE__ works correctly