add showcompose on showcompose click

_locales/en/messages.json

@@ -2393,5 +2393,20 @@
   },
   "searchForAKeyPhrase": {
     "message": "Search for a key phrase or contact"
+  },
+  "enterRecipient": {
+    "message": "Enter Recipient"
+  },
+  "enterSessionID": {
+    "message": "Enter Session ID"
+  },
+  "pasteSessionIDRecipient": {
+    "message": "Paste Session ID of recipient"
+  },
+  "usersCanShareTheir...": {
+    "message": "Users can share their Session ID by going into their account settings and clicking \"Share Public Key\"."
+  },
+  "searchByIDOrDisplayName": {
+    "message": "Search by ID # or DIsplay Name"
   }
 }

stylesheets/_session.scss

@@ -110,7 +110,7 @@ div.spacer-lg {
   width: 100%;
 }
 @mixin session-dark-background-gradient {
-  background: linear-gradient(90deg, #121212, #171717) !important;
+  background: linear-gradient(90deg, #121212 100%, #171717 0%) !important;
 }
 
 $session-transition-duration: 0.25s;

stylesheets/_session_theme_dark_left_pane.scss

@@ -109,6 +109,57 @@
     font-size: 25px;
     flex-grow: 1;
   }
+
+  &__list {
+    height: -webkit-fill-available;
+  }
+
+  &-compose{
+    @include session-dark-background-gradient;
+    height: -webkit-fill-available;
+    .session-icon .exit {
+      padding: 13px;
+    }
+
+    h3,
+    h2 {
+      color: $session-color-white;
+      font-size: 22px;
+      font-weight: bold;
+      text-align: center;
+    }
+
+    h3 {
+      font-size: 18px;
+      padding-top: 22px;
+    }
+
+    &-border-container {
+      position: relative;
+      margin-bottom: 50px;
+    }
+
+    .white {
+      position: absolute;
+      color: none;
+      height: 1px;
+      width: -webkit-fill-available;
+      opacity: 0.3;
+    }
+
+    .green {
+      position: absolute;
+      color: $session-color-green;
+      background-color: $session-color-green;
+      height: 6px;
+      width: 130px;
+      left: 50%;
+      margin-left: -65px;
+      top: 50%;
+      margin-top:6px;
+    }
+  }
+
 }
 
 .session-search-input {

ts/components/session/LeftPaneMessageSection.tsx

@@ -58,6 +58,8 @@ export class LeftPaneMessageSection extends React.Component<Props, any> {
     };
 
     this.updateSearchBound = this.updateSearch.bind(this);
+    this.handleComposeClick = this.handleComposeClick.bind(this);
+    this.handleOnPasteSessionID = this.handleOnPasteSessionID.bind(this);
     this.debouncedSearch = debounce(this.search.bind(this), 20);
   }
 
@@ -168,7 +170,7 @@ export class LeftPaneMessageSection extends React.Component<Props, any> {
         <div className="module-left-pane__title">
           {window.i18n('messagesHeader')}
         </div>
-        <SessionButton text={window.i18n('compose')} />
+        <SessionButton text={window.i18n('compose')} onClick={this.handleComposeClick}/>
       </div>
     );
   }
@@ -178,16 +180,49 @@ export class LeftPaneMessageSection extends React.Component<Props, any> {
       <div className="module-left-pane-session">
         <div className="module-left-pane">
           {this.renderHeader()}
-          <SessionConversationSearch
-            searchString={this.props.searchTerm}
-            onChange={this.updateSearchBound}
-          />
-          {this.renderList()}
+          {this.state.showComposeView ? this.renderCompose() : this.renderConversations()}
         </div>
       </div>
     );
   }
 
+  public renderCompose() : JSX.Element {
+
+    return (
+        <div className="module-left-pane-compose">
+        <SessionIconButton iconSize={SessionIconSize.Small} iconType={SessionIconType.Exit} onClick={this.handleComposeClick} />
+        <h2>
+          {window.i18n('enterRecipient')}
+        </h2>
+        <h3>
+          {window.i18n('enterSessionID')}
+        </h3>
+        <div className="module-left-pane-compose-border-container">
+          <hr className="white" />
+          <hr className="green"/>
+        </div>
+        <SessionIdEditable
+          editable={true}
+          placeholder={window.i18n('pasteSessionIDRecipient')}
+          onChange={this.handleOnPasteSessionID}
+      />
+      </div>
+    );
+  }
+
+  public renderConversations() {
+
+    return (
+      <div>
+        <SessionConversationSearch
+          searchString={this.props.searchTerm}
+          onChange={this.updateSearchBound}
+        />
+        {this.renderList()}
+      </div>
+    );
+  }
+
   public updateSearch(searchTerm: string) {
     const { updateSearchTerm, clearSearch } = this.props;
 
@@ -233,4 +268,14 @@ export class LeftPaneMessageSection extends React.Component<Props, any> {
       });
     }
   }
+
+  private handleComposeClick() {
+    this.setState((state: any) => {
+      return { showComposeView: !state.showComposeView };
+    });
+  }
+
+  private handleOnPasteSessionID() {
+    console.log('handleOnPasteSessionID');
+  }
 }