From 78a2add1a57fb7c88091a24efbdb060182e5a3b7 Mon Sep 17 00:00:00 2001
From: Vendicated <vendicated@riseup.net>
Date: Tue, 18 Nov 2025 01:56:23 +0100
Subject: [PATCH] USRBG: improve settings ui

---
 src/components/Button.tsx   | 15 +++++++++++++++
 src/plugins/usrbg/index.tsx |  6 ++++--
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index b3df68aba..b4390c232 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -12,6 +12,7 @@ import type { Button as DiscordButton } from "@vencord/discord-types";
 import type { ComponentPropsWithRef } from "react";
 
 import { OpenExternalIcon } from "./Icons";
+import { Link } from "./Link";
 
 const btnCls = classNameFactory("vc-btn-");
 const textBtnCls = classNameFactory("vc-text-btn-");
@@ -25,6 +26,11 @@ export type ButtonProps = ComponentPropsWithRef<"button"> & {
     size?: ButtonSize;
 };
 
+export type LinkButtonProps = ComponentPropsWithRef<"a"> & {
+    size?: ButtonSize;
+    variant?: ButtonVariant;
+};
+
 export function Button({ variant = "primary", size = "medium", children, className, ...restProps }: ButtonProps) {
     return (
         <button data-mana-component="button" className={classes(btnCls("base", variant, size), className)} {...restProps}>
@@ -34,6 +40,15 @@ export function Button({ variant = "primary", size = "medium", children, classNa
     );
 }
 
+export function LinkButton({ variant = "link", size = "medium", className, children, ...restProps }: LinkButtonProps) {
+    return (
+        <Link data-mana-component="button" className={classes(btnCls("base", variant, size), className)} {...restProps}>
+            {children}
+            <OpenExternalIcon className={btnCls("link-icon")} />
+        </Link>
+    );
+}
+
 export type TextButtonVariant = "primary" | "secondary" | "danger" | "link";
 
 export type TextButtonProps = ComponentPropsWithRef<"button"> & {
diff --git a/src/plugins/usrbg/index.tsx b/src/plugins/usrbg/index.tsx
index df823102a..6673dd40d 100644
--- a/src/plugins/usrbg/index.tsx
+++ b/src/plugins/usrbg/index.tsx
@@ -17,7 +17,7 @@
 */
 
 import { definePluginSettings } from "@api/Settings";
-import { Link } from "@components/Link";
+import { LinkButton } from "@components/Button";
 import { Devs } from "@utils/constants";
 import definePlugin, { OptionType } from "@utils/types";
 
@@ -77,7 +77,9 @@ export default definePlugin({
 
     settingsAboutComponent: () => {
         return (
-            <Link href="https://github.com/AutumnVN/usrbg#how-to-request-your-own-usrbg-banner">CLICK HERE TO GET YOUR OWN BANNER</Link>
+            <LinkButton href="https://github.com/AutumnVN/usrbg#how-to-request-your-own-usrbg-banner" variant="primary">
+                Get your own USRBG banner
+            </LinkButton>
         );
     },