Contacts section reformatting

_locales/en/messages.json

@@ -2626,6 +2626,9 @@
   "newSession": {
     "message": "New Session"
   },
+  "freindRequestsButton": {
+    "message": "Requests"
+  },
   "searchForAKeyPhrase": {
     "message": "Search for a key phrase or contact"
   },

stylesheets/_session_left_pane.scss

@@ -178,6 +178,8 @@ $session-compose-margin: 20px;
   &__header {
     display: flex;
     flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
     padding: 15px 7px 14px 0px;
     height: 63px;
 
@@ -461,11 +463,13 @@ $session-compose-margin: 20px;
 }
 
 .contact-notification-count-bubble {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   background: $session-color-danger;
-  line-height: 30px;
-  width: 30px;
-  height: 30px;
-  font-size: 14px;
+  width: 22px;
+  height: 22px;  
+  font-size: $session-font-xs;
   margin-left: auto;
   text-align: center;
   border-radius: 50%;
@@ -488,7 +492,11 @@ $session-compose-margin: 20px;
 
     .module-conversation-list-item {
       background-color: $session-shade-4;
-      
+
+      &--is-selected {
+        background-color: $session-shade-5;
+      }
+
       &--has-friend-request {
         &:first-child {
           border-top: none !important;

ts/components/session/LeftPaneSectionHeader.tsx

@@ -79,15 +79,35 @@ export class LeftPaneSectionHeader extends React.Component<Props, State> {
       );
     }
 
-    if (buttonLabel) {
+    if (buttonLabel && !notificationCount) {
       children.push(
         <SessionButton
-          text={window.i18n('newSession')}
+          text={buttonLabel}
           onClick={buttonClicked}
           key="compose"
           disabled={false}
         />
       );
+    } else if (buttonLabel && notificationCount && notificationCount > 0) {
+      const shortenedNotificationCount =
+        notificationCount > 9 ? 9 : notificationCount;
+      children.push(
+        <div className="contact-notification-section">
+          <SessionButton
+            text={buttonLabel}
+            onClick={buttonClicked}
+            key="compose"
+            disabled={false}
+          />
+          <div
+            className="contact-notification-count-bubble"
+            onClick={this.props.buttonClicked}
+            role="button"
+          >
+            {shortenedNotificationCount}
+          </div>
+        </div>
+      );
     } else if (notificationCount && notificationCount > 0) {
       const shortenedNotificationCount =
         notificationCount > 9 ? 9 : notificationCount;