From 4e97fe982dba821de4931d0341445b7a0989a9c9 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Mon, 21 Mar 2016 22:05:59 +0000
Subject: [PATCH] improve previewbar look & feel

---
 src/components/views/rooms/RoomPreviewBar.js | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/views/rooms/RoomPreviewBar.js b/src/components/views/rooms/RoomPreviewBar.js
index e5be1e287e..9f095143d1 100644
--- a/src/components/views/rooms/RoomPreviewBar.js
+++ b/src/components/views/rooms/RoomPreviewBar.js
@@ -90,16 +90,22 @@ module.exports = React.createClass({
                         sent to matches one associated with your account.
                     </div>
                 } else if (this.state.invitedEmailMxid != MatrixClientPeg.get().credentials.userId) {
-                    emailMatchBlock = <div className="warning">
-                        <img src="img/warning.svg" width="24" height="23" title= "/!\\" alt="/!\\" />
-                        This invitation was sent to <span className="email">{this.props.invitedEmail}</span> which is not publicly associated with your account.
-                    </div>
+                    emailMatchBlock =
+                        <div className="mx_RoomPreviewBar_warning">
+                            <div className="mx_RoomPreviewBar_warningIcon">
+                                <img src="img/warning.svg" width="24" height="23" title= "/!\\" alt="/!\\" />
+                            </div>
+                            <div className="mx_RoomPreviewBar_warningText">
+                                This invitation was sent to <b><span className="email">{this.props.invitedEmail}</span></b>, which is not associated with this account.<br/>
+                                You may wish to login with a different account, or add this email to your this account.
+                            </div>
+                        </div>
                 }
             }
             joinBlock = (
                 <div>
                     <div className="mx_RoomPreviewBar_invite_text">
-                        You have been invited to join this room by { this.props.inviterName }
+                        You have been invited to join this room by <b>{ this.props.inviterName }</b>
                     </div>
                     <div className="mx_RoomPreviewBar_join_text">
                         Would you like to <a onClick={ this.props.onJoinClick }>accept</a> or <a onClick={ this.props.onRejectClick }>decline</a> this invitation?