move name coloring out of sender profile

so we can reuse it in room preview bar

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

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

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 }

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