From 3014b7ccbad9d14cfcd747b4ec88e7bcc979ab37 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Wed, 18 Dec 2019 12:03:51 +1100
Subject: [PATCH] update conversation list item in messages view

---
 stylesheets/_modules.scss                     |  4 +-
 stylesheets/_session.scss                     |  2 +-
 .../_session_theme_dark_left_pane.scss        | 86 +++++++++++--------
 stylesheets/_theme_dark.scss                  |  2 +-
 ts/components/ConversationListItem.tsx        | 43 +++++-----
 5 files changed, 79 insertions(+), 58 deletions(-)

diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index dd3ce39bb..9fcbca397 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -470,7 +470,7 @@
   line-height: 16px;
   text-transform: uppercase;
 }
-
+.module-conversation__user,
 .module-message__author {
   color: $color-white;
   font-size: 13px;
@@ -482,7 +482,7 @@
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-
+.module-conversation__user__profile-name,
 .module-message__author__profile-name {
   font-style: italic;
 }
diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss
index ca78ab1e4..e58754d30 100644
--- a/stylesheets/_session.scss
+++ b/stylesheets/_session.scss
@@ -373,7 +373,7 @@ $session_message-container-border-radius: 5px;
     text-align: center;
   }
 }
-
+.module-conversation__user__profile-name,
 .module-message__author__profile-name {
   font-style: normal;
 }
diff --git a/stylesheets/_session_theme_dark_left_pane.scss b/stylesheets/_session_theme_dark_left_pane.scss
index 18a8d68e9..c139d6a23 100644
--- a/stylesheets/_session_theme_dark_left_pane.scss
+++ b/stylesheets/_session_theme_dark_left_pane.scss
@@ -6,8 +6,58 @@
     }
   }
   .gutter {
-    width: 380px;
-    background: none;
+    width: 380px !important;
+    background: none !important;
+    padding-right: 5px !important;
+  }
+
+  .module-conversation {
+    &-list-item {
+      &--has-unread {
+        border-left: 4px solid $session-color-green !important;
+      }
+
+      &__unread-count {
+        color: $color-white !important;
+        background-color: $session-shade-10 !important;
+        position: static !important;
+        font-weight: 700 !important;
+        box-shadow: none !important;
+        margin: 0 !important;
+      }
+
+      &__header__date,
+      &__header__date--has-unread {
+        flex-grow: 1 !important;
+        text-align: end !important;
+      }
+
+      &__message__text {
+        color: $session-shade-17;
+        &--has-unread {
+          color: $session-color-white !important;
+        }
+      }
+
+      &__header__name {
+        flex-grow: 0 !important;
+        padding-right: 5px !important;
+        color: $session-shade-17;
+      }
+
+      &__header__name--with-unread .module-conversation__user__profile-number,
+      &__header__name--with-unread .module-conversation__user__profile-name {
+        color: $session-color-white;
+      }
+    }
+
+    &__user__profile {
+      &-number,
+      &-name {
+        color: $session-shade-17;
+        font-size: 15px;
+      }
+    }
   }
 }
 
@@ -54,12 +104,6 @@
   }
 }
 
-.gutter {
-  width: 380px;
-  padding-right: 5px;
-  background: none;
-}
-
 .session-search-input {
   height: 34px;
   width: 100%;
@@ -86,29 +130,3 @@
     }
   }
 }
-
-.module-conversation-list-item--has-unread {
-  border-left: 4px solid $session-color-green !important;
-}
-
-.module-conversation-list-item__unread-count,
-.dark-theme .module-conversation-list-item__unread-count {
-  color: $color-white;
-  background-color: $session-shade-10;
-  position: static;
-  font-weight: 700;
-}
-
-.module-conversation-list-item__header__date,
-.module-conversation-list-item__header__date--has-unread,
-.dark-theme .module-conversation-list-item__header__date,
-.dark-theme .module-conversation-list-item__header__date--has-unread {
-  flex-grow: 1;
-  text-align: end;
-}
-
-.module-conversation-list-item__header__name,
-.dark-theme .module-conversation-list-item__header__name {
-  flex-grow: 0 !important;
-  padding-right: 5px;
-}
diff --git a/stylesheets/_theme_dark.scss b/stylesheets/_theme_dark.scss
index fcd65bf87..1498b8b64 100644
--- a/stylesheets/_theme_dark.scss
+++ b/stylesheets/_theme_dark.scss
@@ -725,7 +725,7 @@ body.dark-theme {
   .module-message__link-preview__location {
     color: $color-gray-25;
   }
-
+  .module-conversation__user,
   .module-message__author {
     color: $color-white;
   }
diff --git a/ts/components/ConversationListItem.tsx b/ts/components/ConversationListItem.tsx
index cade4a0fe..51cc47d7b 100644
--- a/ts/components/ConversationListItem.tsx
+++ b/ts/components/ConversationListItem.tsx
@@ -114,16 +114,7 @@ export class ConversationListItem extends React.PureComponent<Props> {
   }
 
   public renderHeader() {
-    const {
-      unreadCount,
-      i18n,
-      isMe,
-      lastUpdated,
-      name,
-      phoneNumber,
-      profileName,
-      isFriendItem,
-    } = this.props;
+    const { unreadCount, i18n, isMe, lastUpdated, isFriendItem } = this.props;
 
     return (
       <div className="module-conversation-list-item__header">
@@ -135,16 +126,7 @@ export class ConversationListItem extends React.PureComponent<Props> {
               : null
           )}
         >
-          {isMe ? (
-            i18n('noteToSelf')
-          ) : (
-            <ContactName
-              phoneNumber={phoneNumber}
-              name={name}
-              profileName={profileName}
-              i18n={i18n}
-            />
-          )}
+          {isMe ? i18n('noteToSelf') : this.renderUser()}
         </div>
         {this.renderUnread()}
         {!isFriendItem && (
@@ -335,4 +317,25 @@ export class ConversationListItem extends React.PureComponent<Props> {
       </div>
     );
   }
+
+  private renderUser() {
+    const { name, phoneNumber, profileName } = this.props;
+
+    const shortenedPubkey = window.shortenPubkey(phoneNumber);
+
+    const displayedPubkey = profileName ? shortenedPubkey : phoneNumber;
+
+    return (
+      <div className="module-conversation__user">
+        <ContactName
+          phoneNumber={displayedPubkey}
+          name={name}
+          profileName={profileName}
+          module="module-conversation__user"
+          i18n={window.i18n}
+          boldProfileName={true}
+        />
+      </div>
+    );
+  }
 }