UserPFP & UsrBG: Update Settings Components

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: {

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",

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: [
         {

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;
 }

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_")) {

src/plugins/usrbg/styles.css

@@ -0,0 +1,4 @@
+.vc-usrbg-settings-button {
+    width: 100%;
+    height: 50px;
+}