make SessioNotificationCount a styled component

stylesheets/_modules.scss

@@ -878,7 +878,9 @@
   font-size: 16px;
   line-height: 24px;
   font-weight: 300;
-  color: $color-gray-90;
+  @include themify($themes) {
+    color: themed('textColor');
+  }
 
   // width of avatar (28px) and our 6px left margin
   max-width: calc(100% - 34px);

stylesheets/_session.scss

@@ -281,46 +281,6 @@ textarea {
   &.no-opacity {
     opacity: 1;
   }
-
-  .notification-count {
-    position: absolute;
-    top: $session-margin-lg;
-    right: $session-margin-lg;
-    padding: 3px;
-    opacity: 1;
-  }
-}
-
-.notification-count {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-family: $session-font-default;
-  border-radius: 50%;
-  font-weight: 700;
-  background: $session-color-danger;
-  color: $session-color-white;
-  text-align: center;
-
-  div {
-    position: relative;
-
-    sup {
-      position: absolute;
-      font-size: 1.3em;
-      top: -0.5em;
-      margin-inline-start: -0.125em;
-    }
-  }
-
-  &.hover {
-    transition: $session-transition-duration;
-    cursor: pointer;
-
-    &:hover {
-      filter: brightness(80%);
-    }
-  }
 }
 
 /* CONVERSATION AND MESSAGES */
