From 28a27711e12446dae76eb0c4016a69fa6f980079 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Thu, 19 Dec 2019 11:56:30 +1100
Subject: [PATCH] work on compose view

---
 _locales/en/messages.json                     |  5 +-
 stylesheets/_session.scss                     | 12 +++-
 stylesheets/_session_signin.scss              | 11 +--
 stylesheets/_session_theme_dark.scss          |  6 ++
 .../_session_theme_dark_left_pane.scss        | 69 +++++++++++++------
 .../session/LeftPaneMessageSection.tsx        | 34 ++++++---
 ts/components/session/RegistrationTabs.tsx    |  6 +-
 ...ationSearch.tsx => SessionSearchInput.tsx} |  5 +-
 8 files changed, 103 insertions(+), 45 deletions(-)
 rename ts/components/session/{SessionConversationSearch.tsx => SessionSearchInput.tsx} (82%)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 74b1f39a7..1a8eee6f5 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -2408,6 +2408,9 @@
       "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"
+    "message": "Search by ID # or Display Name"
+  },
+  "message": {
+    "message": "Message"
   }
 }
diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss
index 07f911419..0714a286b 100644
--- a/stylesheets/_session.scss
+++ b/stylesheets/_session.scss
@@ -52,6 +52,7 @@ $session-shade-14: #535865;
 $session-shade-15: #5b6c72;
 $session-shade-16: #979797;
 $session-shade-17: #d8d8d8;
+$session-shade-18: #141414;
 
 $session-opaque-dark-1: rgba(0, 0, 0, 0.25);
 $session-opaque-dark-2: rgba(0, 0, 0, 0.37);
