add the you have friend request title on contact section

_locales/en/messages.json

@@ -2538,5 +2538,8 @@
   },
   "displayNameEmpty": {
     "message": "Display Name Is Mandatory"
+  },
+  "youHaveFriendRequestFrom": {
+    "message": "You have friend requests from..."
   }
 }

stylesheets/_session.scss

@@ -68,7 +68,7 @@ $session-color-black: #000;
 $session-color-danger: #ff453a;
 $session-color-primary: $session-shade-13;
 $session-color-secondary: $session-shade-16;
-$session-background-overlay: #191919;
+$session-background-overlay: #212121;
 $session-background: #121212;
 
 $session-color-info: $session-shade-11;
@@ -230,6 +230,7 @@ $session_message-container-border-radius: 5px;
   user-select: none;
   cursor: pointer;
   transition: $session-transition-duration;
+  background-color: rgba(0,0,0,0);
 
   &.disabled {
     cursor: default;

stylesheets/_session_theme_dark_left_pane.scss

@@ -126,7 +126,7 @@ $session-compose-margin: 20px;
     height: -webkit-fill-available;
   }
 
-  &-compose {
+  &-overlay {
     @include session-dark-background-lighter;
     display: flex;
     flex-direction: column;
@@ -314,6 +314,10 @@ $session-compose-margin: 20px;
     flex-direction: column;
     .module-conversation-list-item {
       &--has-friend-request {
+        &:first-child{
+          border-top: none !important;
+        }
+
         border: 1px solid $session-shade-8 !important;
 
         .module-conversation__user__profile-number,
@@ -417,6 +421,16 @@ $session-compose-margin: 20px;
   }
 }
 
+.friend-request-title {
+  font-weight: bold;
+  font-size: 13px;
+  padding: 11px;
+  border-right:1px solid #2f2f2f !important;
+  border-top:1px solid #2f2f2f !important;
+  border-left:1px solid #2f2f2f !important;
+  @include session-dark-background-lighter;
+}
+
 .panel-text-divider {
   width: 100%;
   text-align: center;

ts/components/ConversationListItem.tsx

@@ -359,7 +359,7 @@ export class ConversationListItem extends React.PureComponent<Props> {
         <Portal>{this.renderContextMenu(triggerId)}</Portal>
       </div>
     );
-  }
+
 
   private renderUser() {
     const { name, phoneNumber, profileName } = this.props;

ts/components/LeftPane.tsx

@@ -100,7 +100,7 @@ export class LeftPane extends React.Component<Props, State> {
     const ourSessionID = window.textsecure.storage.user.getNumber();
 
     return (
-      <div className="module-left-pane-compose">
+      <div className="module-left-pane-overlay">
         <div className="exit">
           <SessionIconButton
             iconSize={SessionIconSize.Small}
@@ -110,7 +110,7 @@ export class LeftPane extends React.Component<Props, State> {
         </div>
         <h2>{title}</h2>
         <h3>{window.i18n('enterSessionID')}</h3>
-        <div className="module-left-pane-compose-border-container">
+        <div className="module-left-pane-overlay-border-container">
           <hr className="white" />
           <hr className="green" />
         </div>

ts/components/session/LeftPaneContactSection.tsx

@@ -276,7 +276,7 @@ export class LeftPaneContactSection extends React.Component<Props, any> {
       }
     }
 
-    return conversationsList;
+    return conversationsList || [];
   }
 
   private renderList() {
@@ -291,9 +291,12 @@ export class LeftPaneContactSection extends React.Component<Props, any> {
     ];
 
     const length = combined.length;
+    const hasReceivedFriendRequest = receivedFriendsRequest.length > 0;
+    const frTitle = window.i18n('youHaveFriendRequestFrom');
 
     const list = (
       <div className="module-left-pane__list" key={0}>
+        {hasReceivedFriendRequest && <div className="friend-request-title">{frTitle}</div>}
         <AutoSizer>
           {({ height, width }) => (
             <List