From 98be71680daae545fad95b261f63cfb84d3316bc Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Thu, 19 Dec 2019 10:05:34 +1100
Subject: [PATCH] add session h1 h2 and h3

---
 _locales/en/messages.json                     |  3 +-
 stylesheets/_session_signin.scss              |  2 +-
 stylesheets/_session_theme_dark.scss          | 23 +++++++++++
 .../_session_theme_dark_left_pane.scss        | 12 +-----
 .../session/LeftPaneMessageSection.tsx        | 41 +++++++++++--------
 ts/components/session/RegistrationTabs.tsx    |  4 +-
 6 files changed, 55 insertions(+), 30 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index dd6e4e4c9..74b1f39a7 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -2404,7 +2404,8 @@
     "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\"."
+    "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"
diff --git a/stylesheets/_session_signin.scss b/stylesheets/_session_signin.scss
index 4cfaf1539..d72847b03 100644
--- a/stylesheets/_session_signin.scss
+++ b/stylesheets/_session_signin.scss
@@ -210,7 +210,7 @@
     }
   }
 
-  &-signup-header,
+  &-description-long,
   &-signin-device-pairing-header {
     padding-top: 10px;
     padding-bottom: 10px;
diff --git a/stylesheets/_session_theme_dark.scss b/stylesheets/_session_theme_dark.scss
index 38f88c4d4..d49cf1858 100644
--- a/stylesheets/_session_theme_dark.scss
+++ b/stylesheets/_session_theme_dark.scss
@@ -65,3 +65,26 @@
 .discussion-container {
   background: none !important;
 }
+
+@mixin session-h-title {
+  color: $session-color-white;
+  font-weight: bold;
+}
+
+h1 {
+  @include session-h-title;
+  font-size: 25px;
+  margin: 0;
+}
+
+h2 {
+  @include session-h-title;
+  font-size: 22px;
+  text-align: center;
+}
+
+h3 {
+  @include session-h-title;
+  font-size: 18px;
+  padding-top: 22px;
+}
diff --git a/stylesheets/_session_theme_dark_left_pane.scss b/stylesheets/_session_theme_dark_left_pane.scss
index c55ebe192..bb43c71ce 100644
--- a/stylesheets/_session_theme_dark_left_pane.scss
+++ b/stylesheets/_session_theme_dark_left_pane.scss
@@ -104,9 +104,6 @@
   }
 
   &__title {
-    font-family: $session-font-family;
-    color: $session-color-white;
-    font-size: 25px;
     flex-grow: 1;
   }
 
@@ -114,7 +111,7 @@
     height: -webkit-fill-available;
   }
 
-  &-compose{
+  &-compose {
     @include session-dark-background-gradient;
     height: -webkit-fill-available;
     .session-icon .exit {
@@ -123,14 +120,10 @@
 
     h3,
     h2 {
-      color: $session-color-white;
-      font-size: 22px;
-      font-weight: bold;
       text-align: center;
     }
 
     h3 {
-      font-size: 18px;
       padding-top: 22px;
     }
 
@@ -156,10 +149,9 @@
       left: 50%;
       margin-left: -65px;
       top: 50%;
-      margin-top:6px;
+      margin-top: 6px;
     }
   }
-
 }
 
 .session-search-input {
diff --git a/ts/components/session/LeftPaneMessageSection.tsx b/ts/components/session/LeftPaneMessageSection.tsx
index c5d3440ef..1d9d60252 100644
--- a/ts/components/session/LeftPaneMessageSection.tsx
+++ b/ts/components/session/LeftPaneMessageSection.tsx
@@ -167,10 +167,13 @@ export class LeftPaneMessageSection extends React.Component<Props, any> {
   public renderHeader(): JSX.Element {
     return (
       <div className="module-left-pane__header">
-        <div className="module-left-pane__title">
+        <h1 className="module-left-pane__title">
           {window.i18n('messagesHeader')}
-        </div>
-        <SessionButton text={window.i18n('compose')} onClick={this.handleComposeClick}/>
+        </h1>
+        <SessionButton
+          text={window.i18n('compose')}
+          onClick={this.handleComposeClick}
+        />
       </div>
     );
   }
@@ -180,38 +183,42 @@ export class LeftPaneMessageSection extends React.Component<Props, any> {
       <div className="module-left-pane-session">
         <div className="module-left-pane">
           {this.renderHeader()}
-          {this.state.showComposeView ? this.renderCompose() : this.renderConversations()}
+          {this.state.showComposeView
+            ? this.renderCompose()
+            : this.renderConversations()}
         </div>
       </div>
     );
   }
 
-  public renderCompose() : JSX.Element {
-
+  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">
+        <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"/>
+          <hr className="green" />
         </div>
         <SessionIdEditable
           editable={true}
           placeholder={window.i18n('pasteSessionIDRecipient')}
           onChange={this.handleOnPasteSessionID}
-      />
+        />
+
+        <div className="session-description-long">
+          {window.i18n('usersCanShareTheir...')}
+        </div>
       </div>
     );
   }
 
   public renderConversations() {
-
     return (
       <div>
         <SessionConversationSearch
diff --git a/ts/components/session/RegistrationTabs.tsx b/ts/components/session/RegistrationTabs.tsx
index 4cc318f01..5c132fff7 100644
--- a/ts/components/session/RegistrationTabs.tsx
+++ b/ts/components/session/RegistrationTabs.tsx
@@ -286,7 +286,9 @@ export class RegistrationTabs extends React.Component<{}, State> {
   private renderSignUpHeader() {
     const allUsersAreRandomly = window.i18n('allUsersAreRandomly...');
 
-    return <div className="session-signup-header">{allUsersAreRandomly}</div>;
+    return (
+      <div className="session-description-long">{allUsersAreRandomly}</div>
+    );
   }
 
   private renderSignUpButton() {