From df7f702dde71f3f9b9f9d6565788d2e81f8da3c9 Mon Sep 17 00:00:00 2001
From: Josh Perez <60019601+josh-signal@users.noreply.github.com>
Date: Mon, 7 Jun 2021 12:50:18 -0400
Subject: [PATCH] Update group name colors

---
 stylesheets/_modules.scss                          |  2 --
 ts/components/conversation/MessageDetail.tsx       |  4 ++++
 ts/state/smart/MessageDetail.tsx                   | 10 ++++++++++
 ts/test-both/state/selectors/conversations_test.ts | 12 ++++++------
 ts/types/Colors.ts                                 | 10 +++++-----
 5 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 6508db1915df..d5599b850922 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -912,8 +912,6 @@
   white-space: nowrap;
   text-overflow: ellipsis;
 
-  color: $color-white-alpha-90;
-
   &__profile-name {
     @include font-caption-bold-italic;
   }
diff --git a/ts/components/conversation/MessageDetail.tsx b/ts/components/conversation/MessageDetail.tsx
index 1668ab3d1e42..7da21954869e 100644
--- a/ts/components/conversation/MessageDetail.tsx
+++ b/ts/components/conversation/MessageDetail.tsx
@@ -17,6 +17,7 @@ import {
 import { LocalizerType } from '../../types/Util';
 import { ConversationType } from '../../state/ducks/conversations';
 import { assert } from '../../util/assert';
+import { ContactNameColorType } from '../../types/Colors';
 
 export type Contact = Pick<
   ConversationType,
@@ -45,6 +46,7 @@ export type Contact = Pick<
 
 export type Props = {
   contacts: Array<Contact>;
+  contactNameColor?: ContactNameColorType;
   errors: Array<Error>;
   message: MessagePropsDataType;
   receivedAt: number;
@@ -232,6 +234,7 @@ export class MessageDetail extends React.Component<Props> {
       sentAt,
 
       clearSelectedMessage,
+      contactNameColor,
       deleteMessage,
       deleteMessageForEveryone,
       displayTapToViewMessage,
@@ -263,6 +266,7 @@ export class MessageDetail extends React.Component<Props> {
             <Message
               {...message}
               clearSelectedMessage={clearSelectedMessage}
+              contactNameColor={contactNameColor}
               deleteMessage={deleteMessage}
               deleteMessageForEveryone={deleteMessageForEveryone}
               disableMenu
diff --git a/ts/state/smart/MessageDetail.tsx b/ts/state/smart/MessageDetail.tsx
index 4a285e2cda2e..b41e270fa7f4 100644
--- a/ts/state/smart/MessageDetail.tsx
+++ b/ts/state/smart/MessageDetail.tsx
@@ -15,6 +15,7 @@ import { StateType } from '../reducer';
 import { getIntl, getInteractionMode } from '../selectors/user';
 import { renderAudioAttachment } from './renderAudioAttachment';
 import { renderEmojiPicker } from './renderEmojiPicker';
+import { getContactNameColorSelector } from '../selectors/conversations';
 
 type MessageDetailProps = ComponentProps<typeof MessageDetail>;
 
@@ -79,8 +80,17 @@ const mapStateToProps = (
     showVisualAttachment,
   } = props;
 
+  const contactNameColor =
+    message.conversationType === 'group'
+      ? getContactNameColorSelector(state)(
+          message.conversationId,
+          message.author.id
+        )
+      : undefined;
+
   return {
     contacts,
+    contactNameColor,
     errors,
     message,
     receivedAt,
diff --git a/ts/test-both/state/selectors/conversations_test.ts b/ts/test-both/state/selectors/conversations_test.ts
index 9595b497a702..1ab24c5fc911 100644
--- a/ts/test-both/state/selectors/conversations_test.ts
+++ b/ts/test-both/state/selectors/conversations_test.ts
@@ -1862,12 +1862,12 @@ describe('both/state/selectors/conversations', () => {
       const contactNameColorSelector = getContactNameColorSelector(state);
 
       assert.equal(contactNameColorSelector('group', 'gfe'), '200');
-      assert.equal(contactNameColorSelector('group', 'jih'), '150');
-      assert.equal(contactNameColorSelector('group', 'mlk'), '010');
-      assert.equal(contactNameColorSelector('group', 'pon'), '300');
-      assert.equal(contactNameColorSelector('group', 'srq'), '210');
-      assert.equal(contactNameColorSelector('group', 'vut'), '090');
-      assert.equal(contactNameColorSelector('group', 'zyx'), '330');
+      assert.equal(contactNameColorSelector('group', 'jih'), '120');
+      assert.equal(contactNameColorSelector('group', 'mlk'), '300');
+      assert.equal(contactNameColorSelector('group', 'pon'), '010');
+      assert.equal(contactNameColorSelector('group', 'srq'), '330');
+      assert.equal(contactNameColorSelector('group', 'vut'), '230');
+      assert.equal(contactNameColorSelector('group', 'zyx'), '180');
     });
   });
 });
diff --git a/ts/types/Colors.ts b/ts/types/Colors.ts
index 0425f529dd19..fda4cdaad571 100644
--- a/ts/types/Colors.ts
+++ b/ts/types/Colors.ts
@@ -44,19 +44,19 @@ export const ConversationColors = [
 
 export const ContactNameColors = [
   '200',
-  '150',
-  '010',
+  '120',
   '300',
+  '010',
   '210',
-  '090',
   '330',
   '230',
-  '030',
   '180',
+  '030',
   '340',
   '270',
+  '090',
   '000',
-  '120',
+  '150',
   '240',
   '040',
   '160',