Update group name colors

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;
   }

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

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,

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', 'jih'), '120');
-      assert.equal(contactNameColorSelector('group', 'mlk'), '010');
+      assert.equal(contactNameColorSelector('group', 'mlk'), '300');
-      assert.equal(contactNameColorSelector('group', 'pon'), '300');
+      assert.equal(contactNameColorSelector('group', 'pon'), '010');
-      assert.equal(contactNameColorSelector('group', 'srq'), '210');
+      assert.equal(contactNameColorSelector('group', 'srq'), '330');
-      assert.equal(contactNameColorSelector('group', 'vut'), '090');
+      assert.equal(contactNameColorSelector('group', 'vut'), '230');
-      assert.equal(contactNameColorSelector('group', 'zyx'), '330');
+      assert.equal(contactNameColorSelector('group', 'zyx'), '180');
     });
   });
 });

ts/types/Colors.ts

@@ -44,19 +44,19 @@ export const ConversationColors = [
 
 export const ContactNameColors = [
   '200',
-  '150',
+  '120',
-  '010',
   '300',
+  '010',
   '210',
-  '090',
   '330',
   '230',
-  '030',
   '180',
+  '030',
   '340',
   '270',
+  '090',
   '000',
-  '120',
+  '150',
   '240',
   '040',
   '160',