skin to match CSS (spacing will need to be fixed once matthew/ordered-roomlist lands)

This commit is contained in:
Matthew Hodgson 2015-11-09 00:13:25 +00:00
parent 3a8c263e8e
commit 615879ffdd
3 changed files with 24 additions and 23 deletions

View file

@ -78,7 +78,7 @@ limitations under the License.
} }
.mx_EventTile_notSent { .mx_EventTile_notSent {
color: #f11; color: #ddd;
} }
.mx_EventTile_highlight { .mx_EventTile_highlight {

View file

@ -158,13 +158,14 @@ limitations under the License.
order: 4; order: 4;
width: 100%; width: 100%;
-webkit-flex: 0 0 36px; -webkit-flex: 0 0 auto;
flex: 0 0 36px; flex: 0 0 auto;
} }
.mx_RoomView_statusAreaBox { .mx_RoomView_statusAreaBox {
max-width: 960px; max-width: 960px;
margin: auto; margin: auto;
min-height: 36px;
} }
.mx_RoomView_statusAreaBox_line { .mx_RoomView_statusAreaBox_line {
@ -186,7 +187,8 @@ limitations under the License.
} }
.mx_RoomView_connectionLostBar { .mx_RoomView_connectionLostBar {
margin-top: 5px; margin-top: 19px;
height: 58px;
} }
.mx_RoomView_connectionLostBar img { .mx_RoomView_connectionLostBar img {
@ -196,20 +198,19 @@ limitations under the License.
float: left; float: left;
} }
.mx_RoomView_connectionLostBar_textArea {
float: left;
}
.mx_RoomView_connectionLostBar_title { .mx_RoomView_connectionLostBar_title {
color: #f00; color: #ff0064;
} }
.mx_RoomView_connectionLostBar_desc { .mx_RoomView_connectionLostBar_desc {
color: #ddd; color: #454545;
font-size: 12px; font-size: 14px;
opacity: 0.5;
} }
.mx_RoomView_resend_link { .mx_RoomView_resend_link {
color: #454545 ! important;
text-decoration: underline ! important;
cursor: pointer; cursor: pointer;
} }

View file

@ -204,13 +204,13 @@ module.exports = React.createClass({
if (this.state.syncState === "ERROR") { if (this.state.syncState === "ERROR") {
statusBar = ( statusBar = (
<div className="mx_RoomView_connectionLostBar"> <div className="mx_RoomView_connectionLostBar">
<img src="img/cancel.png" width="10" height="12" alt=""/> <img src="img/warning2.png" width="30" height="30" alt="/!\"/>
<div className="mx_RoomView_connectionLostBar_textArea"> <div className="mx_RoomView_connectionLostBar_textArea">
<span className="mx_RoomView_connectionLostBar_title"> <div className="mx_RoomView_connectionLostBar_title">
Internet connection has been lost. Connectivity to the server has been lost.
</span> </div>
<div className="mx_RoomView_connectionLostBar_desc"> <div className="mx_RoomView_connectionLostBar_desc">
Sent messages will be stored until your connection has resumed. Sent messages will be stored until your connection has returned.
</div> </div>
</div> </div>
</div> </div>
@ -219,16 +219,16 @@ module.exports = React.createClass({
else if (this.state.hasUnsentMessages) { else if (this.state.hasUnsentMessages) {
statusBar = ( statusBar = (
<div className="mx_RoomView_connectionLostBar"> <div className="mx_RoomView_connectionLostBar">
<img src="img/cancel.png" width="10" height="12" alt=""/> <img src="img/warning2.png" width="30" height="30" alt="/!\"/>
<div className="mx_RoomView_connectionLostBar_textArea"> <div className="mx_RoomView_connectionLostBar_textArea">
<span className="mx_RoomView_connectionLostBar_title"> <div className="mx_RoomView_connectionLostBar_title">
Some of your messages have not been sent. Some of your messages have not been sent.
</span> </div>
<div className="mx_RoomView_connectionLostBar_desc"> <div className="mx_RoomView_connectionLostBar_desc">
<span className="mx_RoomView_resend_link" <a className="mx_RoomView_resend_link"
onClick={ this.onResendAllClick } > onClick={ this.onResendAllClick }>
Resend all now Resend all now
</span> or select individual messages to re-send. </a> or select individual messages to re-send.
</div> </div>
</div> </div>
</div> </div>