From 8a371080d74c742b7eacc489080da2ca6049b42e Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Wed, 17 Apr 2019 10:22:35 +0200
Subject: [PATCH] colored inviter name and layout

---
 res/css/views/rooms/_RoomPreviewBar.scss     |  9 ++++++++-
 src/components/views/rooms/RoomPreviewBar.js | 21 ++++++++++----------
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/res/css/views/rooms/_RoomPreviewBar.scss b/res/css/views/rooms/_RoomPreviewBar.scss
index a119ada0dc..e75047a77f 100644
--- a/res/css/views/rooms/_RoomPreviewBar.scss
+++ b/res/css/views/rooms/_RoomPreviewBar.scss
@@ -100,15 +100,22 @@ limitations under the License.
         flex-direction: column;
 
         &>* {
-            margin: 10px;
+            margin: 5px 0 20px 0;
         }
     }
 
     .mx_RoomPreviewBar_actions {
         flex-direction: column-reverse;
+        .mx_AccessibleButton {
+            padding: 7px 50px;//extra wide
+        }
 
         &>* {
             margin-top: 12px;
         }
     }
 }
+
+.mx_RoomPreviewBar_inviter {
+    font-weight: 600;
+}
diff --git a/src/components/views/rooms/RoomPreviewBar.js b/src/components/views/rooms/RoomPreviewBar.js
index 0fb66abc00..c25fbd580d 100644
--- a/src/components/views/rooms/RoomPreviewBar.js
+++ b/src/components/views/rooms/RoomPreviewBar.js
@@ -24,6 +24,7 @@ import MatrixClientPeg from '../../../MatrixClientPeg';
 import dis from '../../../dispatcher';
 import classNames from 'classnames';
 import { _t } from '../../../languageHandler';
+import {getUserNameColorClass} from '../../../utils/FormattingUtils';
 
 const MessageCase = Object.freeze({
     NotLoggedIn: "NotLoggedIn",
@@ -316,21 +317,21 @@ module.exports = React.createClass({
             case MessageCase.Invite: {
                 const inviteMember = this._getInviteMember();
                 let avatar;
-                let memberName;
+                let inviterElement;
                 if (inviteMember) {
                     const MemberAvatar = sdk.getComponent("views.avatars.MemberAvatar");
-                    avatar = (<MemberAvatar member={inviteMember} />);
-                    memberName = inviteMember.name;
+                    avatar = (<MemberAvatar member={inviteMember} viewUserOnClick={true} />);
+                    const colorClass = getUserNameColorClass(inviteMember.userId);
+                    inviterElement = (<span className={`mx_RoomPreviewBar_inviter ${colorClass}`}>{inviteMember.name}</span>);
                 } else {
-                    memberName = this.props.inviterName;
+                    inviterElement = this.props.inviterName;
                 }
 
-                if (this.props.canPreview) {
-                    title = <span>{avatar}{_t("<userName/> invited you to this room", {}, {userName: name => <strong>{memberName}</strong>})}</span>;
-                } else {
-                    title = _t("Do you want to join this room?");
-                    subTitle = <span>{avatar}{_t("<userName/> invited you", {}, {userName: name => <strong>{memberName}</strong>})}</span>;
-                }
+                title = _t("Do you want to join this room?");
+                subTitle = [
+                    avatar,
+                    _t("<userName/> invited you", {}, {userName: () => inviterElement}),
+                ];
 
                 primaryActionLabel = _t("Accept");
                 primaryActionHandler = this.props.onJoinClick;