From 0f29eab3ea668b4d1dca39bee827b3e5e938d97d Mon Sep 17 00:00:00 2001
From: thororen <78185467+thororen1234@users.noreply.github.com>
Date: Mon, 8 Sep 2025 20:03:12 -0400
Subject: [PATCH] MemberCount: use circle svg instead of css hacks (#3653)

fixes some deformations
---
 src/plugins/memberCount/CircleIcon.tsx  | 17 +++++++++++++++++
 src/plugins/memberCount/MemberCount.tsx |  5 +++--
 src/plugins/memberCount/index.tsx       |  1 -
 src/plugins/memberCount/style.css       | 23 +++++++++++------------
 4 files changed, 31 insertions(+), 15 deletions(-)
 create mode 100644 src/plugins/memberCount/CircleIcon.tsx

diff --git a/src/plugins/memberCount/CircleIcon.tsx b/src/plugins/memberCount/CircleIcon.tsx
new file mode 100644
index 00000000..bf6604a4
--- /dev/null
+++ b/src/plugins/memberCount/CircleIcon.tsx
@@ -0,0 +1,17 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2025 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+export function CircleIcon({ className }: { className?: string; }) {
+    return (
+        <svg viewBox="0 0 24 24" className={className}>
+            <circle
+                cx="12"
+                cy="12"
+                r="8"
+            />
+        </svg>
+    );
+}
diff --git a/src/plugins/memberCount/MemberCount.tsx b/src/plugins/memberCount/MemberCount.tsx
index 02033886..6887af51 100644
--- a/src/plugins/memberCount/MemberCount.tsx
+++ b/src/plugins/memberCount/MemberCount.tsx
@@ -9,6 +9,7 @@ import { isObjectEmpty } from "@utils/misc";
 import { ChannelStore, PermissionsBits, PermissionStore, SelectedChannelStore, Tooltip, useEffect, useStateFromStores, VoiceStateStore } from "@webpack/common";
 
 import { ChannelMemberStore, cl, GuildMemberCountStore, numberFormat, settings, ThreadMemberListStore } from ".";
+import { CircleIcon } from "./CircleIcon";
 import { OnlineMemberCountStore } from "./OnlineMemberCountStore";
 import { VoiceIcon } from "./VoiceIcon";
 
@@ -80,7 +81,7 @@ export function MemberCount({ isTooltip, tooltipGuildId }: { isTooltip?: true; t
             <Tooltip text={`${formattedOnlineCount} online in this channel`} position="bottom">
                 {props => (
                     <div {...props} className={cl("container")}>
-                        <span className={cl("online-dot")} />
+                        <CircleIcon className={cl("online-count")} />
                         <span className={cl("online")}>{formattedOnlineCount}</span>
                     </div>
                 )}
@@ -88,7 +89,7 @@ export function MemberCount({ isTooltip, tooltipGuildId }: { isTooltip?: true; t
             <Tooltip text={`${numberFormat(totalCount)} total server members`} position="bottom">
                 {props => (
                     <div {...props} className={cl("container")}>
-                        <span className={cl("total-dot")} />
+                        <CircleIcon className={cl("total-count")} />
                         <span className={cl("total")}>{numberFormat(totalCount)}</span>
                     </div>
                 )}
diff --git a/src/plugins/memberCount/index.tsx b/src/plugins/memberCount/index.tsx
index bb48eedb..e2d78e2b 100644
--- a/src/plugins/memberCount/index.tsx
+++ b/src/plugins/memberCount/index.tsx
@@ -36,7 +36,6 @@ export const ThreadMemberListStore = findStoreLazy("ThreadMemberListStore") as F
     getMemberListSections(channelId?: string): { [sectionId: string]: { sectionId: string; userIds: string[]; }; };
 };
 
-
 export const settings = definePluginSettings({
     toolTip: {
         type: OptionType.BOOLEAN,
diff --git a/src/plugins/memberCount/style.css b/src/plugins/memberCount/style.css
index 2b0e4400..009e7d10 100644
--- a/src/plugins/memberCount/style.css
+++ b/src/plugins/memberCount/style.css
@@ -18,6 +18,7 @@
     flex-wrap: wrap;
     margin-top: 1em;
     padding-inline: 1em;
+    line-height: 1.2em;
 }
 
 .vc-membercount-container {
@@ -38,20 +39,18 @@
     color: var(--color-voice);
 }
 
-.vc-membercount-online-dot {
-    background-color: var(--color-online);
-    display: inline-block;
-    width: 12px;
-    height: 12px;
-    border-radius: 50%;
+.vc-membercount-online-count {
+    fill: var(--status-online);
+    width: 18px;
+    height: 18px;
 }
 
-.vc-membercount-total-dot {
-    display: inline-block;
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    border: 3px solid var(--color-total);
+.vc-membercount-total-count {
+    fill: none;
+    stroke: var(--status-offline);
+    stroke-width: 4px;
+    width: 15px;
+    height: 15px;
 }
 
 .vc-membercount-voice-icon {