From 0b51a8068d5effa8be7911cfce09a96dc86eb080 Mon Sep 17 00:00:00 2001
From: panbread <93918332+Panniku@users.noreply.github.com>
Date: Thu, 15 May 2025 22:24:42 +0400
Subject: [PATCH] fix(serverListIndicators): consistency (#260)

---
 src/plugins/serverListIndicators/index.tsx  | 18 +++++++++++-------
 src/plugins/serverListIndicators/styles.css | 10 ++++++----
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/plugins/serverListIndicators/index.tsx b/src/plugins/serverListIndicators/index.tsx
index e761c84b..3263882a 100644
--- a/src/plugins/serverListIndicators/index.tsx
+++ b/src/plugins/serverListIndicators/index.tsx
@@ -25,7 +25,7 @@ import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs, EquicordDevs } from "@utils/constants";
 import definePlugin, { OptionType } from "@utils/types";
 import { findStoreLazy } from "@webpack";
-import { GuildStore, PresenceStore, RelationshipStore, Tooltip, useStateFromStores } from "@webpack/common";
+import { GuildStore, PresenceStore, RelationshipStore, Text, Tooltip, useStateFromStores } from "@webpack/common";
 
 const enum IndicatorType {
     SERVER = 1 << 0,
@@ -74,9 +74,11 @@ function FriendsIndicator() {
                     </path>
                 </svg>
             }
-            <span id="vc-friendcount-text">{onlineFriendsCount}
-                {!!settings.store.useCompact && <span id="vc-friendcount-text-compact">Friends</span>}
-            </span>
+            <Text
+                variant="text-xs/normal"
+                id="vc-friendcount-text">{onlineFriendsCount}
+            </Text>
+            {!!settings.store.useCompact && <Text variant="text-xs/normal" id="vc-friendcount-text-compact">Friends</Text>}
         </div>
     );
 }
@@ -108,9 +110,11 @@ function ServersIndicator() {
                     </path>
                 </svg>
             }
-            <span id="vc-guildcount-text">{guildCount}
-                {!!settings.store.useCompact && <span id="vc-guildcount-text-compact">Servers</span>}
-            </span>
+            <Text
+                variant="text-xs/normal"
+                id="vc-guildcount-text">{guildCount}
+            </Text>
+            {!!settings.store.useCompact && <Text variant="text-xs/normal" id="vc-guildcount-text-compact">Servers</Text>}
         </div>
     );
 }
diff --git a/src/plugins/serverListIndicators/styles.css b/src/plugins/serverListIndicators/styles.css
index 8ae03ad1..09a30905 100644
--- a/src/plugins/serverListIndicators/styles.css
+++ b/src/plugins/serverListIndicators/styles.css
@@ -12,10 +12,11 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    box-sizing: border-box;
     border-radius: 24%;
     height: var(--guildbar-avatar-size);
     width: var(--guildbar-avatar-size);
-    background-color: var(--background-surface-higher);
+    background-color: var(--background-mod-subtle);
     transition: border-radius 0.15s ease-out, background-color 0.15s ease-out;
 }
 
@@ -56,7 +57,8 @@
 #vc-guildcount {
     display: flex;
     align-items: center;
-    justify-content: space-evenly;
+    justify-content: center;
+    gap: 4px;
     font-size: 12px;
     font-weight: 600;
     width: 100%;
@@ -65,6 +67,6 @@
 
 #vc-friendcount-icon,
 #vc-guildcount-icon {
-    width: var(--size-12);
-    height: var(--size-12);
+    width: var(--size-14);
+    height: var(--size-14);
 }