onboarding messageview

_locales/en/messages.json

@@ -967,6 +967,15 @@
   "continue": {
     "message": "Continue"
   },
+  "noThankyou": {
+    "message": "No, thank you"
+  },
+  "noMessagesTitle": {
+    "message": "You don't have any messages, yet."
+  },
+  "noMessagesSubtitle": {
+    "message": "Would you like to join Session's public chat?"
+  },
   "pairNewDevice": {
     "message": "Pair New Device"
   },
@@ -2580,6 +2589,9 @@
   "beginYourSession": {
     "message": "Begin<br />your<br />Session."
   },
+  "welcomeToSession": {
+    "message": "Welcome to Session"
+  },
   "welcomeToYourSession": {
     "message": "Welcome to your Session"
   },
@@ -2707,6 +2719,9 @@
   "joinChannel": {
     "message": "Join Open Group"
   },
+  "joinPublicChat": {
+    "message": "Join Public Chat"
+  },
   "next": {
     "message": "Next"
   },

background.html

@@ -108,17 +108,17 @@
               <div class='compose'>
                 <form class='send clearfix file-input'>
                   <div class='flex'>
-                    <button class='emoji' {{#disable-inputs}} disabled="disabled" {{/disable-inputs}}></button>
-                    <div class='send-message-container'>
-                      <textarea maxlength='2000' class='send-message' placeholder='{{ send-message }}' rows='1' dir='auto' {{#disable-inputs}} disabled="disabled" {{/disable-inputs}}></textarea>
+                    <div id='choose-file' class='choose-file'>
+                      <button class='paperclip thumbnail' {{#disable-inputs}} disabled="disabled" {{/disable-inputs}}></button>
+                      <input type='file' class='file-input' multiple='multiple'>
                     </div>
                     <div class='capture-audio'>
-                        <button class='microphone' {{#disable-inputs}} disabled="disabled" {{/disable-inputs}}></button>
+                      <button class='microphone' {{#disable-inputs}} disabled="disabled" {{/disable-inputs}}></button>
                     </div>
-                    <div id='choose-file' class='choose-file'>
-                        <button class='paperclip thumbnail' {{#disable-inputs}} disabled="disabled" {{/disable-inputs}}></button>
-                        <input type='file' class='file-input' multiple='multiple'>
+                    <div class='send-message-container'>
+                      <textarea maxlength='2000' class='send-message' placeholder='{{ send-message }}' rows='1' dir='auto' {{#disable-inputs}} disabled="disabled" {{/disable-inputs}}></textarea>
                     </div>
+                    <button class='emoji' {{#disable-inputs}} disabled="disabled" {{/disable-inputs}}></button>
                   </div>
                 </form>
               </div>

images/session/chat-bubbles.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="129px" height="89px" viewBox="0 0 129 89" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 62 (91390) - https://sketch.com -->
+    <title>Combined Shape</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Desktop-(Dark)" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="OnboardingOpenGroupJoin" transform="translate(-168.000000, -235.000000)">
+            <g id="Combined-Shape" transform="translate(170.000000, 236.000000)">
+                <path d="M82.281886,20 C106.03013,20 125.281886,34.7746033 125.281886,53 C125.281886,59.5808228 122.771868,65.7117359 118.446468,70.8596473 C118.386871,73.4480518 120.309061,77.1248835 124.21251,81.8902344 C120.039982,81.5926483 116.036545,81.0288787 112.202199,80.1989258 C110.522391,79.8353273 109.249113,79.5109067 108.382366,79.2256639 C101.146682,83.4755303 92.0984313,86 82.281886,86 C58.5336418,86 39.281886,71.2253967 39.281886,53 C39.281886,34.7746033 58.5336418,20 82.281886,20 Z" stroke="#02D370" stroke-width="3" stroke-linejoin="round"></path>
+                <path d="M31.281886,1.13686838e-13 C48.4027133,1.13686838e-13 62.281886,10.9690236 62.281886,24.5 C62.281886,38.0309764 48.4027133,49 31.281886,49 C24.1228438,49 17.530598,47.0820895 12.2828822,43.860929 C11.6699441,44.0982914 10.6509168,44.3755915 9.22632153,44.6931419 C6.46202578,45.3093191 3.57582702,45.7278752 0.567725244,45.9488104 C3.76733392,41.9262539 5.12046225,38.9484139 4.62711023,37.0152905 C1.86698023,33.3528537 0.281886022,29.0727229 0.281886022,24.5 C0.281886022,10.9690236 14.1610588,1.13686838e-13 31.281886,1.13686838e-13 Z" stroke="#161616" stroke-width="2" fill="#FFFFFF" fill-rule="evenodd"></path>
+                <circle id="Oval" fill="#02D370" fill-rule="evenodd" cx="62" cy="53" r="4"></circle>
+                <circle id="Oval" fill="#02D370" fill-rule="evenodd" cx="82" cy="53" r="4"></circle>
+                <ellipse id="Oval" fill="#02D370" fill-rule="evenodd" cx="101.5" cy="53" rx="3.5" ry="4"></ellipse>
+            </g>
+        </g>
+    </g>
+</svg>

js/background.js

@@ -918,7 +918,7 @@
           },
         });
       }
-    };
+  };
 
     window.generateID = () =>
       Math.random()

stylesheets/_emoji.scss

@@ -86,7 +86,8 @@ button.emoji {
   opacity: 0.5;
   border: none;
   background: transparent;
-  margin-left: 15px;
+  margin: 0px 10px 0px 15px;
+
 
   &:before {
     content: '';

stylesheets/_session.scss

@@ -76,7 +76,7 @@ $session-color-dark-grey: #353535;
 $session-color-black: #000;
 $session-color-danger: #ff453a;
 $session-color-primary: $session-shade-13;
-$session-color-secondary: $session-shade-16;
+$session-color-secondary: $session-shade-6;
 $session-background-overlay: #212121;
 $session-background: #121212;
 
@@ -102,6 +102,11 @@ $session-font-md: 15px;
 $session-font-lg: 18px;
 $session-font-xl: 24px;
 
+$session-font-h1: 30px;
+$session-font-h2: 24px;
+$session-font-h3: 20px;
+$session-font-h4: 16px;
+
 $session-search-input-height: 34px;
 $main-view-header-height: 85px;
 
@@ -480,6 +485,7 @@ $session-element-border-green: 4px solid $session-color-green;
     @include session-color-subtle($session-color-white);
     font-family: 'SF Pro Text';
     font-weight: 300;
+    font-size: $session-font-xs;
   }
 
   .module-contact-name {
@@ -524,8 +530,18 @@ label {
   border-bottom-right-radius: $session_message-container-border-radius;
 }
 
-.conversation-header .session-icon-button {
-  @include standard-icon-button();
+.conversation-header {
+  .module-avatar img {
+    box-shadow: 0px 0px 5px 0px rgba(255,255,255,0.20);
+  }
+  
+  .search-icon {
+    margin-right: 10px;
+  }
+  
+  .session-icon-button {
+    @include standard-icon-button();
+  }
 }
 
 .module-conversation-header {
@@ -712,6 +728,11 @@ label {
     .message {
       text-align: center;
     }
+
+    .session-id-editable {
+      width: 30vw;
+      max-width: 700px;
+    }
   }
 
   &__centered {
@@ -807,7 +828,7 @@ label {
   align-items: center;
 
   height: 25px;
-  padding: 0px 10px;
+  padding: $session-margin-md $session-margin-sm;
 
   background-color: $session-shade-4;
 
@@ -1258,6 +1279,7 @@ label {
     display: flex;
     flex-grow: 1;
     min-height: 60px;
+    margin-bottom: -5px;
   }
 
   textarea.send-message {
@@ -1566,3 +1588,71 @@ input {
     }
   }
 }
+
+.onboarding-message-section {
+  display: flex;
+  flex-grow: 1;
+  align-items: flex-start;
+  position: relative;
+  padding: $session-margin-lg 2 * $session-margin-lg;
+  background: linear-gradient(180deg, rgba(29,28,28,1) 0%, rgba(18,18,18,1) 100%);
+
+  &__exit {
+    position: absolute;
+    top: $session-margin-lg;
+    left: $session-margin-lg;
+  }
+
+  &__container {
+    display: flex;
+    flex-grow: 1;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    padding-top: 3 * $session-margin-lg;
+
+    height: 400px;
+
+    text-align: center;
+    font-family: "SF Pro Text";
+
+  }
+
+  &__title h1{
+    color: $session-color-white;
+    font-size: $session-font-h1;
+    font-weight: bold;
+    margin-bottom: 2 * $session-margin-lg;
+  }
+
+  &__icons img {
+    width: 180px;
+    margin-bottom: 2 * $session-margin-lg;
+  }
+
+  &__info {
+    font-family: "Wasa";
+    margin-bottom: 2 * $session-margin-lg;
+
+    &--title {
+      font-size: $session-font-h3;
+      line-height: $session-font-h2;
+      margin-bottom: $session-margin-md;
+    }
+
+    &--subtitle {
+      font-family: "SF Pro Text";
+      font-weight: 300;
+      line-height: $session-font-md;
+      opacity: 0.8;
+    }
+  }
+
+  &__buttons {
+    width: 100%;
+
+    .session-button:first-child {
+      margin-bottom: $session-margin-md;
+    }
+  }
+}

stylesheets/_session_left_pane.scss

@@ -413,7 +413,7 @@ $session-compose-margin: 20px;
       border: 1px solid $session-shade-15;
     }
     @at-root .dark-theme #{&} {
-      border: 1px solid $session-shade-7;
+      border: 1px solid $session-shade-6;
     }
   }
 }

stylesheets/_theme_dark.scss

@@ -189,7 +189,7 @@ body.dark-theme {
 
   button.emoji {
     &:before {
-      margin-top: 4px;
+      margin-top: 7px;
       @include color-svg('../images/smile.svg', $color-dark-30);
     }
   }

ts/components/conversation/ConversationHeader.tsx

@@ -191,7 +191,7 @@ export class ConversationHeader extends React.Component<Props> {
       if (name) {
         title = `${name}`;
       } else {
-        title = phoneNumber;
+        title = `User ${window.shortenPubkey(phoneNumber)}`;
       }
     }
 
@@ -232,7 +232,7 @@ export class ConversationHeader extends React.Component<Props> {
           profileName={profileName}
           size={28}
           borderColor={borderColor}
-          borderWidth={2}
+          borderWidth={0}
           onAvatarClick={() => {
             this.onAvatarClickBound(phoneNumber);
           }}

ts/components/session/LeftPaneMessageSection.tsx

@@ -18,6 +18,8 @@ import { SearchOptions } from '../../types/Search';
 import { validateNumber } from '../../types/PhoneNumber';
 import { LeftPane, RowRendererParamsType } from '../LeftPane';
 import { SessionClosableOverlay } from './SessionClosableOverlay';
+import { SessionIconButton, SessionIconType, SessionIconSize } from './icon';
+import { SessionButton, SessionButtonType, SessionButtonColor } from './SessionButton';
 
 export interface Props {
   searchTerm: string;
@@ -39,13 +41,19 @@ export class LeftPaneMessageSection extends React.Component<Props, any> {
 
   public constructor(props: Props) {
     super(props);
+
+    const conversations = this.getCurrentConversations();
+    const length = conversations ? conversations.length : 0;
+
     this.state = {
       showComposeView: false,
       pubKeyPasted: '',
+      shouldRenderMessageOnboarding: length === 0,
     };
 
     this.updateSearchBound = this.updateSearch.bind(this);
     this.handleToggleOverlay = this.handleToggleOverlay.bind(this);
+    this.handleCloseOnboarding = this.handleCloseOnboarding.bind(this);
     this.handleOnPasteSessionID = this.handleOnPasteSessionID.bind(this);
     this.handleMessageButtonClick = this.handleMessageButtonClick.bind(this);
     this.debouncedSearch = debounce(this.search.bind(this), 20);
@@ -164,7 +172,7 @@ export class LeftPaneMessageSection extends React.Component<Props, any> {
     );
   }
 
-  public render(): JSX.Element {
+  public render(): JSX.Element {5
     return (
       <div className="session-left-pane-section-content">
         {this.renderHeader()}
@@ -176,18 +184,80 @@ export class LeftPaneMessageSection extends React.Component<Props, any> {
   }
 
   public renderConversations() {
+    
     return (
       <div className="module-conversations-list-content">
-        <SessionSearchInput
-          searchString={this.props.searchTerm}
-          onChange={this.updateSearchBound}
-          placeholder={window.i18n('searchForAKeyPhrase')}
-        />
-        {this.renderList()}
+          {this.state.shouldRenderMessageOnboarding
+          ? (<>{this.renderMessageOnboarding()}</>)
+          : (
+            <>
+              <SessionSearchInput
+                searchString={this.props.searchTerm}
+                onChange={this.updateSearchBound}
+                placeholder={window.i18n('searchForAKeyPhrase')}
+              />
+              {this.renderList()}
+            </>
+          )}
       </div>
     );
   }
 
+  public renderMessageOnboarding() {
+
+    return (
+      <div className="onboarding-message-section">
+        <div className="onboarding-message-section__exit">
+          <SessionIconButton
+            iconType={SessionIconType.Exit}
+            iconSize={SessionIconSize.Medium}
+            onClick={this.handleCloseOnboarding}
+          />
+        </div>
+
+        <div className="onboarding-message-section__container">
+          <div className="onboarding-message-section__title">
+            <h1>{window.i18n('welcomeToSession')}</h1>
+          </div>
+
+          <div className="onboarding-message-section__icons">
+            <img src="./images/session/chat-bubbles.svg"/>
+          </div>
+
+          <div className="onboarding-message-section__info">
+            <div className="onboarding-message-section__info--title">
+              {window.i18n('noMessagesTitle')}
+            </div>
+            <div className="onboarding-message-section__info--subtitle">
+              {window.i18n('noMessagesSubtitle')}
+            </div>
+          </div>
+
+          <div className="onboarding-message-section__buttons">
+            <SessionButton
+              text={window.i18n('joinPublicChat')}
+              buttonType={SessionButtonType.BrandOutline}
+              buttonColor={SessionButtonColor.Green}
+            />
+            <SessionButton
+              text={window.i18n('noThankyou')}
+              buttonType={SessionButtonType.Brand}
+              buttonColor={SessionButtonColor.Secondary}
+              onClick={this.handleCloseOnboarding}
+            />
+          </div>
+        </div>
+        
+      </div>
+    )
+  }
+  
+  public handleCloseOnboarding() {
+    this.setState({
+      shouldRenderMessageOnboarding: false,
+    });
+  }
+
   public updateSearch(searchTerm: string) {
     const { updateSearchTerm, clearSearch } = this.props;