Add user's avatar to the top left of the screen

background.html

@@ -51,9 +51,7 @@
   <script type='text/x-tmpl-mustache' id='two-column'>
     <div class='gutter'>
       <div class='network-status-container'></div>
-      <div class='title-bar active'>
-        <div class='logo'>Signal</div>
-      </div>
+      <div class='main-header-placeholder'></div>
       <div class='tool-bar clearfix'>
         <input type='search' class='search' placeholder='{{ searchForPeopleOrGroups }}' dir='auto'>
         <span class='search-icon'></span>

js/modules/signal.js

@@ -36,6 +36,7 @@ const { LightboxGallery } = require('../../ts/components/LightboxGallery');
 const {
   MediaGallery,
 } = require('../../ts/components/conversation/media-gallery/MediaGallery');
+const { MainHeader } = require('../../ts/components/MainHeader');
 const { Message } = require('../../ts/components/conversation/Message');
 const { MessageBody } = require('../../ts/components/conversation/MessageBody');
 const {
@@ -178,6 +179,7 @@ exports.setup = (options = {}) => {
     GroupNotification,
     Lightbox,
     LightboxGallery,
+    MainHeader,
     MediaGallery,
     Message,
     MessageBody,

js/views/inbox_view.js

@@ -3,6 +3,8 @@
 /* global getInboxCollection: false */
 /* global i18n: false */
 /* global Whisper: false */
+/* global textsecure: false */
+/* global Signal: false */
 
 // eslint-disable-next-line func-names
 (function() {
@@ -93,6 +95,17 @@
       // eslint-disable-next-line no-new
       new Whisper.FontSizeView({ el: this.$el });
 
+      const ourNumber = textsecure.storage.user.getNumber();
+      const me = ConversationController.get(ourNumber);
+      this.mainHeaderView = new Whisper.ReactWrapperView({
+        className: 'main-header-wrapper',
+        Component: Signal.Components.MainHeader,
+        props: me.format(),
+      });
+      const update = () => this.mainHeaderView.update(me.format());
+      this.listenTo(me, 'change', update);
+      this.$('.main-header-placeholder').append(this.mainHeaderView.el);
+
       this.conversation_stack = new Whisper.ConversationStack({
         el: this.$('.conversation-stack'),
         model: { window: options.window },

stylesheets/_global.scss

@@ -62,23 +62,6 @@ body {
   display: none;
 }
 
-.title-bar {
-  color: $color-light-90;
-
-  height: $header-height;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.logo {
-  margin-left: 16px;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 300;
-  color: $color-light-90;
-}
-
 button {
   cursor: pointer;
   font-size: inherit;

stylesheets/_modules.scss

@@ -2045,6 +2045,25 @@
   background-color: $color-conversation-blue_grey;
 }
 
+// Module: Main Header
+
+.module-main-header {
+  height: $header-height;
+  margin-left: 16px;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.module-main-header__app-name {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 300;
+  margin-left: 32px;
+  color: $color-light-90;
+}
+
 // Third-party module: react-contextmenu
 
 .react-contextmenu {

stylesheets/_theme_dark.scss

@@ -207,10 +207,6 @@ body.dark-theme {
     color: $color-dark-05;
   }
 
-  .logo {
-    color: $color-dark-05;
-  }
-
   button.grey {
     border: solid 1px #ccc;
     color: $grey;
@@ -1363,6 +1359,12 @@ body.dark-theme {
     background-color: $color-conversation-blue_grey-shade;
   }
 
+  // Module: Main Header
+
+  .module-main-header__app-name {
+    color: $color-dark-05;
+  }
+
   // Third-party module: react-contextmenu
 
   .react-contextmenu {

ts/components/MainHeader.md

@@ -0,0 +1,11 @@
+#### With image
+
+```jsx
+<MainHeader avatarPath={util.gifObjectUrl} i18n={util.i18n} />
+```
+
+#### Just name
+
+```jsx
+<MainHeader name="John Smith" color="purple" i18n={util.i18n} />
+```

ts/components/MainHeader.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import { Avatar } from './Avatar';
+
+import { Localizer } from '../types/Util';
+
+interface Props {
+  phoneNumber: string;
+  isMe?: boolean;
+  name?: string;
+  color?: string;
+  verified: boolean;
+  profileName?: string;
+  avatarPath?: string;
+  i18n: Localizer;
+  onClick?: () => void;
+}
+
+export class MainHeader extends React.Component<Props> {
+  public render() {
+    const {
+      avatarPath,
+      i18n,
+      color,
+      name,
+      phoneNumber,
+      profileName,
+    } = this.props;
+
+    return (
+      <div className="module-main-header">
+        <Avatar
+          avatarPath={avatarPath}
+          color={color}
+          conversationType="direct"
+          i18n={i18n}
+          name={name}
+          phoneNumber={phoneNumber}
+          profileName={profileName}
+          size={28}
+        />
+        <div className="module-main-header__app-name">Signal</div>
+      </div>
+    );
+  }
+}