From 0a26e09217519920ec7768e5b3b295b8395473ca Mon Sep 17 00:00:00 2001
From: Vincent <vincent@loki.network>
Date: Fri, 27 Mar 2020 16:22:41 +1100
Subject: [PATCH] 9+ on icons

---
 stylesheets/_session.scss                     | 13 ++++-
 .../session/LeftPaneSectionHeader.tsx         | 23 +++-----
 .../session/SessionNotificationCount.tsx      | 57 +++++++++++++++++++
 .../session/icon/SessionIconButton.tsx        | 19 +++----
 4 files changed, 82 insertions(+), 30 deletions(-)
 create mode 100644 ts/components/session/SessionNotificationCount.tsx

diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss
index 0b3aa883e..f08493b74 100644
--- a/stylesheets/_session.scss
+++ b/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 {
diff --git a/ts/components/session/LeftPaneSectionHeader.tsx b/ts/components/session/LeftPaneSectionHeader.tsx
index f5f33cddf..64fb33cc5 100644
--- a/ts/components/session/LeftPaneSectionHeader.tsx
+++ b/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
-            className="contact-notification-count-bubble"
+          <SessionNotificationCount
+            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
-          className="contact-notification-count-bubble"
+        <SessionNotificationCount
+          count={notificationCount}
           onClick={this.props.buttonClicked}
-          role="button"
-        >
-          {shortenedNotificationCount}
-        </div>
+        />
       );
     }
 
diff --git a/ts/components/session/SessionNotificationCount.tsx b/ts/components/session/SessionNotificationCount.tsx
new file mode 100644
index 000000000..7547ae24b
--- /dev/null
+++ b/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>
+        )}
+      </>
+    );
+  }
+}
diff --git a/ts/components/session/icon/SessionIconButton.tsx b/ts/components/session/icon/SessionIconButton.tsx
index a0b0f5cd4..344f67506 100644
--- a/ts/components/session/icon/SessionIconButton.tsx
+++ b/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;
-
-    if (notificationCount === 0) {
-      notificationCount = undefined;
-    } else if (notificationCount !== undefined && notificationCount > 9) {
-      notificationCount = 9;
-    }
+    const { notificationCount } = this.props;
 
     return (
       <div
@@ -62,9 +57,9 @@ export class SessionIconButton extends React.PureComponent<SProps> {
           iconColor={iconColor}
           iconRotation={iconRotation}
         />
-        {notificationCount !== undefined && (
-          <span className="notification-count">{notificationCount}</span>
-        )}
+        <SessionNotificationCount
+          count={notificationCount}
+        />
       </div>
     );
   }