Conversation Colors

ts/components/conversation/ContactName.tsx

@@ -2,11 +2,15 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import React from 'react';
+import classNames from 'classnames';
 
-import { LocalizerType } from '../../types/Util';
 import { Emojify } from './Emojify';
+import { ContactNameColorType } from '../../types/Colors';
+import { LocalizerType } from '../../types/Util';
+import { getClassNamesFor } from '../../util/getClassNamesFor';
 
 export type PropsType = {
+  contactNameColor?: ContactNameColorType;
   firstName?: string;
   i18n: LocalizerType;
   module?: string;
@@ -18,12 +22,13 @@ export type PropsType = {
 };
 
 export const ContactName = ({
+  contactNameColor,
   firstName,
   module,
   preferFirstName,
   title,
 }: PropsType): JSX.Element => {
-  const prefix = module || 'module-contact-name';
+  const getClassName = getClassNamesFor('module-contact-name', module);
 
   let text: string;
   if (preferFirstName) {
@@ -33,7 +38,13 @@ export const ContactName = ({
   }
 
   return (
-    <span className={prefix} dir="auto">
+    <span
+      className={classNames(
+        getClassName(''),
+        contactNameColor ? getClassName(`--${contactNameColor}`) : null
+      )}
+      dir="auto"
+    >
       <Emojify text={text} />
     </span>
   );