From b49e85ad08a34958743878e8f4a626b5fa2cb788 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Mon, 6 Jan 2020 12:57:51 +1100
Subject: [PATCH] add the you have friend request title on contact section

---
 _locales/en/messages.json                        |  3 +++
 stylesheets/_session.scss                        |  3 ++-
 stylesheets/_session_theme_dark_left_pane.scss   | 16 +++++++++++++++-
 ts/components/ConversationListItem.tsx           |  2 +-
 ts/components/LeftPane.tsx                       |  4 ++--
 ts/components/session/LeftPaneContactSection.tsx |  5 ++++-
 6 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index d7b79e930..13c29bbfb 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -2538,5 +2538,8 @@
   },
   "displayNameEmpty": {
     "message": "Display Name Is Mandatory"
+  },
+  "youHaveFriendRequestFrom": {
+    "message": "You have friend requests from..."
   }
 }
diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss
index 6c4aafce0..f54d9bcc2 100644
--- a/stylesheets/_session.scss
+++ b/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;
diff --git a/stylesheets/_session_theme_dark_left_pane.scss b/stylesheets/_session_theme_dark_left_pane.scss
index ae572aa43..f00f7d474 100644
--- a/stylesheets/_session_theme_dark_left_pane.scss
+++ b/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;
diff --git a/ts/components/ConversationListItem.tsx b/ts/components/ConversationListItem.tsx
index 2d73072ec..ee70dca06 100644
--- a/ts/components/ConversationListItem.tsx
+++ b/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;
diff --git a/ts/components/LeftPane.tsx b/ts/components/LeftPane.tsx
index 11bbfcf05..14d55eec1 100644
--- a/ts/components/LeftPane.tsx
+++ b/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>
diff --git a/ts/components/session/LeftPaneContactSection.tsx b/ts/components/session/LeftPaneContactSection.tsx
index 58fe03c70..e15b4695c 100644
--- a/ts/components/session/LeftPaneContactSection.tsx
+++ b/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