From 5248b0c6319ae2cd06e8a8bdd2ba19c8d58bcba3 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Thu, 23 Jul 2015 10:24:34 -0700
Subject: [PATCH] css prettification

---
 skins/base/css/organisms/RoomDirectory.css  | 26 +++++++++++++++
 skins/base/views/organisms/CreateRoom.js    | 32 ++++++++++++------
 skins/base/views/organisms/RoomDirectory.js | 36 +++++++++++----------
 skins/base/views/templates/Login.js         |  2 +-
 skins/base/views/templates/Register.js      |  2 +-
 5 files changed, 69 insertions(+), 29 deletions(-)

diff --git a/skins/base/css/organisms/RoomDirectory.css b/skins/base/css/organisms/RoomDirectory.css
index 1be87c1f..c8dcd077 100644
--- a/skins/base/css/organisms/RoomDirectory.css
+++ b/skins/base/css/organisms/RoomDirectory.css
@@ -18,6 +18,7 @@ limitations under the License.
     width: 720px;
     margin-left: auto;
     margin-right: auto;
+    color: #4a4a4a;
 }
 
 .mx_RoomDirectory_input {
@@ -31,8 +32,33 @@ limitations under the License.
     margin-bottom: 12px;
 }
 
+.mx_RoomDirectory_tableWrapper {
+    overflow-y: scroll;
+    height: 400px;
+}
+
 .mx_RoomDirectory_table {
     width: 100%;
+    text-align: left;
+}
+
+.mx_RoomDirectory_table th {
+    font-weight: 400;
+    font-size: 12px;
+}
+
+.mx_RoomDirectory_table td {
+    font-weight: 300;
+    font-size: 16px;
+}
+
+.mx_RoomDirectory_table .mx_RoomDirectory_name {
+    font-weight: 400;
+}
+
+.mx_RoomDirectory_table .mx_RoomDirectory_topic {
+    font-weight: 400;
+    font-size: 12px;
 }
 
 .mx_RoomDirectory_table td,
diff --git a/skins/base/views/organisms/CreateRoom.js b/skins/base/views/organisms/CreateRoom.js
index 21769621..f44e745c 100644
--- a/skins/base/views/organisms/CreateRoom.js
+++ b/skins/base/views/organisms/CreateRoom.js
@@ -28,6 +28,7 @@ var CreateRoomButton = ComponentBroker.get("atoms/create_room/CreateRoomButton")
 var RoomAlias = ComponentBroker.get("atoms/create_room/RoomAlias");
 var Presets = ComponentBroker.get("atoms/create_room/Presets");
 var UserSelector = ComponentBroker.get("molecules/UserSelector");
+var RoomHeader = ComponentBroker.get("molecules/RoomHeader");
 
 var Loader = require("react-loader");
 
@@ -141,16 +142,27 @@ module.exports = React.createClass({
             }
             return (
                 <div className="mx_CreateRoom">
-                    <input type="text" ref="room_name" value={this.state.room_name} onChange={this.onNameChange} placeholder="Name"/> <br />
-                    <textarea ref="topic" value={this.state.topic} onChange={this.onTopicChange} placeholder="Description"/> <br />
-                    <RoomAlias ref="alias" alias={this.state.alias} onChange={this.onAliasChanged}/> <br />
-                    <UserSelector ref="user_selector" selected_users={this.state.invited_users} onChange={this.onInviteChanged}/> <br />
-                    <Presets ref="presets" onChange={this.onPresetChanged} preset={this.state.preset}/> <br />
-                    <label><input type="checkbox" ref="is_private" checked={this.state.is_private} onChange={this.onPrivateChanged}/> Make this room private</label>
-                    <label><input type="checkbox" ref="share_history" checked={this.state.share_history} onChange={this.onShareHistoryChanged}/> Share message history with new users</label>
-                    <label><input type="checkbox" ref="encrypt" checked={this.state.encrypt} onChange={this.onEncryptChanged}/> Encrypt room</label>
-                    <CreateRoomButton onCreateRoom={this.onCreateRoom} /> <br />
-                    {error_box}
+                    <RoomHeader simpleHeader="Create room" />
+                    <div className="mx_CreateRoom_body">
+                        <input type="text" ref="room_name" value={this.state.room_name} onChange={this.onNameChange} placeholder="Name"/> <br />
+                        <textarea className="mx_CreateRoom_description" ref="topic" value={this.state.topic} onChange={this.onTopicChange} placeholder="Topic"/> <br />
+                        <RoomAlias ref="alias" alias={this.state.alias} onChange={this.onAliasChanged}/> <br />
+                        <UserSelector ref="user_selector" selected_users={this.state.invited_users} onChange={this.onInviteChanged}/> <br />
+                        <Presets ref="presets" onChange={this.onPresetChanged} preset={this.state.preset}/> <br />
+                        <div>
+                            <label><input type="checkbox" ref="is_private" checked={this.state.is_private} onChange={this.onPrivateChanged}/> Make this room private</label>
+                        </div>
+                        <div>
+                            <label><input type="checkbox" ref="share_history" checked={this.state.share_history} onChange={this.onShareHistoryChanged}/> Share message history with new users</label>
+                        </div>
+                        <div>
+                            <label><input type="checkbox" ref="encrypt" checked={this.state.encrypt} onChange={this.onEncryptChanged}/> Encrypt room</label>
+                        </div>
+                        <div>
+                            <CreateRoomButton onCreateRoom={this.onCreateRoom} /> <br />
+                        </div>
+                        {error_box}
+                    </div>
                 </div>
             );
         }
