From 7dd931fb7e390f1dd8759d6582a34b7e4ffd29be Mon Sep 17 00:00:00 2001
From: Scott Nonnenberg <scott@signal.org>
Date: Thu, 26 Jul 2018 15:02:39 -0700
Subject: [PATCH] ConversationHeader: centered title, ConvoListItem: unbold
 name

---
 stylesheets/_modules.scss                     | 34 ++++++++++++++++---
 ts/components/ConversationListItem.tsx        |  9 ++++-
 .../conversation/ConversationHeader.tsx       |  8 +++--
 3 files changed, 43 insertions(+), 8 deletions(-)

diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index c9d9f6371..ba72710fa 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -1414,6 +1414,26 @@
   cursor: pointer;
 }
 
+.module-conversation-header__title-container {
+  flex-grow: 1;
+  flex-shrink: 1;
+  min-width: 0;
+  display: block;
+
+  text-align: center;
+  height: 48px;
+}
+
+.module-conversation-header__title-flex {
+  margin-left: auto;
+  margin-right: auto;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  height: 48px;
+  max-width: 100%;
+}
+
 .module-conversation-header___avatar {
   height: 32px;
   width: 32px;
@@ -1459,16 +1479,16 @@
 }
 
 .module-conversation-header__title {
-  flex-grow: 1;
-  display: block;
-
   margin-left: 8px;
 
+  min-width: 0;
   font-size: 16px;
   line-height: 24px;
   font-weight: 300;
   color: $color-light-90;
 
+  // width of avatar and our 8px left margin
+  max-width: calc(100% - 40px);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1505,13 +1525,14 @@
 
 .module-conversation-header__expiration__setting {
   margin-left: 5px;
+  text-align: center;
 }
 
 .module-conversation-header__gear-icon {
   @include color-svg('../images/gear.svg', $color-light-60);
   height: 20px;
   width: 20px;
-  padding-left: 4px;
+  margin-left: 4px;
   cursor: pointer;
 }
 
@@ -1975,13 +1996,16 @@
   flex-shrink: 1;
   font-size: 14px;
   line-height: 18px;
-  font-weight: 300;
 
   overflow-x: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 
+.module-conversation-list-item__header__name--with-unread {
+  font-weight: 300;
+}
+
 .module-conversation-list-item__header__timestamp {
   flex-shrink: 0;
   margin-left: 6px;
diff --git a/ts/components/ConversationListItem.tsx b/ts/components/ConversationListItem.tsx
index 92c84bf31..7b18b1f32 100644
--- a/ts/components/ConversationListItem.tsx
+++ b/ts/components/ConversationListItem.tsx
@@ -82,7 +82,14 @@ export class ConversationListItem extends React.Component<Props> {
 
     return (
       <div className="module-conversation-list-item__header">
-        <div className="module-conversation-list-item__header__name">
+        <div
+          className={classNames(
+            'module-conversation-list-item__header__name',
+            unreadCount > 0
+              ? 'module-conversation-list-item__header__name--with-unread'
+              : null
+          )}
+        >
           <ContactName
             phoneNumber={phoneNumber}
             name={name}
diff --git a/ts/components/conversation/ConversationHeader.tsx b/ts/components/conversation/ConversationHeader.tsx
index f4e399d39..53e1e67bb 100644
--- a/ts/components/conversation/ConversationHeader.tsx
+++ b/ts/components/conversation/ConversationHeader.tsx
@@ -242,8 +242,12 @@ export class ConversationHeader extends React.Component<Props> {
     return (
       <div className="module-conversation-header">
         {this.renderBackButton()}
-        {this.renderAvatar()}
-        {this.renderTitle()}
+        <div className="module-conversation-header__title-container">
+          <div className="module-conversation-header__title-flex">
+            {this.renderAvatar()}
+            {this.renderTitle()}
+          </div>
+        </div>
         {this.renderExpirationLength()}
         {this.renderGear(id)}
         {this.renderMenu(id)}