From f1d18219edccfdb12caa10fb9f490d03e372eba1 Mon Sep 17 00:00:00 2001
From: Mikunj <mikunj@live.com.au>
Date: Mon, 26 Nov 2018 15:50:53 +1100
Subject: [PATCH] Conversation UI update.

---
 stylesheets/_modules.scss                     | 14 +++++++++-
 ts/components/conversation/ContactName.tsx    |  7 ++---
 .../conversation/ConversationHeader.tsx       | 26 +++++--------------
 3 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index d4c1dfe56..0415cd4d6 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -1,8 +1,20 @@
 // Using BEM syntax explained here: https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
 
 // Module: Contact Name
+.module-contact-name {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.module-contact-name span {
+  text-overflow: ellipsis;
+  overflow-x: hidden;
+  width: 100%;
+  text-align: left;
+}
 
-.module-contact-name__profile-name {
+.module-contact-name__profile-number {
   font-style: italic;
 }
 
diff --git a/ts/components/conversation/ContactName.tsx b/ts/components/conversation/ContactName.tsx
index 404a80583..dbe17c24a 100644
--- a/ts/components/conversation/ContactName.tsx
+++ b/ts/components/conversation/ContactName.tsx
@@ -21,15 +21,16 @@ export class ContactName extends React.Component<Props> {
     const shouldShowProfile = Boolean(profileName && !name);
     const profileElement = shouldShowProfile ? (
       <span className={`${prefix}__profile-name`}>
-        ~<Emojify text={profileName || ''} i18n={i18n} />
+        <Emojify text={profileName || ''} i18n={i18n} />
       </span>
     ) : null;
 
     return (
       <span className={prefix}>
-        <Emojify text={title} i18n={i18n} />
-        {shouldShowProfile ? ' ' : null}
         {profileElement}
+        <span className={shouldShowProfile ? `${prefix}__profile-number` : ''}>
+          <Emojify text={title} i18n={i18n} />
+        </span>
       </span>
     );
   }
diff --git a/ts/components/conversation/ConversationHeader.tsx b/ts/components/conversation/ConversationHeader.tsx
index 49a99a6ed..0162243f4 100644
--- a/ts/components/conversation/ConversationHeader.tsx
+++ b/ts/components/conversation/ConversationHeader.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Emojify } from './Emojify';
+import { ContactName } from './ContactName';
 import { Avatar } from '../Avatar';
 import { Localizer } from '../../types/Util';
 import {
@@ -90,32 +90,20 @@ export class ConversationHeader extends React.Component<Props> {
 
   public renderTitle() {
     const {
-      name,
       phoneNumber,
       i18n,
       profileName,
-      isVerified,
       isKeysPending,
     } = this.props;
 
     return (
       <div className="module-conversation-header__title">
-        {name ? <Emojify text={name} i18n={i18n} /> : null}
-        {name && phoneNumber ? ' · ' : null}
-        {phoneNumber ? phoneNumber : null}{' '}
-        {profileName && !name ? (
-          <span className="module-conversation-header__title__profile-name">
-            ~<Emojify text={profileName} i18n={i18n} />
-          </span>
-        ) : null}
-        {isVerified ? ' · ' : null}
-        {isVerified ? (
-          <span>
-            <span className="module-conversation-header__title__verified-icon" />
-            {i18n('verified')}
-          </span>
-        ) : null}
-        {isKeysPending ? '(pending)' : null}
+        <ContactName
+          phoneNumber={phoneNumber}
+          profileName={profileName}
+          i18n={i18n}
+        />
+        {isKeysPending ? ' (pending)' : null}
       </div>
     );
   }