more consistent ping styles

AdaptChat · Dec 7, 2023 · 6d34771 · 6d34771
1 parent 1b5bc17
commit 6d34771
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 14 deletions.
diff --git a/src/components/guilds/GuildIcon.tsx b/src/components/guilds/GuildIcon.tsx
@@ -33,22 +33,11 @@ export default function GuildIcon(
   const resolvedUnread = createMemo(() => {
     return unread ?? api?.cache?.guildChannelReactor.get(guild.id)?.some(c => api?.cache?.isChannelUnread(c))
   })
-  const mx = () => {
-    const humanized = humanize(resolvedPings()).split('')
-    const fullLength = humanized.length
-    const thinLength = humanized.filter(c => c === ',' || c === '.').length
-
-    return (fullLength - thinLength) * 0.35 + thinLength * 0.1 + 'rem'
-  }
   const indicator = () =>
     resolvedPings() > 0 ? (
       <span
         class="indicator-item indicator-bottom bg-red-600 inline-flex text-xs font-medium items-center rounded-full
-               h-[18px] my-1.5 ring-bg-0 ring-[3px]"
-        style={{
-          'margin-left': mx(),
-          'margin-right': mx(),
-        }}
+               min-w-[18px] h-[18px] m-1.5 ring-bg-0 ring-[3px]"
       >
         <span class="min-w-[18px] text-center text-white px-1.5 py-2">
           {humanize(resolvedPings())}

diff --git a/src/components/guilds/GuildSidebar.tsx b/src/components/guilds/GuildSidebar.tsx
@@ -222,8 +222,10 @@ export default function GuildSidebar() {
                 </span>
                 <Switch>
                   <Match when={mentionsIn(channel.id)}>
-                    <div class="px-1 bg-red-600 text-fg rounded-full flex items-center justify-center">
-                      {mentionsIn(channel.id)}
+                    <div
+                      class="px-1.5 min-w-[1.25rem] h-5 bg-red-600 text-fg rounded-full flex items-center justify-center"
+                    >
+                      {mentionsIn(channel.id)?.toLocaleString()}
                     </div>
                   </Match>
                   <Match when={api.cache?.isChannelUnread(channel.id)}>