fix(unreadBadgeCount): use div (#153)

* fix(unreadBadgeCount): use div

* add self to devs

src/equicordplugins/unreadBadgeCount/index.tsx

@@ -8,7 +8,7 @@ import "./styles.css";
 
 import { definePluginSettings } from "@api/Settings";
 import ErrorBoundary from "@components/ErrorBoundary";
-import { Devs } from "@utils/constants";
+import { Devs, EquicordDevs } from "@utils/constants";
 import definePlugin, { OptionType } from "@utils/types";
 import { findStoreLazy } from "@webpack";
 import { ReadStateStore, useStateFromStores } from "@webpack/common";
@@ -18,28 +18,15 @@ import { JSX } from "react";
 const UserGuildSettingsStore = findStoreLazy("UserGuildSettingsStore");
 const JoinedThreadsStore = findStoreLazy("JoinedThreadsStore");
 
-function NumberBadge({ color, className, count }) {
-    return <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
+function NumberBadge({ className, count, width }) {
+    // To whoever used svgs here,
+    // Please. svgs bad and buggy unless used as an icon
+    return <div
         className={className}
+        style={{ width: width }}
     >
-        <circle cx="12" cy="12" r="10" fill={color} />
-        <text
-            x="50%"
-            y="50%"
-            textAnchor="middle"
-            fontSize="10"
-            fill="white"
-            fontWeight="bold"
-            dy=".3em"
-        >
-            {count}
-        </text>
-    </svg>;
+        {count}
+    </div>;
 }
 
 const settings = definePluginSettings({
@@ -63,7 +50,7 @@ const settings = definePluginSettings({
 
 export default definePlugin({
     name: "UnreadCountBadge",
-    authors: [Devs.Joona],
+    authors: [Devs.Joona, EquicordDevs.Panniku],
     description: "Shows unread message count badges on channels in the channel list",
     settings,
 
@@ -109,16 +96,20 @@ export default definePlugin({
 
         if (!settings.store.showOnMutedChannels && (UserGuildSettingsStore.isChannelMuted(channel.guild_id, channel.id) || JoinedThreadsStore.isMuted(channel.id)))
             return null;
+
+        // Im not sure if the "dot" ever appends, hence why the css is almost left unmodified for these classes
         const className = `vc-unreadCountBadge${whiteDot ? "-dot" : ""}${channel.threadMetadata ? "-thread" : ""}`;
         return (
             <NumberBadge
-                color="var(--brand-500)"
-                className={className}
+                className={"vc-unreadCountBadge " + className}
                 count={
                     unreadCount > 99 && settings.store.notificationCountLimit
                         ? "+99"
                         : unreadCount
                 }
+                width={
+                    unreadCount > 10 ? 22 : 16
+                }
             />
         );
     }, { noop: true }),

src/equicordplugins/unreadBadgeCount/styles.css

@@ -1,5 +1,21 @@
-.unreadCountBadge {
+.vc-unreadCountBadge {
+    box-sizing: border-box;
+    height: 16px;
+    min-height: 16px;
+    min-width: 16px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    background-color: var(--brand-500);
+    color: var(--white);
+    font-size: 12px;
+    font-family: var(--font-display);
+    border-radius: 8px;
     margin-left: 4px;
+    line-height: 1.33;
+    font-weight: 700;
+    letter-spacing: 0.02em;
 }
 
 .vc-unreadCountBadge-dot {