From eeaa7143acecc34ae1938f7e60ff91d7ecf93fdb Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Wed, 17 Apr 2019 10:21:30 +0200
Subject: [PATCH] move name coloring out of sender profile

so we can reuse it in room preview bar
---
 res/css/_common.scss                          | 35 +++++++++++++++++++
 res/css/views/messages/_SenderProfile.scss    | 33 -----------------
 .../views/messages/SenderProfile.js           |  6 ++--
 src/utils/FormattingUtils.js                  |  5 +++
 4 files changed, 43 insertions(+), 36 deletions(-)

diff --git a/res/css/_common.scss b/res/css/_common.scss
index 4a9c2945f5..9ed5c65d4a 100644
--- a/res/css/_common.scss
+++ b/res/css/_common.scss
@@ -517,3 +517,38 @@ textarea {
     opacity: 0;
     cursor: pointer;
 }
+
+// username colors
+// used by SenderProfile & RoomPreviewBar
+.mx_Username_color1 {
+    color: $username-variant1-color;
+}
+
+.mx_Username_color2 {
+    color: $username-variant2-color;
+}
+
+.mx_Username_color3 {
+    color: $username-variant3-color;
+}
+
+.mx_Username_color4 {
+    color: $username-variant4-color;
+}
+
+.mx_Username_color5 {
+    color: $username-variant5-color;
+}
+
+.mx_Username_color6 {
+    color: $username-variant6-color;
+}
+
+.mx_Username_color7 {
+    color: $username-variant7-color;
+}
+
+.mx_Username_color8 {
+    color: $username-variant8-color;
+}
+
diff --git a/res/css/views/messages/_SenderProfile.scss b/res/css/views/messages/_SenderProfile.scss
index a4a2aba11f..655cb39489 100644
--- a/res/css/views/messages/_SenderProfile.scss
+++ b/res/css/views/messages/_SenderProfile.scss
@@ -18,36 +18,3 @@ limitations under the License.
     font-weight: 600;
 }
 
-.mx_SenderProfile_color1 {
-    color: $username-variant1-color;
-}
-
-.mx_SenderProfile_color2 {
-    color: $username-variant2-color;
-}
-
-.mx_SenderProfile_color3 {
-    color: $username-variant3-color;
-}
-
-.mx_SenderProfile_color4 {
-    color: $username-variant4-color;
-}
-
-.mx_SenderProfile_color5 {
-    color: $username-variant5-color;
-}
-
-.mx_SenderProfile_color6 {
-    color: $username-variant6-color;
-}
-
-.mx_SenderProfile_color7 {
-    color: $username-variant7-color;
-}
-
-.mx_SenderProfile_color8 {
-    color: $username-variant8-color;
-}
-
-
diff --git a/src/components/views/messages/SenderProfile.js b/src/components/views/messages/SenderProfile.js
index 0d47de4266..75898736f1 100644
--- a/src/components/views/messages/SenderProfile.js
+++ b/src/components/views/messages/SenderProfile.js
@@ -23,7 +23,7 @@ import sdk from '../../../index';
 import Flair from '../elements/Flair.js';
 import FlairStore from '../../../stores/FlairStore';
 import { _t } from '../../../languageHandler';
-import {hashCode} from '../../../utils/FormattingUtils';
+import {getUserNameColorClass} from '../../../utils/FormattingUtils';
 
 export default React.createClass({
     displayName: 'SenderProfile',
@@ -97,7 +97,7 @@ export default React.createClass({
     render() {
         const EmojiText = sdk.getComponent('elements.EmojiText');
         const {mxEvent} = this.props;
-        const colorNumber = (hashCode(mxEvent.getSender()) % 8) + 1;
+        const colorClass = getUserNameColorClass(mxEvent.getSender());
         const name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
         const {msgtype} = mxEvent.getContent();
 
@@ -121,7 +121,7 @@ export default React.createClass({
 
         // Name + flair
         const nameFlair = <span>
-            <span className={`mx_SenderProfile_name mx_SenderProfile_color${colorNumber}`}>
+            <span className={`mx_SenderProfile_name ${colorClass}`}>
                 { nameElem }
             </span>
             { flair }
diff --git a/src/utils/FormattingUtils.js b/src/utils/FormattingUtils.js
index 435b33ac5d..b461d22079 100644
--- a/src/utils/FormattingUtils.js
+++ b/src/utils/FormattingUtils.js
@@ -58,3 +58,8 @@ export function hashCode(str) {
     }
     return Math.abs(hash);
 }
+
+export function getUserNameColorClass(userId) {
+    const colorNumber = (hashCode(userId) % 8) + 1;
+    return `mx_Username_color${colorNumber}`;
+}