fractional centering

_locales/en/messages.json

@@ -2518,7 +2518,7 @@
     "description": "Indicates that a friend request is pending"
   },
   "notFriends": {
-    "message": "not friends",
+    "message": "Not Friends",
     "description": "Indicates that a conversation is not friends with us"
   },
   "emptyGroupNameError": {

stylesheets/_session.scss

@@ -459,30 +459,42 @@ $session_message-container-border-radius: 5px;
   }
 
   .notification-count {
-    display: flex;
-    align-items: center;
-    justify-content: center;
     position: absolute;
-    font-size: $session-font-xs;
+    top: $session-margin-lg;
-    font-family: $session-font-family;
+    right: $session-margin-lg;
-    top: 20px;
-    right: 20px;
     padding: 3px;
-    border-radius: 50%;
-    font-weight: 700;
-    background: red;
-    color: $session-color-white;
-    text-align: center;
     opacity: 1;
+  }
+}
+
+.notification-count {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: $session-font-family;
+  border-radius: 50%;
+  font-weight: 700;
+  background: $session-color-danger;
+  color: $session-color-white;
+  text-align: center;
+
+  span {
+    position: relative;
 
     sup {
       font-size: 130%;
-      margin-top: 1px;
+      position: absolute;
-      margin-left: -1px;
     }
   }
 
-  
+  &.hover {
+    transition: $session-transition-duration;
+    cursor: pointer;
+
+    &:hover {
+      filter: brightness(80%);
+    }
+  }
 }
 
 .session-icon {

stylesheets/_session_left_pane.scss

@@ -466,27 +466,6 @@ $session-compose-margin: 20px;
   }
 }
 
-.contact-notification-count-bubble {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: $session-color-danger;
-  width: 22px;
-  height: 22px;
-  font-size: $session-font-xs;
-  margin-left: auto;
-  text-align: center;
-  border-radius: 50%;
-  font-weight: bold;
-  cursor: pointer;
-  transition: $session-transition-duration;
-
-  color: $session-color-white;
-  &:hover {
-    filter: brightness(80%);
-  }
-}
-
 .left-pane-contact {
   &-section,
   &-content {

ts/components/session/ActionsPanel.tsx

@@ -106,26 +106,16 @@ export class ActionsPanel extends React.Component<Props, State> {
       default:
         iconType = SessionIconType.Moon;
     }
-    if (!isSelected) {
+
-      return (
+    return (
-        <SessionIconButton
+      <SessionIconButton
-          iconSize={SessionIconSize.Medium}
+        iconSize={SessionIconSize.Medium}
-          iconType={iconType}
+        iconType={iconType}
-          notificationCount={notificationCount}
+        notificationCount={notificationCount}
-          onClick={handleClick}
+        onClick={handleClick}
-        />
+        isSelected={isSelected}
-      );
+      />
-    } else {
+    );
-      return (
-        <SessionIconButton
-          iconSize={SessionIconSize.Medium}
-          iconType={iconType}
-          notificationCount={notificationCount}
-          onClick={handleClick}
-          isSelected={isSelected}
-        />
-      );
-    }
   };
 
   public editProfileHandle() {

ts/components/session/LeftPaneSectionHeader.tsx

@@ -1,7 +1,10 @@
 import React from 'react';
 import classNames from 'classnames';
 import { SessionButton } from './SessionButton';
-import { SessionNotificationCount } from './SessionNotificationCount';
+import {
+  NotificationCountSize,
+  SessionNotificationCount,
+} from './SessionNotificationCount';
 
 const Tab = ({
   isSelected,
@@ -100,6 +103,7 @@ export class LeftPaneSectionHeader extends React.Component<Props, State> {
           />
           <SessionNotificationCount
             count={notificationCount}
+            size={NotificationCountSize.ON_HEADER}
             onClick={this.props.buttonClicked}
           />
         </div>
@@ -108,6 +112,7 @@ export class LeftPaneSectionHeader extends React.Component<Props, State> {
       children.push(
         <SessionNotificationCount
           count={notificationCount}
+          size={NotificationCountSize.ON_HEADER}
           onClick={this.props.buttonClicked}
         />
       );

ts/components/session/SessionNotificationCount.tsx

@@ -1,15 +1,21 @@
 import React from 'react';
+import classNames from 'classnames';
 
-interface Props {
+export enum NotificationCountSize {
-  count?: number;
   // Size in px
-  size?: number;
+  ON_ICON = 20,
+  ON_HEADER = 24,
+}
+
+interface Props {
+  count: number;
+  size: number;
   onClick?: any;
 }
 
 export class SessionNotificationCount extends React.Component<Props> {
   public static defaultProps = {
-    size: 20,
+    size: NotificationCountSize.ON_ICON,
   };
 
   constructor(props: any) {
@@ -19,11 +25,13 @@ export class SessionNotificationCount extends React.Component<Props> {
   public render() {
     const { count, size, onClick } = this.props;
 
+    const hasHover = !!onClick;
+
     const MAX_SINGLE_DIGIT = 9;
-    const overflow = count > MAX_SINGLE_DIGIT;
+    const overflow = typeof count === 'number' && count > MAX_SINGLE_DIGIT;
-    const countElement: JSX.Element = overflow
+
-      ? <>{MAX_SINGLE_DIGIT}<sup>+</sup></>
+    const fontSizeVal = overflow ? size / 2 : size / 2 + 2;
-      : <>{count}</>;
+    const fontSize = `${fontSizeVal}px`;
 
     const bubbleStyle = {
       width: `${size}px`,
@@ -31,25 +39,37 @@ export class SessionNotificationCount extends React.Component<Props> {
     };
 
     const countStyle = {
-      marginTop: overflow ? '-4px' : '0px',
+      fontSize,
-      marginLeft: overflow ? '2px' : '0px',
+      marginTop: overflow ? `${size / 8}px` : '0px',
+      marginLeft: overflow ? `-${size / 4}px` : '0px',
     };
-    
+
+    const supStyle = {
+      top: `-${size * (3 / 8)}px`,
+    };
+
+    const countElement: JSX.Element = overflow ? (
+      <>
+        {MAX_SINGLE_DIGIT}
+        <sup style={supStyle}>+</sup>
+      </>
+    ) : (
+      <>{count}</>
+    );
+
     const shouldRender = typeof count === 'number' && count > 0;
 
     return (
       <>
-      {shouldRender && (
+        {shouldRender && (
-        <div
+          <div
-          className="notification-count"
+            className={classNames('notification-count', hasHover && 'hover')}
-          onClick={onClick}
+            onClick={onClick}
-          style={bubbleStyle}
+            style={bubbleStyle}
-          role="button"
+            role="button"
-        >
+          >
-          <span style={countStyle}>
+            <span style={countStyle}>{countElement}</span>
-            {countElement}
+          </div>
-          </span>
-        </div>
         )}
       </>
     );