notification count positioning

stylesheets/_session.scss

@@ -295,19 +295,21 @@ textarea {
   display: flex;
   align-items: center;
   justify-content: center;
-  font-family: $session-font-accent;
+  font-family: $session-font-default;
   border-radius: 50%;
   font-weight: 700;
   background: $session-color-danger;
   color: $session-color-white;
   text-align: center;
 
-  span {
+  div {
     position: relative;
 
     sup {
-      font-size: 130%;
       position: absolute;
+      font-size: 1.3em;
+      top: -0.5em;
+      margin-left: -0.125em;
     }
   }
 

ts/components/session/SessionNotificationCount.tsx

@@ -30,28 +30,24 @@ export class SessionNotificationCount extends React.Component<Props> {
     const MAX_SINGLE_DIGIT = 9;
     const overflow = typeof count === 'number' && count > MAX_SINGLE_DIGIT;
 
-    const fontSizeVal = overflow ? size / 2 : size / 2 + 2;
-    const fontSize = `${fontSizeVal}px`;
-
     const bubbleStyle = {
       width: `${size}px`,
       height: `${size}px`,
+      fontSize: `${size}px`,
     };
 
+    const fontSize = overflow ? '0.5em' : '0.6em';
+
     const countStyle = {
       fontSize,
-      marginTop: overflow ? `${size / 8}px` : '0px',
+      marginTop: overflow ? '0.35em' : '0em',
-      marginLeft: overflow ? `-${size / 4}px` : '0px',
+      marginLeft: overflow ? '-0.45em' : '0em',
-    };
-
-    const supStyle = {
-      top: `-${size * (3 / 8)}px`,
     };
 
     const countElement: JSX.Element = overflow ? (
       <>
         {MAX_SINGLE_DIGIT}
-        <sup style={supStyle}>+</sup>
+        <sup>+</sup>
       </>
     ) : (
       <>{count}</>
@@ -68,7 +64,7 @@ export class SessionNotificationCount extends React.Component<Props> {
             style={bubbleStyle}
             role="button"
           >
-            <span style={countStyle}>{countElement}</span>
+            <div style={countStyle}>{countElement}</div>
           </div>
         )}
       </>