From 5e968c1c2bc73c07074d7c2311e35ee457cad229 Mon Sep 17 00:00:00 2001
From: thororen1234 <78185467+thororen1234@users.noreply.github.com>
Date: Tue, 25 Nov 2025 11:23:37 -0500
Subject: [PATCH] UserPFP & UsrBG: Update Settings Components

---
 .../bannersEverywhere/index.tsx               |  7 +-----
 src/equicordplugins/fullVcPfp/index.tsx       |  5 -----
 src/equicordplugins/userpfp/index.tsx         | 11 +++++-----
 src/equicordplugins/userpfp/styles.css        |  8 +++++++
 src/plugins/usrbg/index.tsx                   | 22 ++++++++++++-------
 src/plugins/usrbg/styles.css                  |  4 ++++
 6 files changed, 33 insertions(+), 24 deletions(-)
 create mode 100644 src/plugins/usrbg/styles.css

diff --git a/src/equicordplugins/bannersEverywhere/index.tsx b/src/equicordplugins/bannersEverywhere/index.tsx
index bbc40447b..1ddb255d8 100644
--- a/src/equicordplugins/bannersEverywhere/index.tsx
+++ b/src/equicordplugins/bannersEverywhere/index.tsx
@@ -10,17 +10,12 @@ import { definePluginSettings } from "@api/Settings";
 import { disableStyle, enableStyle } from "@api/Styles";
 import usrbg from "@plugins/usrbg";
 import { Devs } from "@utils/constants";
-import definePlugin, { OptionType, Plugin } from "@utils/types";
+import definePlugin, { OptionType } from "@utils/types";
 import { User } from "@vencord/discord-types";
 import { findStoreLazy } from "@webpack";
 
 import style from "./style.css?managed";
 
-interface iUSRBG extends Plugin {
-    userHasBackground(userId: string);
-    getImageUrl(userId: string): string | null;
-}
-
 interface Nameplate {
     imgAlt: string;
     palette: {
diff --git a/src/equicordplugins/fullVcPfp/index.tsx b/src/equicordplugins/fullVcPfp/index.tsx
index 3c824dfab..924245150 100644
--- a/src/equicordplugins/fullVcPfp/index.tsx
+++ b/src/equicordplugins/fullVcPfp/index.tsx
@@ -13,11 +13,6 @@ import { IconUtils, UserStore } from "@webpack/common";
 
 import style from "./style.css?managed";
 
-interface iUSRBG extends Plugin {
-    userHasBackground(userId: string);
-    getImageUrl(userId: string): string | null;
-}
-
 export default definePlugin({
     name: "FullVCPFP",
     description: "Makes avatars take up the entire vc tile",
diff --git a/src/equicordplugins/userpfp/index.tsx b/src/equicordplugins/userpfp/index.tsx
index 8f66e73a0..ca3d41d42 100644
--- a/src/equicordplugins/userpfp/index.tsx
+++ b/src/equicordplugins/userpfp/index.tsx
@@ -9,6 +9,8 @@ import "./styles.css";
 import { definePluginSettings } from "@api/Settings";
 import { classNameFactory } from "@api/Styles";
 import { Button } from "@components/Button";
+import { Flex } from "@components/Flex";
+import { Heart } from "@components/Heart";
 import { Devs, EquicordDevs } from "@utils/constants";
 import { openInviteModal } from "@utils/discord";
 import definePlugin, { OptionType } from "@utils/types";
@@ -45,7 +47,7 @@ export default definePlugin({
     authors: [EquicordDevs.nexpid, Devs.thororen],
     settings,
     settingsAboutComponent: () => (
-        <>
+        <Flex className={cl("settings")}>
             <Button
                 variant="link"
                 className={cl("settings-button")}
@@ -53,15 +55,14 @@ export default definePlugin({
             >
                 Join UserPFP Server
             </Button>
-            <br />
             <Button
-                variant="link"
+                variant="secondary"
                 className={cl("settings-button")}
                 onClick={() => VencordNative.native.openExternal(DONO_URL)}
             >
-                Support UserPFP here
+                Support UserPFP here <Heart className={cl("settings-heart")} />
             </Button>
-        </>
+        </Flex>
     ),
     patches: [
         {
diff --git a/src/equicordplugins/userpfp/styles.css b/src/equicordplugins/userpfp/styles.css
index c0905b981..80d54852c 100644
--- a/src/equicordplugins/userpfp/styles.css
+++ b/src/equicordplugins/userpfp/styles.css
@@ -1,4 +1,12 @@
+.vc-userpfp-settings {
+    flex-direction: row;
+}
+
 .vc-userpfp-settings-button {
     width: 100%;
     height: 50px;
+}
+
+.vc-userpfp-settings-heart {
+    margin-left: 6px;
 }
\ No newline at end of file
diff --git a/src/plugins/usrbg/index.tsx b/src/plugins/usrbg/index.tsx
index 18646caa0..2d97b02ef 100644
--- a/src/plugins/usrbg/index.tsx
+++ b/src/plugins/usrbg/index.tsx
@@ -16,11 +16,15 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import "./styles.css";
+
 import { definePluginSettings, Settings } from "@api/Settings";
-import { LinkButton } from "@components/Button";
+import { classNameFactory } from "@api/Styles";
+import { Button } from "@components/Button";
 import { Devs } from "@utils/constants";
 import definePlugin, { OptionType } from "@utils/types";
 
+const cl = classNameFactory("vc-usrbg-");
 const API_URL = "https://usrbg.is-hardly.online/users";
 
 interface UsrbgApiReturn {
@@ -75,13 +79,15 @@ export default definePlugin({
 
     data: null as UsrbgApiReturn | null,
 
-    settingsAboutComponent: () => {
-        return (
-            <LinkButton href="https://github.com/AutumnVN/usrbg#how-to-request-your-own-usrbg-banner" variant="primary">
-                Get your own USRBG banner
-            </LinkButton>
-        );
-    },
+    settingsAboutComponent: () => (
+        <Button
+            variant="link"
+            className={cl("settings-button")}
+            onClick={() => VencordNative.native.openExternal("https://github.com/AutumnVN/usrbg#how-to-request-your-own-usrbg-banner")}
+        >
+            Get your own USRBG banner
+        </Button>
+    ),
 
     getVoiceBackgroundStyles({ className, participantUserId }: any) {
         if (className.includes("tile_")) {
diff --git a/src/plugins/usrbg/styles.css b/src/plugins/usrbg/styles.css
new file mode 100644
index 000000000..5afda6412
--- /dev/null
+++ b/src/plugins/usrbg/styles.css
@@ -0,0 +1,4 @@
+.vc-usrbg-settings-button {
+    width: 100%;
+    height: 50px;
+}
\ No newline at end of file