From 66e946f0fc9172da626aac8f1674d67d0d6dbdbe Mon Sep 17 00:00:00 2001
From: Ryan Alexander <38785445+ryanalexander@users.noreply.github.com>
Date: Tue, 17 Aug 2021 17:19:29 +1000
Subject: [PATCH] Centered mention count + Fixed file formatting for last
 commit

---
 .../navigation/left/ServerListSidebar.tsx     | 25 +++++++++++++++----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/components/navigation/left/ServerListSidebar.tsx b/src/components/navigation/left/ServerListSidebar.tsx
index 13933e7f..08f1b55e 100644
--- a/src/components/navigation/left/ServerListSidebar.tsx
+++ b/src/components/navigation/left/ServerListSidebar.tsx
@@ -5,9 +5,8 @@ import { Link, useHistory, useLocation, useParams } from "react-router-dom";
 import { RelationshipStatus } from "revolt-api/types/Users";
 import styled, { css } from "styled-components";
 
-import { Text } from "preact-i18n";
-
 import { attachContextMenu } from "preact-context-menu";
+import { Text } from "preact-i18n";
 
 import ConditionalLink from "../../../lib/ConditionalLink";
 import PaintCounter from "../../../lib/PaintCounter";
@@ -58,7 +57,17 @@ function Icon({
             {unread === "mention" && (
                 <>
                     <circle cx="27" cy="5" r="5" fill={"var(--error)"} />
-                    <text x="27" y="5" r="5" fill={"white"} fontSize={"7.5"} alignmentBaseline={"middle"}>{count < 9 ? count : "9+"}</text>
+                    <text
+                        x="27"
+                        y="5"
+                        r="5"
+                        fill={"white"}
+                        style={"text-align:center;"}
+                        text-anchor="middle"
+                        fontSize={"7.5"}
+                        alignmentBaseline={"middle"}>
+                        {count < 10 ? count : "9+"}
+                    </text>
                 </>
             )}
         </svg>
@@ -268,7 +277,10 @@ export const ServerListSidebar = observer(({ unreads, lastOpened }: Props) => {
                                 homeActive && history.push("/settings")
                             }>
                             <UserHover user={client.user}>
-                                <Icon size={42} unread={homeUnread} count={alertCount}>
+                                <Icon
+                                    size={42}
+                                    unread={homeUnread}
+                                    count={alertCount}>
                                     <UserIcon
                                         target={client.user}
                                         size={32}
@@ -302,7 +314,10 @@ export const ServerListSidebar = observer(({ unreads, lastOpened }: Props) => {
                                 <Tooltip
                                     content={entry.server.name}
                                     placement="right">
-                                    <Icon size={42} unread={entry.unread} count={entry.alertCount}>
+                                    <Icon
+                                        size={42}
+                                        unread={entry.unread}
+                                        count={entry.alertCount}>
                                         <ServerIcon
                                             size={32}
                                             target={entry.server}