@@ -109,8 +110,15 @@ div.spacer-lg {
 .fullwidth {
   width: 100%;
 }
-@mixin session-dark-background-gradient {
-  background: linear-gradient(90deg, #121212 100%, #171717 0%) !important;
+
+@mixin session-dark-background {
+  background-color: $session-shade-2 !important;
+}
+@mixin session-dark-background-lighter {
+  background-color: $session-shade-18 !important;
+}
+@mixin session-dark-background-hover {
+  background-color: $session-shade-7 !important;
 }
 
 $session-transition-duration: 0.25s;
diff --git a/stylesheets/_session_signin.scss b/stylesheets/_session_signin.scss
index d72847b03..ff857939f 100644
--- a/stylesheets/_session_signin.scss
+++ b/stylesheets/_session_signin.scss
@@ -1,8 +1,8 @@
 .session {
   &-fullscreen {
+    @include session-dark-background;
     overflow-y: auto;
     height: 100%;
-    background: linear-gradient(90deg, #121212 100%, #171717 0%);
   }
 
   &-content {
@@ -102,17 +102,10 @@
 
     @mixin registration-label-mixin {
       color: $session-color-white;
-      text-align: center;
-      font-size: 17px;
-      font-weight: 700;
-      line-height: 17px;
+      font-weight: bold;
       padding: 12px;
     }
 
-    &__or {
-      @include registration-label-mixin;
-    }
-
     &__welcome-session {
       @include registration-label-mixin;
       font-size: 12px;
diff --git a/stylesheets/_session_theme_dark.scss b/stylesheets/_session_theme_dark.scss
index d49cf1858..43932d261 100644
--- a/stylesheets/_session_theme_dark.scss
+++ b/stylesheets/_session_theme_dark.scss
@@ -88,3 +88,9 @@ h3 {
   font-size: 18px;
   padding-top: 22px;
 }
+
+h4 {
+  @include session-h-title;
+  font-size: 17px;
+  text-align: center;
+}
diff --git a/stylesheets/_session_theme_dark_left_pane.scss b/stylesheets/_session_theme_dark_left_pane.scss
index bb43c71ce..cfc68ac4f 100644
--- a/stylesheets/_session_theme_dark_left_pane.scss
+++ b/stylesheets/_session_theme_dark_left_pane.scss
@@ -1,8 +1,8 @@
 .dark-theme {
   .module-conversation-list-item {
-    background-color: $session-shade-4;
+    @include session-dark-background-lighter;
     &:hover {
-      background-color: $session-shade-11;
+      @include session-dark-background-hover;
     }
   }
   .gutter {
@@ -69,7 +69,7 @@
   }
 }
 .inbox {
-  @include session-dark-background-gradient;
+  @include session-dark-background;
 }
 
 .module-left-pane {
@@ -112,7 +112,10 @@
   }
 
   &-compose {
-    @include session-dark-background-gradient;
+    @include session-dark-background-lighter;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
     height: -webkit-fill-available;
     .session-icon .exit {
       padding: 13px;
@@ -128,28 +131,54 @@
     }
 
     &-border-container {
+      width: -webkit-fill-available;
       position: relative;
       margin-bottom: 50px;
+      .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;
+      }
+
+      .white {
+        position: absolute;
+        color: none;
+        height: 1px;
+        width: -webkit-fill-available;
+        opacity: 0.3;
+      }
+    }
+    .exit {
+      margin-top: 10px;
+      margin-left: 13px;
+      align-self: flex-start;
+    }
+
+    .session-search-input {
+      margin: 10px 20px;
+      width: -webkit-fill-available;
+    }
+
+    .session-description-long {
+      font-size: 14px;
+      margin: 0px 20px;
     }
 
-    .white {
-      position: absolute;
-      color: none;
-      height: 1px;
+    .session-id-editable {
+      margin: 0px 20px;
       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-button {
+      width: fit-content;
+      margin-top: auto;
+      margin-bottom: 16px;
     }
   }
 }
@@ -188,5 +217,5 @@
 }
 
 .app-loading-screen {
-  @include session-dark-background-gradient;
+  @include session-dark-background;
 }
diff --git a/ts/components/session/LeftPaneMessageSection.tsx b/ts/components/session/LeftPaneMessageSection.tsx
index 1d9d60252..10a9229c2 100644
--- a/ts/components/session/LeftPaneMessageSection.tsx
+++ b/ts/components/session/LeftPaneMessageSection.tsx
@@ -9,8 +9,12 @@ import {
   PropsData as SearchResultsProps,
   SearchResults,
 } from '../SearchResults';
-import { SessionButton } from './SessionButton';
-import { SessionConversationSearch } from './SessionConversationSearch';
+import {
+  SessionButton,
+  SessionButtonColor,
+  SessionButtonType,
+} from './SessionButton';
+import { SessionSearchInput } from './SessionSearchInput';
 import { debounce } from 'lodash';
 import { cleanSearchTerm } from '../../util/cleanSearchTerm';
 import { SearchOptions } from '../../types/Search';
@@ -194,11 +198,13 @@ export class LeftPaneMessageSection extends React.Component<Props, any> {
   public renderCompose(): JSX.Element {
     return (
       <div className="module-left-pane-compose">
-        <SessionIconButton
-          iconSize={SessionIconSize.Small}
-          iconType={SessionIconType.Exit}
-          onClick={this.handleComposeClick}
-        />
+        <div className="exit">
+          <SessionIconButton
+            iconSize={SessionIconSize.Small}
+            iconType={SessionIconType.Exit}
+            onClick={this.handleComposeClick}
+          />
+        </div>
         <h2>{window.i18n('enterRecipient')}</h2>
         <h3>{window.i18n('enterSessionID')}</h3>
         <div className="module-left-pane-compose-border-container">
@@ -214,6 +220,17 @@ export class LeftPaneMessageSection extends React.Component<Props, any> {
         <div className="session-description-long">
           {window.i18n('usersCanShareTheir...')}
         </div>
+        <h4>{window.i18n('or')}</h4>
+        <SessionSearchInput
+          searchString={this.props.searchTerm}
+          onChange={this.updateSearchBound}
+          placeholder={window.i18n('searchByIDOrDisplayName')}
+        />
+        <SessionButton
+          buttonColor={SessionButtonColor.Green}
+          buttonType={SessionButtonType.BrandOutline}
+          text={window.i18n('message')}
+        />
       </div>
     );
   }
@@ -221,9 +238,10 @@ export class LeftPaneMessageSection extends React.Component<Props, any> {
   public renderConversations() {
     return (
       <div>
-        <SessionConversationSearch
+        <SessionSearchInput
           searchString={this.props.searchTerm}
           onChange={this.updateSearchBound}
+          placeholder={window.i18n('searchForAKeyPhrase')}
         />
         {this.renderList()}
       </div>
diff --git a/ts/components/session/RegistrationTabs.tsx b/ts/components/session/RegistrationTabs.tsx
index fd0e3f704..c60961a3a 100644
--- a/ts/components/session/RegistrationTabs.tsx
+++ b/ts/components/session/RegistrationTabs.tsx
@@ -475,7 +475,7 @@ export class RegistrationTabs extends React.Component<{}, State> {
             SessionButtonType.BrandOutline,
             SessionButtonColor.Green
           )}
-          <div className="session-registration__or">{or}</div>
+          <h4>{or}</h4>
           {this.renderLinkDeviceToExistingAccountButton()}
         </div>
       );
@@ -485,7 +485,7 @@ export class RegistrationTabs extends React.Component<{}, State> {
       return (
         <div>
           {this.renderContinueYourSessionButton()}
-          <div className="session-registration__or">{or}</div>
+          <h4>{or}</h4>
           {this.renderRestoreUsingSeedButton(
             SessionButtonType.BrandOutline,
             SessionButtonColor.Green
@@ -497,7 +497,7 @@ export class RegistrationTabs extends React.Component<{}, State> {
     return (
       <div>
         {this.renderContinueYourSessionButton()}
-        <div className="session-registration__or">{or}</div>
+        <h4>{or}</h4>
         {this.renderLinkDeviceToExistingAccountButton()}
       </div>
     );
diff --git a/ts/components/session/SessionConversationSearch.tsx b/ts/components/session/SessionSearchInput.tsx
similarity index 82%
rename from ts/components/session/SessionConversationSearch.tsx
rename to ts/components/session/SessionSearchInput.tsx
index 34d81756b..07c637b3b 100644
--- a/ts/components/session/SessionConversationSearch.tsx
+++ b/ts/components/session/SessionSearchInput.tsx
@@ -4,9 +4,10 @@ import { SessionIconButton, SessionIconSize, SessionIconType } from './icon';
 interface Props {
   searchString: string;
   onChange: any;
+  placeholder: string;
 }
 
-export class SessionConversationSearch extends React.Component<Props> {
+export class SessionSearchInput extends React.Component<Props> {
   public constructor(props: Props) {
     super(props);
   }
@@ -23,7 +24,7 @@ export class SessionConversationSearch extends React.Component<Props> {
         <input
           value={searchString}
           onChange={e => this.props.onChange(e.target.value)}
-          placeholder={window.i18n('searchForAKeyPhrase')}
+          placeholder={this.props.placeholder}
         />
       </div>
     );