From f2247a3e2b0d0aff6742c09c885eb413e0709cea Mon Sep 17 00:00:00 2001
From: panbread <93918332+Panniku@users.noreply.github.com>
Date: Fri, 4 Apr 2025 11:44:05 +0400
Subject: [PATCH] fix(serverListIndicators): desktop refresh (#215)

* Fixes For customizationSectionBackground

* fix(serverListIndicators): desktop refresh

---------

Co-authored-by: thororen1234 <78185467+thororen1234@users.noreply.github.com>
---
 src/plugins/serverListIndicators/index.tsx  | 20 ++++-----
 src/plugins/serverListIndicators/styles.css | 46 ++++++++++++++-------
 2 files changed, 38 insertions(+), 28 deletions(-)

diff --git a/src/plugins/serverListIndicators/index.tsx b/src/plugins/serverListIndicators/index.tsx
index 2f103251..e761c84b 100644
--- a/src/plugins/serverListIndicators/index.tsx
+++ b/src/plugins/serverListIndicators/index.tsx
@@ -74,10 +74,9 @@ function FriendsIndicator() {
                     </path>
                 </svg>
             }
-            <span id="vc-friendcount-text">{onlineFriendsCount}</span>
-            {!!settings.store.useCompact &&
-                <span id="vc-friendcount-text-compact">Friends</span>
-            }
+            <span id="vc-friendcount-text">{onlineFriendsCount}
+                {!!settings.store.useCompact && <span id="vc-friendcount-text-compact">Friends</span>}
+            </span>
         </div>
     );
 }
@@ -109,10 +108,9 @@ function ServersIndicator() {
                     </path>
                 </svg>
             }
-            <span id="vc-guildcount-text">{guildCount}</span>
-            {!!settings.store.useCompact &&
-                <span id="vc-guildcount-text-compact">Servers</span>
-            }
+            <span id="vc-guildcount-text">{guildCount}
+                {!!settings.store.useCompact && <span id="vc-guildcount-text-compact">Servers</span>}
+            </span>
         </div>
     );
 }
@@ -155,13 +153,11 @@ export default definePlugin({
                 text = `${onlineFriendsCount} Friends`;
                 break;
             case IndicatorType.SERVER:
-                text = `${onlineFriendsCount} Friends, ${guildCount} Servers`;
+                text = `${guildCount} Servers`;
                 break;
         }
 
-        let cl;
-        if (useCompact) cl = classNameFactory("vc-indicators-compact");
-        else cl = classNameFactory("vc-indicators");
+        const cl = useCompact ? classNameFactory("vc-indicators-compact") : classNameFactory("vc-indicators");
 
         return <ErrorBoundary noop>
             <div id={cl("-container")}>
diff --git a/src/plugins/serverListIndicators/styles.css b/src/plugins/serverListIndicators/styles.css
index d6fb68a5..8ae03ad1 100644
--- a/src/plugins/serverListIndicators/styles.css
+++ b/src/plugins/serverListIndicators/styles.css
@@ -4,7 +4,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-bottom: 8px;
+    margin-bottom: -1px;
 }
 
 #vc-indicators-indicator-items {
@@ -12,13 +12,35 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    background-color: var(--background-primary);
-    height: 48px;
-    width: 48px;
-    border-radius: 100%;
+    border-radius: 24%;
+    height: var(--guildbar-avatar-size);
+    width: var(--guildbar-avatar-size);
+    background-color: var(--background-surface-higher);
     transition: border-radius 0.15s ease-out, background-color 0.15s ease-out;
 }
 
+#vc-indicators-indicator-items::before {
+    position: absolute;
+    content: "";
+    display: block;
+    /* stylelint-disable-next-line length-zero-no-unit */
+    width: 0px;
+    /* stylelint-disable-next-line length-zero-no-unit */
+    height: 0px;
+    opacity: 0;
+    border-radius: 0 4px 4px 0;
+    left: -4px;
+    background-color: var(--header-primary);
+    transition: height 0.15s ease-out, width 0.15s ease-out,
+        opacity 0.15s ease-out;
+}
+
+#vc-indicators-indicator-items:hover::before {
+    width: 8px;
+    height: 20px;
+    opacity: 1;
+}
+
 #vc-indicators-compact-indicator-items {
     display: flex;
     flex-direction: column;
@@ -27,7 +49,6 @@
 }
 
 #vc-indicators-indicator-items:hover {
-    border-radius: 34%;
     background-color: var(--brand-500);
 }
 
@@ -35,7 +56,7 @@
 #vc-guildcount {
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: space-evenly;
     font-size: 12px;
     font-weight: 600;
     width: 100%;
@@ -44,13 +65,6 @@
 
 #vc-friendcount-icon,
 #vc-guildcount-icon {
-    padding-right: 2px;
-    width: 14px;
-    height: 14px;
-}
-
-#vc-indicators-compact-container #vc-friendcount-text-compact,
-#vc-indicators-compact-container #vc-guildcount-text-compact {
-    display: block;
-    padding-left: 4px;
+    width: var(--size-12);
+    height: var(--size-12);
 }