diff --git a/skins/base/views/organisms/RoomDirectory.js b/skins/base/views/organisms/RoomDirectory.js
index eb5ea3de..ebbcc31d 100644
--- a/skins/base/views/organisms/RoomDirectory.js
+++ b/skins/base/views/organisms/RoomDirectory.js
@@ -76,26 +76,26 @@ module.exports = React.createClass({
 
         var rooms = this.state.publicRooms.filter(function(a) {
             // FIXME: if incrementally typing, keep narrowing down the search set
-            return (a.aliases[0].search(filter) >= 0);
+            return (a.aliases[0].search(filter) >= 0 && a.num_joined_members > 0);
         }).sort(function(a,b) {
-            return a.num_joined_members > b.num_joined_members;
+            return a.num_joined_members - b.num_joined_members;
         });
         var rows = [];
         var self = this;
         for (var i = 0; i < rooms.length; i++) {
             var name = rooms[i].name;
-            if (!name) {
-                if (rooms[i].aliases[0]) name = rooms[i].aliases[0] 
-            }
-            else {
-                if (rooms[i].aliases[0]) name += " (" + rooms[i].aliases[0] + ")";
-            }
+            // <img src={ MatrixClientPeg.get().getAvatarUrlForRoom(rooms[i].room_id, 40, 40, "crop") } width="40" height="40" alt=""/>
             rows.unshift(
-                <tr key={ rooms[i].room_id } onClick={self.joinRoom.bind(null, rooms[i].room_id)}>
-                    <td><img src={ MatrixClientPeg.get().getAvatarUrlForRoom(rooms[i].room_id, 40, 40, "crop") } width="40" height="40" alt=""/> { name }</td>
-                    <td>{ rooms[i].topic }</td>
-                    <td style={ {'text-align' : 'center'} }>{ rooms[i].num_joined_members }</td>
-                </tr>
+                <tbody key={ rooms[i].room_id }>
+                    <tr onClick={self.joinRoom.bind(null, rooms[i].room_id)}>
+                        <td className="mx_RoomDirectory_name">{ name }</td>
+                        <td>{ rooms[i].aliases[0] }</td>
+                        <td>{ rooms[i].num_joined_members }</td>
+                    </tr>
+                    <tr>
+                        <td className="mx_RoomDirectory_topic" colSpan="3">{ rooms[i].topic }</td>
+                    </tr>
+                </tbody>
             );
         }
         return rows;
@@ -118,10 +118,12 @@ module.exports = React.createClass({
                 <RoomHeader simpleHeader="Public Rooms" />
                 <div className="mx_RoomDirectory_list">
                     <input ref="roomAlias" placeholder="Join a room (e.g. #foo:domain.com)" className="mx_RoomDirectory_input" size="64" onKeyUp={ this.onKeyUp }/>
-                    <table className="mx_RoomDirectory_table">
-                        <tr><th>Room</th><th>Topic</th><th>Users</th></tr>
-                        { this.getRows(this.state.roomAlias) }
-                    </table>
+                    <div className="mx_RoomDirectory_tableWrapper">
+                        <table className="mx_RoomDirectory_table">
+                            <tr><th>Room</th><th>Alias</th><th>Members</th></tr>
+                            { this.getRows(this.state.roomAlias) }
+                        </table>
+                    </div>
                 </div>
             </div>
         );
diff --git a/skins/base/views/templates/Login.js b/skins/base/views/templates/Login.js
index 08cd060b..f882397b 100644
--- a/skins/base/views/templates/Login.js
+++ b/skins/base/views/templates/Login.js
@@ -164,7 +164,7 @@ module.exports = React.createClass({
             <div className="mx_Login">
                 <div className="mx_Login_box">
                     <div className="mx_Login_logo">
-                        <img  src="img/logo.png" width="249" height="76" alt="vector"/>
+                        <img  src="img/logo.png" width="249" height="78" alt="vector"/>
                     </div>
                     {this.loginContent()}
                 </div>
diff --git a/skins/base/views/templates/Register.js b/skins/base/views/templates/Register.js
index 784db4cf..8dbae47d 100644
--- a/skins/base/views/templates/Register.js
+++ b/skins/base/views/templates/Register.js
@@ -182,7 +182,7 @@ module.exports = React.createClass({
             <div className="mx_Login">
                 <div className="mx_Login_box">
                     <div className="mx_Login_logo">
-                        <img src="img/logo.png" width="249" height="76" alt="vector"/>
+                        <img src="img/logo.png" width="249" height="78" alt="vector"/>
                     </div>
                     {this.registerContent()}
                 </div>