Show contact name on main header.

stylesheets/_modules.scss

@@ -2182,13 +2182,19 @@
 
 .module-main-header {
   height: $header-height;
-  margin-left: 16px;
+  padding-left: 16px;
 
   display: flex;
   flex-direction: row;
   align-items: center;
+  cursor: pointer;
 }
 
+.module-main-header:hover {
+  background-color: $color-dark-75;
+}
+
+
 .module-main-header__app-name {
   font-size: 16px;
   line-height: 24px;
@@ -2197,6 +2203,13 @@
   color: $color-dark-05;
 }
 
+.module-main-header__contact-name {
+  font-weight: 300;
+  margin-left: 12px;
+  color: $color-dark-05;
+  overflow-x: auto;
+}
+
 // Third-party module: react-contextmenu
 
 .react-contextmenu {

ts/components/MainHeader.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { Avatar } from './Avatar';
+import { ContactName } from './conversation/ContactName';
 
 import { Localizer } from '../types/Util';
 
@@ -39,7 +40,13 @@ export class MainHeader extends React.Component<Props> {
           profileName={profileName}
           size={28}
         />
-        <div className="module-main-header__app-name">Loki Messenger</div>
+        <div className="module-main-header__contact-name">
+          <ContactName
+            phoneNumber={phoneNumber}
+            profileName={profileName}
+            i18n={i18n}
+          />
+        </div>
       </div>
     );
   }