@@ -466,6 +426,7 @@ label {
   box-sizing: border-box;
   max-height: 70vh;
   max-width: 70vw;
+  font-family: $session-font-default;
   @include themify($themes) {
     background-color: themed('modalBackground');
     color: themed('textColor');
@@ -484,7 +445,7 @@ label {
 
     padding: $session-margin-lg;
 
-    font-family: $session-font-accent;
+    font-family: $session-font-default;
     text-align: center;
     line-height: 18px;
     font-size: $session-font-md;
@@ -522,9 +483,9 @@ label {
 
   &__body {
     padding: 0px $session-margin-lg $session-margin-lg $session-margin-lg;
-    font-family: $session-font-accent;
+    font-family: $session-font-default;
     line-height: $session-font-md;
-    font-size: $session-font-sm;
+    font-size: $session-font-md;
     overflow-y: auto;
     overflow-x: hidden;
 

ts/components/LeftPane.tsx

@@ -65,8 +65,7 @@ export class LeftPane extends React.Component<Props> {
     onTabSelected?: any,
     buttonLabel?: string,
     buttonIcon?: SessionIconType,
-    buttonClicked?: any,
+    buttonClicked?: any
-    notificationCount?: number
   ): JSX.Element {
     return (
       <LeftPaneSectionHeader
@@ -76,7 +75,6 @@ export class LeftPane extends React.Component<Props> {
         buttonLabel={buttonLabel}
         buttonIcon={buttonIcon}
         buttonClicked={buttonClicked}
-        notificationCount={notificationCount}
         theme={theme}
       />
     );

ts/components/session/LeftPaneContactSection.tsx

@@ -64,7 +64,6 @@ export class LeftPaneContactSection extends React.Component<Props, State> {
       null,
       undefined,
       undefined,
-      undefined,
       undefined
     );
   }

ts/components/session/LeftPaneSectionHeader.tsx

@@ -2,10 +2,6 @@ import React from 'react';
 import classNames from 'classnames';
 import { SessionButton } from './SessionButton';
 import { SessionIcon, SessionIconSize, SessionIconType } from './icon';
-import {
-  NotificationCountSize,
-  SessionNotificationCount,
-} from './SessionNotificationCount';
 import { inversedTheme } from '../../state/ducks/SessionTheme';
 import { DefaultTheme } from 'styled-components';
 
@@ -44,7 +40,6 @@ interface Props {
   onTabSelected: any;
   selectedTab: number;
   labels: Array<string>;
-  notificationCount?: number;
   buttonLabel?: string;
   buttonIcon?: SessionIconType;
   buttonClicked?: any;
@@ -63,13 +58,7 @@ export class LeftPaneSectionHeader extends React.Component<Props, State> {
 
   public render() {
     const { selectedTab } = this.state;
-    const {
+    const { labels, buttonLabel, buttonIcon, buttonClicked } = this.props;
-      labels,
-      buttonLabel,
-      buttonIcon,
-      buttonClicked,
-      notificationCount,
-    } = this.props;
 
     const hasButton = buttonLabel || buttonIcon;
 
@@ -87,7 +76,7 @@ export class LeftPaneSectionHeader extends React.Component<Props, State> {
       );
     }
 
-    if (hasButton && !notificationCount) {
+    if (hasButton) {
       const buttonContent = buttonIcon ? (
         <SessionIcon
           iconType={buttonIcon}
@@ -101,7 +90,6 @@ export class LeftPaneSectionHeader extends React.Component<Props, State> {
         <SessionButton
           onClick={buttonClicked}
           key="compose"
-          disabled={false}
           theme={inversedTheme(this.props.theme)}
         >
           {buttonContent}
@@ -109,34 +97,7 @@ export class LeftPaneSectionHeader extends React.Component<Props, State> {
       );
 
       children.push(button);
-    } else if (buttonLabel && notificationCount && notificationCount > 0) {
-      children.push(
-        <div className="contact-notification-section">
-          <SessionButton
-            text={buttonLabel}
-            onClick={buttonClicked}
-            key="compose"
-            disabled={false}
-          />
-          <SessionNotificationCount
-            count={notificationCount}
-            size={NotificationCountSize.ON_HEADER}
-            onClick={this.props.buttonClicked}
-            key="notification-count" // we can only have one of those here
-          />
-        </div>
-      );
-    } else if (notificationCount && notificationCount > 0) {
-      children.push(
-        <SessionNotificationCount
-          count={notificationCount}
-          size={NotificationCountSize.ON_HEADER}
-          onClick={this.props.buttonClicked}
-          key="notificationCount"
-        />
-      );
     }
-
     // Create the parent and add the children
     return <div className="module-left-pane__header">{children}</div>;
   }

ts/components/session/LeftPaneSettingSection.tsx

@@ -55,7 +55,6 @@ export class LeftPaneSettingSection extends React.Component<Props, State> {
       null,
       undefined,
       undefined,
-      undefined,
       undefined
     );
   }

ts/components/session/SessionNotificationCount.tsx

@@ -1,73 +1,65 @@
 import React from 'react';
-import classNames from 'classnames';
+import styled from 'styled-components';
 
-export enum NotificationCountSize {
+type Props = {
-  // Size in px
-  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: NotificationCountSize.ON_ICON,
-  };
-
-  constructor(props: any) {
-    super(props);
-  }
-
-  public render() {
-    const { count, size, onClick } = this.props;
 
-    const hasHover = !!onClick;
+const StyledCountContainer = styled.div<{ shouldRender: boolean }>`
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  font-size: 20px;
+  top: ${props => props.theme.common.margins.lg};
+  right: ${props => props.theme.common.margins.lg};
+  padding: 3px;
+  opacity: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: ${props => props.theme.common.fonts.sessionFontDefault};
+  border-radius: 50%;
+  font-weight: 700;
+  background: ${props => props.theme.colors.destructive};
+  transition: ${props => props.theme.common.animations.defaultDuration};
+  opacity: ${props => (props.shouldRender ? 1 : 0)};
+  text-align: center;
+  color: white;
+  /* cursor:  */
+`;
 
-    const MAX_SINGLE_DIGIT = 9;
+const StyledCount = styled.div<{ overflow: boolean }>`
-    const overflow = typeof count === 'number' && count > MAX_SINGLE_DIGIT;
+  position: relative;
+  font-size: ${props => (props.overflow ? '0.5em' : '0.6em')};
+  margin-top: ${props => (props.overflow ? '0.35em' : '0em')};
+  margin-left: ${props => (props.overflow ? '-0.45em' : '0em')};
+`;
 
-    const bubbleStyle = {
+const StyledCountSup = styled.div`
-      width: `${size}px`,
+  position: absolute;
-      height: `${size}px`,
+  font-size: 1.3em;
-      fontSize: `${size}px`,
+  top: -0.5em;
-    };
+  margin-inline-start: 0.375em;
-
+`;
-    const fontSize = overflow ? '0.5em' : '0.6em';
-
-    const countStyle = {
-      fontSize,
-      marginTop: overflow ? '0.35em' : '0em',
-      marginLeft: overflow ? '-0.45em' : '0em',
-    };
-
-    const countElement: JSX.Element = overflow ? (
-      <>
-        {MAX_SINGLE_DIGIT}
-        <sup>+</sup>
-      </>
-    ) : (
-      <>{count}</>
-    );
 
-    const shouldRender = typeof count === 'number' && count > 0;
+export const SessionNotificationCount = (props: Props) => {
+  const { count } = props;
+  const overflow = Boolean(count && count > 9);
+  const shouldRender = Boolean(count && count > 0);
 
+  if (overflow) {
     return (
-      <>
+      <StyledCountContainer shouldRender={shouldRender}>
-        {shouldRender && (
+        <StyledCount overflow={overflow}>
-          <div
+          {9}
-            className={classNames('notification-count', hasHover && 'hover')}
+          <StyledCountSup>+</StyledCountSup>
-            onClick={onClick}
+        </StyledCount>
-            style={bubbleStyle}
+      </StyledCountContainer>
-            role="button"
-          >
-            <div style={countStyle}>{countElement}</div>
-          </div>
-        )}
-      </>
     );
   }
-}
+  return (
+    <StyledCountContainer shouldRender={shouldRender}>
+      <StyledCount overflow={overflow}>{count}</StyledCount>
+    </StyledCountContainer>
+  );
+};