9+ on icons

stylesheets/_session.scss

@@ -459,13 +459,14 @@ $session_message-container-border-radius: 5px;
   }
 
   .notification-count {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     position: absolute;
     font-size: $session-font-xs;
     font-family: $session-font-family;
     top: 20px;
     right: 20px;
-    width: 20px;
-    height: 20px;
     padding: 3px;
     border-radius: 50%;
     font-weight: 700;
@@ -473,7 +474,15 @@ $session_message-container-border-radius: 5px;
     color: $session-color-white;
     text-align: center;
     opacity: 1;
+
+    sup {
+      font-size: 130%;
+      margin-top: 1px;
+      margin-left: -1px;
+    }
   }
+
+  
 }
 
 .session-icon {

ts/components/session/LeftPaneSectionHeader.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import { SessionButton } from './SessionButton';
+import { SessionNotificationCount } from './SessionNotificationCount';
 
 const Tab = ({
   isSelected,
@@ -89,8 +90,6 @@ export class LeftPaneSectionHeader extends React.Component<Props, State> {
         />
       );
     } else if (buttonLabel && notificationCount && notificationCount > 0) {
-      const shortenedNotificationCount =
-        notificationCount > 9 ? 9 : notificationCount;
       children.push(
         <div className="contact-notification-section">
           <SessionButton
@@ -99,26 +98,18 @@ export class LeftPaneSectionHeader extends React.Component<Props, State> {
             key="compose"
             disabled={false}
           />
-          <div
+          <SessionNotificationCount
-            className="contact-notification-count-bubble"
+            count={notificationCount}
             onClick={this.props.buttonClicked}
-            role="button"
+          />
-          >
-            {shortenedNotificationCount}
-          </div>
         </div>
       );
     } else if (notificationCount && notificationCount > 0) {
-      const shortenedNotificationCount =
-        notificationCount > 9 ? 9 : notificationCount;
       children.push(
-        <div
+        <SessionNotificationCount
-          className="contact-notification-count-bubble"
+          count={notificationCount}
           onClick={this.props.buttonClicked}
-          role="button"
+        />
-        >
-          {shortenedNotificationCount}
-        </div>
       );
     }
 

ts/components/session/SessionNotificationCount.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+
+interface Props {
+  count?: number;
+  // Size in px
+  size?: number;
+  onClick?: any;
+}
+
+export class SessionNotificationCount extends React.Component<Props> {
+  public static defaultProps = {
+    size: 20,
+  };
+
+  constructor(props: any) {
+    super(props);
+  }
+
+  public render() {
+    const { count, size, onClick } = this.props;
+
+    const MAX_SINGLE_DIGIT = 9;
+    const overflow = count > MAX_SINGLE_DIGIT;
+    const countElement: JSX.Element = overflow
+      ? <>{MAX_SINGLE_DIGIT}<sup>+</sup></>
+      : <>{count}</>;
+
+    const bubbleStyle = {
+      width: `${size}px`,
+      height: `${size}px`,
+    };
+
+    const countStyle = {
+      marginTop: overflow ? '-4px' : '0px',
+      marginLeft: overflow ? '2px' : '0px',
+    };
+    
+    const shouldRender = typeof count === 'number' && count > 0;
+
+    return (
+      <>
+      {shouldRender && (
+        <div
+          className="notification-count"
+          onClick={onClick}
+          style={bubbleStyle}
+          role="button"
+        >
+          <span style={countStyle}>
+            {countElement}
+          </span>
+        </div>
+        )}
+      </>
+    );
+  }
+}

ts/components/session/icon/SessionIconButton.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import classNames from 'classnames';
-
 import { Props, SessionIcon } from '../icon';
 
+import { SessionNotificationCount } from '../SessionNotificationCount';
+
 interface SProps extends Props {
   onClick: any;
-  notificationCount: number | undefined;
+  notificationCount?: number;
   isSelected: boolean;
 }
 
@@ -35,13 +36,7 @@ export class SessionIconButton extends React.PureComponent<SProps> {
       isSelected,
     } = this.props;
 
-    let { notificationCount } = this.props;
+    const { notificationCount } = this.props;
-
-    if (notificationCount === 0) {
-      notificationCount = undefined;
-    } else if (notificationCount !== undefined && notificationCount > 9) {
-      notificationCount = 9;
-    }
 
     return (
       <div
@@ -62,9 +57,9 @@ export class SessionIconButton extends React.PureComponent<SProps> {
           iconColor={iconColor}
           iconRotation={iconRotation}
         />
-        {notificationCount !== undefined && (
+        <SessionNotificationCount
-          <span className="notification-count">{notificationCount}</span>
+          count={notificationCount}
-        )}
+        />
       </div>
     );
   }