From e64ff0f099ac6660e596fc640a839c9f76f9f79b Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Fri, 10 Apr 2020 14:39:16 +0300
Subject: [PATCH] Change score color to match sender name

---
 res/css/views/elements/_ReplyThread.scss     | 32 ++++++++++++++++++++
 src/components/views/elements/ReplyThread.js |  9 ++++--
 2 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/res/css/views/elements/_ReplyThread.scss b/res/css/views/elements/_ReplyThread.scss
index 0d53a6b6f4..d5388e4631 100644
--- a/res/css/views/elements/_ReplyThread.scss
+++ b/res/css/views/elements/_ReplyThread.scss
@@ -27,4 +27,36 @@ blockquote.mx_ReplyThread {
     margin-bottom: 8px;
     padding-left: 10px;
     border-left: 4px solid $button-bg-color;
+
+    &.mx_ReplyThread_color1 {
+        border-left-color: $username-variant1-color;
+    }
+
+    &.mx_ReplyThread_color2 {
+        border-left-color: $username-variant2-color;
+    }
+
+    &.mx_ReplyThread_color3 {
+        border-left-color: $username-variant3-color;
+    }
+
+    &.mx_ReplyThread_color4 {
+        border-left-color: $username-variant4-color;
+    }
+
+    &.mx_ReplyThread_color5 {
+        border-left-color: $username-variant5-color;
+    }
+
+    &.mx_ReplyThread_color6 {
+        border-left-color: $username-variant6-color;
+    }
+
+    &.mx_ReplyThread_color7 {
+        border-left-color: $username-variant7-color;
+    }
+
+    &.mx_ReplyThread_color8 {
+        border-left-color: $username-variant8-color;
+    }
 }
diff --git a/src/components/views/elements/ReplyThread.js b/src/components/views/elements/ReplyThread.js
index 976b3a8815..92e87ad945 100644
--- a/src/components/views/elements/ReplyThread.js
+++ b/src/components/views/elements/ReplyThread.js
@@ -25,6 +25,7 @@ import {makeUserPermalink, RoomPermalinkCreator} from "../../../utils/permalinks
 import SettingsStore from "../../../settings/SettingsStore";
 import escapeHtml from "escape-html";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import { getUserNameColorClass } from "../../../utils/FormattingUtils"
 
 // This component does no cycle detection, simply because the only way to make such a cycle would be to
 // craft event_id's, using a homeserver that generates predictable event IDs; even then the impact would
@@ -285,6 +286,10 @@ export default class ReplyThread extends React.Component {
         dis.dispatch({action: 'focus_composer'});
     }
 
+    getReplyThreadColorClass(ev) {
+        return getUserNameColorClass(ev.getSender()).replace("Username", "ReplyThread");
+    }
+
     render() {
         let header = null;
 
@@ -299,7 +304,7 @@ export default class ReplyThread extends React.Component {
             const ev = this.state.loadedEv;
             const Pill = sdk.getComponent('elements.Pill');
             const room = this.context.getRoom(ev.getRoomId());
-            header = <blockquote className="mx_ReplyThread">
+            header = <blockquote className={`mx_ReplyThread ${this.getReplyThreadColorClass(ev)}`}>
                 {
                     _t('<a>In reply to</a> <pill>', {}, {
                         'a': (sub) => <a onClick={this.onQuoteClick} className="mx_ReplyThread_show">{ sub }</a>,
@@ -315,7 +320,7 @@ export default class ReplyThread extends React.Component {
 
         const ReplyTile = sdk.getComponent('views.rooms.ReplyTile');
         const evTiles = this.state.events.map((ev) => {
-            return <blockquote className="mx_ReplyThread" key={ev.getId()}>
+            return <blockquote className={`mx_ReplyThread ${this.getReplyThreadColorClass(ev)}`} key={ev.getId()}>
                 <ReplyTile
                     mxEvent={ev}
                     onHeightChanged={this.props.onHeightChanged}