From aa70dd7b6706dca695242cd22197d68925862456 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Fri, 17 Jul 2015 19:09:17 +0100
Subject: [PATCH] alt tags for avatars; improve header spacing; improve
 roomview margin

---
 skins/base/css/molecules/RoomHeader.css            | 6 ++++--
 skins/base/css/organisms/RoomView.css              | 5 ++---
 skins/base/css/pages/MatrixChat.css                | 4 +++-
 skins/base/views/molecules/MRoomMemberTile.js      | 2 +-
 skins/base/views/molecules/MemberTile.js           | 2 +-
 skins/base/views/molecules/MessageComposer.js      | 2 +-
 skins/base/views/molecules/MessageTile.js          | 2 +-
 skins/base/views/molecules/RoomHeader.js           | 2 +-
 skins/base/views/molecules/RoomTile.js             | 2 +-
 skins/base/views/molecules/voip/MCallAnswerTile.js | 2 +-
 skins/base/views/molecules/voip/MCallHangupTile.js | 2 +-
 skins/base/views/molecules/voip/MCallInviteTile.js | 2 +-
 skins/base/views/pages/MatrixChat.js               | 2 +-
 13 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/skins/base/css/molecules/RoomHeader.css b/skins/base/css/molecules/RoomHeader.css
index 4bfa7180f..687844f10 100644
--- a/skins/base/css/molecules/RoomHeader.css
+++ b/skins/base/css/molecules/RoomHeader.css
@@ -20,8 +20,8 @@ limitations under the License.
 .mx_RoomHeader_wrapper {
     max-width: 720px;
     margin: auto;
-    height: 86px;
-    margin-top: 18px;
+    height: 88px;
+    border-bottom: 1px solid #a8dbf3;
 
     display: -webkit-box;
     display: -moz-box;
@@ -32,6 +32,7 @@ limitations under the License.
 
 .mx_RoomHeader_leftRow {
     height: 48px;
+    margin-top: 18px;
 
     -webkit-box-ordinal-group: 1;
     -moz-box-ordinal-group: 1;
@@ -44,6 +45,7 @@ limitations under the License.
 
 .mx_RoomHeader_rightRow {
     height: 48px;
+    margin-top: 18px;
     background-color: #fff;
     border-radius: 48px;
     border: 1px solid #e1e1e1;
diff --git a/skins/base/css/organisms/RoomView.css b/skins/base/css/organisms/RoomView.css
index e1f3ea6bd..150aed006 100644
--- a/skins/base/css/organisms/RoomView.css
+++ b/skins/base/css/organisms/RoomView.css
@@ -36,8 +36,8 @@ limitations under the License.
     -webkit-order: 1;
     order: 1;
 
-    -webkit-flex: 0 0 86px;
-    flex: 0 0 86px;
+    -webkit-flex: 0 0 88px;
+    flex: 0 0 88px;
 }
 
 .mx_RoomView_auxPanel {
@@ -50,7 +50,6 @@ limitations under the License.
     max-width: 720px;
     width: 100%;
     margin: auto;
-    border-top: 1px solid #a8dbf3;
     height: 0%;
 }
 
diff --git a/skins/base/css/pages/MatrixChat.css b/skins/base/css/pages/MatrixChat.css
index 544204116..1cf2dcd35 100644
--- a/skins/base/css/pages/MatrixChat.css
+++ b/skins/base/css/pages/MatrixChat.css
@@ -38,13 +38,15 @@ limitations under the License.
     height: 100%;
 }
 
-.mx_MatrixChat .mx_MatrixChat_MiddleView {
+.mx_MatrixChat .mx_MatrixChat_middlePanel {
     -webkit-box-ordinal-group: 2;
     -moz-box-ordinal-group: 2;
     -ms-flex-order: 2;
     -webkit-order: 2;
     order: 2;
 
+    padding-left: 12px;
+    padding-right: 12px;
     background-color: #f3f8fa;
     width: 100%;
     height: 100%;
diff --git a/skins/base/views/molecules/MRoomMemberTile.js b/skins/base/views/molecules/MRoomMemberTile.js
index e5a7f7153..7a19347da 100644
--- a/skins/base/views/molecules/MRoomMemberTile.js
+++ b/skins/base/views/molecules/MRoomMemberTile.js
@@ -40,7 +40,7 @@ module.exports = React.createClass({
         return (
             <div className="mx_MessageTile">
                 <div className="mx_MessageTile_avatar">
-                    <img src={ this.props.mxEvent.target ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.target, 40, 40, "crop") : null } width="40" height="40"/>
+                    <img src={ this.props.mxEvent.target ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.target, 40, 40, "crop") : null } width="40" height="40" alt=""/>
                 </div>            
                 { timestamp }
                 <span className="mx_SenderProfile"></span>
diff --git a/skins/base/views/molecules/MemberTile.js b/skins/base/views/molecules/MemberTile.js
index d1d731092..58bc735df 100644
--- a/skins/base/views/molecules/MemberTile.js
+++ b/skins/base/views/molecules/MemberTile.js
@@ -27,7 +27,7 @@ module.exports = React.createClass({
     render: function() {
         return (
             <div className="mx_MemberTile">
-                <div className="mx_MemberTile_avatar"><img src={ this.props.member ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.member, 32, 32, "crop") : null } width="32" height="32"/></div>            
+                <div className="mx_MemberTile_avatar"><img src={ this.props.member ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.member, 32, 32, "crop") : null } width="32" height="32" alt=""/></div>            
                 <div className="mx_MemberTile_name">{this.props.member.name}</div>
             </div>
         );
diff --git a/skins/base/views/molecules/MessageComposer.js b/skins/base/views/molecules/MessageComposer.js
index 4f033e99e..3279fe7a1 100644
--- a/skins/base/views/molecules/MessageComposer.js
+++ b/skins/base/views/molecules/MessageComposer.js
@@ -32,7 +32,7 @@ module.exports = React.createClass({
                 <div className="mx_MessageComposer_wrapper">
                     <div className="mx_MessageComposer_row">
                         <div className="mx_MessageComposer_avatar">
-                            <img src={ MatrixClientPeg.get().getAvatarUrlForMember(me, 40, 40, "crop") } width="40" height="40"/>
+                            <img src={ MatrixClientPeg.get().getAvatarUrlForMember(me, 40, 40, "crop") } width="40" height="40" alt=""/>
                         </div>
                         <div className="mx_MessageComposer_input">
                             <textarea ref="textarea" onKeyDown={this.onKeyDown} placeholder="Type a message" />
diff --git a/skins/base/views/molecules/MessageTile.js b/skins/base/views/molecules/MessageTile.js
index 5f4830866..03af0d51f 100644
--- a/skins/base/views/molecules/MessageTile.js
+++ b/skins/base/views/molecules/MessageTile.js
@@ -60,7 +60,7 @@ module.exports = React.createClass({
         return (
             <div className={classes}>
                 <div className="mx_MessageTile_avatar">
-                    <img src={ this.props.mxEvent.sender ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.sender, 40, 40, "crop") : null } width="40" height="40"/>
+                    <img src={ this.props.mxEvent.sender ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.sender, 40, 40, "crop") : null } width="40" height="40" alt=""/>
                 </div>
                 { timestamp }
                 <SenderProfile mxEvent={this.props.mxEvent} />
diff --git a/skins/base/views/molecules/RoomHeader.js b/skins/base/views/molecules/RoomHeader.js
index 7d8cc97e5..46349b9f5 100644
--- a/skins/base/views/molecules/RoomHeader.js
+++ b/skins/base/views/molecules/RoomHeader.js
@@ -55,7 +55,7 @@ module.exports = React.createClass({
                 <div className="mx_RoomHeader_wrapper">
                     <div className="mx_RoomHeader_leftRow">
                         <div className="mx_RoomHeader_avatar">
-                            <img src={ MatrixClientPeg.get().getAvatarUrlForRoom(this.props.room, 48, 48, "crop") } width="48" height="48"/>
+                            <img src={ MatrixClientPeg.get().getAvatarUrlForRoom(this.props.room, 48, 48, "crop") } width="48" height="48" alt=""/>
                         </div>
                         <div className="mx_RoomHeader_info">
                             <div className="mx_RoomHeader_name">
diff --git a/skins/base/views/molecules/RoomTile.js b/skins/base/views/molecules/RoomTile.js
index 447095776..763893f9b 100644
--- a/skins/base/views/molecules/RoomTile.js
+++ b/skins/base/views/molecules/RoomTile.js
@@ -52,7 +52,7 @@ module.exports = React.createClass({
         }
         return (
             <div className={classes} onClick={this.onClick}>
-                <div className="mx_RoomTile_avatar"><img src={ MatrixClientPeg.get().getAvatarUrlForRoom(this.props.room, 40, 40, "crop") } width="40" height="40"/></div>
+                <div className="mx_RoomTile_avatar"><img src={ MatrixClientPeg.get().getAvatarUrlForRoom(this.props.room, 40, 40, "crop") } width="40" height="40" alt=""/></div>
                 { nameCell }
             </div>
         );
diff --git a/skins/base/views/molecules/voip/MCallAnswerTile.js b/skins/base/views/molecules/voip/MCallAnswerTile.js
index 2d0032cac..e3ef46a4c 100644
--- a/skins/base/views/molecules/voip/MCallAnswerTile.js
+++ b/skins/base/views/molecules/voip/MCallAnswerTile.js
@@ -36,7 +36,7 @@ module.exports = React.createClass({
         return (
             <div className="mx_MessageTile">
                 <div className="mx_MessageTile_avatar">
-                    <img src={ this.props.mxEvent.sender ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.sender, 40, 40, "crop") : null } width="40" height="40"/>
+                    <img src={ this.props.mxEvent.sender ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.sender, 40, 40, "crop") : null } width="40" height="40" alt=""/>
                 </div>            
                 <MessageTimestamp ts={this.props.mxEvent.getTs()} />
                 <span className="mx_SenderProfile"></span>
diff --git a/skins/base/views/molecules/voip/MCallHangupTile.js b/skins/base/views/molecules/voip/MCallHangupTile.js
index 3d910bf51..921f88cc0 100644
--- a/skins/base/views/molecules/voip/MCallHangupTile.js
+++ b/skins/base/views/molecules/voip/MCallHangupTile.js
@@ -36,7 +36,7 @@ module.exports = React.createClass({
         return (
             <div className="mx_MessageTile">
                 <div className="mx_MessageTile_avatar">
-                    <img src={ this.props.mxEvent.sender ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.sender, 40, 40, "crop") : null } width="40" height="40"/>
+                    <img src={ this.props.mxEvent.sender ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.sender, 40, 40, "crop") : null } width="40" height="40" alt=""/>
                 </div>            
                 <MessageTimestamp ts={this.props.mxEvent.getTs()} />
                 <span className="mx_SenderProfile"></span>
diff --git a/skins/base/views/molecules/voip/MCallInviteTile.js b/skins/base/views/molecules/voip/MCallInviteTile.js
index b952a2049..8487d282a 100644
--- a/skins/base/views/molecules/voip/MCallInviteTile.js
+++ b/skins/base/views/molecules/voip/MCallInviteTile.js
@@ -42,7 +42,7 @@ module.exports = React.createClass({
         return (
             <div className="mx_MessageTile">
                 <div className="mx_MessageTile_avatar">
-                    <img src={ this.props.mxEvent.sender ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.sender, 40, 40, "crop") : null } width="40" height="40"/>
+                    <img src={ this.props.mxEvent.sender ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.sender, 40, 40, "crop") : null } width="40" height="40" alt=""/>
                 </div>            
                 <MessageTimestamp ts={this.props.mxEvent.getTs()} />
                 <span className="mx_SenderProfile"></span>
diff --git a/skins/base/views/pages/MatrixChat.js b/skins/base/views/pages/MatrixChat.js
index 4ab0e6492..85a29264b 100644
--- a/skins/base/views/pages/MatrixChat.js
+++ b/skins/base/views/pages/MatrixChat.js
@@ -68,7 +68,7 @@ module.exports = React.createClass({
             return (
                 <div className="mx_MatrixChat">
                     <LeftPanel selectedRoom={this.state.currentRoom} />
-                    <div className="mx_MatrixChat_MiddleView">
+                    <div className="mx_MatrixChat_middlePanel">
                         {page_element}
                     </div>
                     {right_panel}