GlobalBadges: Change Modal Format

src/equicordplugins/globalBadges/badgeComponent.tsx

@@ -10,7 +10,7 @@ import { JSX } from "react";
 import { BadgeModalComponent, openBadgeModal } from "./badgeModal";
 import { settings } from "./settings";
 import { BadgeCache } from "./types";
-import { fetchBadges, serviceMap } from "./utils";
+import { cl, fetchBadges, serviceMap } from "./utils";
 
 export let badgeImages;
 
@@ -63,8 +63,7 @@ export const GlobalBadges = ({ userId }: { userId: string; }) => {
 
     return (
         <div
-            className="vc-global-badges"
-            style={{ alignItems: "center", display: "flex" }}
+            className={cl("badges")}
             onClick={_ => openBadgeModal(UserStore.getUser(userId))}
         >
             {globalBadges}

src/equicordplugins/globalBadges/badgeModal.tsx

@@ -5,8 +5,7 @@
  */
 
 import ErrorBoundary from "@components/ErrorBoundary";
-import { HeadingPrimary } from "@components/Heading";
-import { Paragraph } from "@components/Paragraph";
+import { HeadingTertiary } from "@components/Heading";
 import { ModalContent, ModalRoot, openModal } from "@utils/modal";
 import { User } from "@vencord/discord-types";
 import { React, Tooltip } from "@webpack/common";
@@ -19,9 +18,9 @@ export const BadgeModalComponent = ({ name, img }: { name: string, img: string;
         <Tooltip text={name} >
             {(tooltipProps: any) => (
                 <img
+                    className={cl("modal-badges")}
                     {...tooltipProps}
                     src={img}
-                    style={{ width: "50px", height: "50px", margin: "2px 2px" }}
                 />
             )}
         </Tooltip>
@@ -37,17 +36,16 @@ export function BadgeModal({ user }: { user: User; }) {
                     src={user.getAvatarURL(void 0, 512, true)}
                     alt=""
                 />
-                <HeadingPrimary className={cl("name")}>{user.username}</HeadingPrimary>
+                {badgeImages.length ? (
+                    <HeadingTertiary className={cl("name")}>
+                        {user.username} has {badgeImages.length} global badges
+                    </HeadingTertiary>
+                ) : (
+                    <HeadingTertiary className={cl("name")}>
+                        {user.username} has no global badges
+                    </HeadingTertiary>
+                )}
             </div>
-            {badgeImages.length ? (
-                <Paragraph>
-                    {user.username} has {badgeImages.length} global badges.
-                </Paragraph>
-            ) : (
-                <Paragraph>
-                    {user.username} has no global badges.
-                </Paragraph>
-            )}
             {!!badgeImages.length && (
                 <div className={cl("badges")}>
                     {badgeImages}

src/equicordplugins/globalBadges/index.tsx

@@ -4,6 +4,8 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
+import "./styles.css";
+
 import { addProfileBadge, BadgePosition, ProfileBadge, removeProfileBadge } from "@api/Badges";
 import { Devs, EquicordDevs } from "@utils/constants";
 import definePlugin from "@utils/types";

src/equicordplugins/globalBadges/styles.css

@@ -0,0 +1,54 @@
+.vc-global-badges-badges {
+    align-items: center;
+    display: flex;
+    flex-wrap: nowrap;
+}
+
+.vc-global-badges-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 1em;
+}
+
+.vc-global-badges-name {
+    text-transform: none;
+    flex-grow: 0;
+    background: var(--background-base-lowest);
+    border-radius: 0 9999px 9999px 0;
+    padding: 6px 0.8em 6px 0.5em;
+    font-size: 20px;
+    height: 20px;
+    position: relative;
+    text-wrap: nowrap;
+}
+
+.vc-global-badges-name::before {
+    content: "";
+    display: block;
+    position: absolute;
+    height: 100%;
+    width: 32px;
+    background: var(--background-base-lowest);
+    z-index: -1;
+    left: -32px;
+    top: 0;
+    border-top-left-radius: 9999px;
+    border-bottom-left-radius: 9999px;
+}
+
+.vc-global-badges-avatar {
+    height: 48px;
+    width: 48px;
+    border-radius: 50%;
+}
+
+.vc-global-badges-description {
+    font-size: 16px;
+    margin-left: 6px;
+}
+
+.vc-global-badges-modal-badges {
+    width: 50px;
+    height: 50px;
+    margin: 2px;
+}

src/equicordplugins/globalBadges/utils.ts

@@ -12,7 +12,7 @@ import { BadgeCache } from "./types";
 const cache = new Map<string, BadgeCache>();
 const EXPIRES = 1000 * 60 * 15;
 
-export const cl = classNameFactory("vc-author-modal-");
+export const cl = classNameFactory("vc-global-badges-");
 export const serviceMap = {
     "nekocord": "Nekocord",
     "reviewdb": "ReviewDB",

src/plugins/_api/badges/fixDiscordBadgePadding.css

@@ -1,5 +1,9 @@
 /* the profile popout badge container(s) */
-[class*="container_"] [class*="tags_"] [class*="container_"] {
+[class*="profile_"] [class*="tags_"] [class*="container_"] {
     /* Discord has gap set to 2px instead of 1px, which causes the 12th badge to wrap to a new line. */
     gap: 1px;
+}
+
+[class*="container_"] [class*="tags_"] [class*="container_"] {
+    gap: 1px;
 }