handle send friend request in addcontact page

stylesheets/_session.scss

@@ -64,6 +64,9 @@ $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: #121212;
+
 
 $session-color-info: $session-shade-11;
 $session-color-success: #35d388;
@@ -112,10 +115,10 @@ div.spacer-lg {
 }
 
 @mixin session-dark-background {
-  background-color: $session-shade-2 !important;
+  background-color: $session-background !important;
 }
 @mixin session-dark-background-lighter {
-  background-color: $session-shade-18 !important;
+  background-color: $session-background-overlay !important;
 }
 @mixin session-dark-background-hover {
   background-color: $session-shade-7 !important;

ts/components/session/LeftPaneContactSection.tsx

@@ -12,6 +12,8 @@ import {
   SessionButtonColor,
 } from './SessionButton';
 import { AutoSizer, List } from 'react-virtualized';
+import { validateNumber } from '../../types/PhoneNumber';
+
 
 export interface Props {
   searchTerm: string;
@@ -35,15 +37,20 @@ export class LeftPaneContactSection extends React.Component<Props, any> {
     this.state = {
       showAddContactView: false,
       selectedTab: 0,
+      addContactRecipientID: '',
     };
 
     this.debouncedSearch = debounce(this.search.bind(this), 20);
     this.handleTabSelected = this.handleTabSelected.bind(this);
     this.handleToggleOverlay = this.handleToggleOverlay.bind(this);
+    this.handleOnAddContact = this.handleOnAddContact.bind(this);
+    this.handleRecipientSessionIDChanged = this.handleRecipientSessionIDChanged.bind(this);
+    
   }
 
   public componentWillUnmount() {
     this.updateSearch('');
+    this.setState({addContactRecipientID: ''});
   }
 
   public handleTabSelected(tabType: number) {
@@ -67,9 +74,9 @@ export class LeftPaneContactSection extends React.Component<Props, any> {
         {this.state.showAddContactView
           ? LeftPane.renderClosableOverlay(
               true,
-              undefined,
+              this.handleRecipientSessionIDChanged,
               this.handleToggleOverlay,
-              undefined,
+              this.handleOnAddContact,
               ''
             )
           : this.renderContacts()}
@@ -83,6 +90,29 @@ export class LeftPaneContactSection extends React.Component<Props, any> {
     }));
   }
 
+  private handleOnAddContact() {
+    const sessionID = this.state.addContactRecipientID;
+    const error = validateNumber(sessionID, window.i18n);
+
+    if (error) {
+      window.pushToast({
+        title: error,
+        type: 'error',
+        id: 'addContact',
+      });
+    } else {
+      window.Whisper.events.trigger('showConversation', sessionID);
+    }
+  }
+
+  private handleRecipientSessionIDChanged(event: any) {
+    if (event.target.innerHTML) {
+      // remove br elements or div elements 
+      const cleanText = event.target.innerHTML.replace(/<\/?[^>]+(>|$)/g, "");
+      this.setState({ addContactRecipientID: cleanText });
+    }
+  }
+
   private renderContacts() {
     return (
       <div className="left-pane-contact-content">