vector wireframes

skins/base/css/molecules/MemberTile.css

@@ -0,0 +1,37 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_MemberTile {
+    cursor: pointer;
+    display: table-row;
+}
+
+.mx_MemberTile_avatar {
+	display: table-cell;
+	padding-right: 12px;
+	padding-top: 3px;
+	padding-bottom: 3px;
+	vertical-align: middle;
+	width: 32px;
+	height: 32px;
+}
+
+.mx_MemberTile_name {
+	display: table-cell;
+	vertical-align: middle;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}

skins/base/css/molecules/MessageComposer.css

@@ -14,7 +14,50 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_MessageComposer textarea {
-    width: 100%;
+.mx_MessageComposer_wrapper {
+    max-width: 720px;
+    height: 50px;
+    vertical-align: middle;
     margin: auto;
+    border-top: 1px solid #d8d8d8;
+    border-left: 1px solid #d8d8d8;
+    border-right: 1px solid #d8d8d8;
 }
+
+.mx_MessageComposer_row {
+	display: table-row;
+	width: 100%;
+	height: 50px;
+}
+
+.mx_MessageComposer .mx_MessageComposer_avatar {
+	display: table-cell;
+	padding-left: 12px;
+	padding-right: 12px;
+	padding-top: 3px;
+	padding-bottom: 3px;
+	vertical-align: middle;
+	width: 32px;
+	height: 32px;
+}
+
+.mx_MessageComposer_input {
+	display: table-cell;
+    width: 100%;
+    padding-right: 1em;
+	vertical-align: middle;
+}
+
+.mx_MessageComposer_input textarea {
+    font-size: 15px;
+    width: 100%;
+    height: 1em;
+    border: 0px;
+    resize: none;
+	outline: none;
+	padding-top: 0.7em;
+	padding-bottom: 0.7em;
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;    
+}

skins/base/css/molecules/MessageTile.css

@@ -15,11 +15,31 @@ limitations under the License.
 */
 
 .mx_MessageTile {
-	display: table-row;
+	width: 100%;
+	clear: both;
+	margin-top: 32px;
+}
+
+.mx_MessageTile_avatar {
+	padding-left: 12px;
+	padding-right: 12px;
+	margin-top: -7px;
+	float: left;
+}
+
+.mx_MessageTile .mx_SenderProfile {
+	color: #acacac;
+	font-size: 13px;
+	display: block;
+}
+
+.mx_MessageTile .mx_MessageTimestamp {
+	color: #acacac;
+	font-size: 13px;
+	float: right;
 }
 
 .mx_MessageTile_content {
-	display: table-cell;
 }
 
 .mx_MessageTile_sending {

skins/base/css/molecules/RoomDropTarget.css

@@ -0,0 +1,27 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_RoomDropTarget {
+	font-size: 14px;
+	text-align: center;
+	margin-left: -8px;
+	margin-right: -8px;
+	padding-top: 16px;
+	padding-bottom: 16px;
+	background-color: #fbfbfb;
+	border: 1px dashed #d7d7d7;
+	border-radius: 8px;
+}

skins/base/css/molecules/RoomHeader.css

@@ -15,6 +15,45 @@ limitations under the License.
 */
 
 .mx_RoomHeader {
-    height: 1em;
-    padding: 0px;
 }
+
+.mx_RoomHeader_wrapper {
+	max-width: 720px;
+	margin: auto;
+	height: 50px;
+}
+
+.mx_RoomHeader_leftRow {
+	display: table-row;
+	height: 50px;
+	float: left;
+}
+
+.mx_RoomHeader_rightRow {
+	display: table-row;
+	height: 50px;
+	float: right;
+}
+
+.mx_RoomHeader_name {
+	display: table-cell;
+	vertical-align: middle;
+	height: 50px;
+	font-weight: 400;
+	font-size: 20px;
+	padding-left: 16px;
+	padding-right: 16px;
+}
+
+.mx_RoomHeader_avatar {
+	display: table-cell;
+	height: 50px;
+	vertical-align: middle;
+}
+
+.mx_RoomHeader_button {
+	height: 50px;
+	display: table-cell;
+	vertical-align: middle;
+	padding-right: 16px;	
+}

skins/base/css/molecules/RoomTile.css

@@ -15,31 +15,40 @@ limitations under the License.
 */
 
 .mx_RoomTile {
-    padding: 5px;
     cursor: pointer;
+    display: table-row;
 }
 
-.mx_RoomTile.selected {
+.mx_RoomTile_selected {
     text-decoration: underline;
 }
 
-.mx_RoomTile_name {
+.mx_RoomTile_avatar {
+	display: table-cell;
+	padding-right: 12px;
+	padding-top: 3px;
+	padding-bottom: 3px;
+	vertical-align: middle;
+	width: 32px;
+	height: 32px;
 }
 
-.mx_RoomTile div {
+.mx_RoomTile_name {
+	display: table-cell;
+	vertical-align: middle;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
-.mx_RoomTile.unread {
+.mx_RoomTile_unread {
     font-weight: bold;
 }
 
-.mx_RoomTile.highlight {
+.mx_RoomTile_highlight {
     background-color: lime;
 }
 
-.mx_RoomTile.invited {
+.mx_RoomTile_invited {
     font-weight: bold;
 }
 

skins/base/css/molecules/SenderProfile.css

@@ -15,6 +15,4 @@ limitations under the License.
 */
 
 .mx_SenderProfile {
-    display: table-cell;
-    padding: 0px 1em 0em 1em;
 }