From 8e0f7f18a0d5f256b6086f5cfcf0f580c9545f30 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Wed, 3 Aug 2016 11:21:00 +0100
Subject: [PATCH] Design update to match the new Zeplin designs

---
 .../matrix-react-sdk/views/rooms/RoomTile.css | 25 +++++++------------
 .../css/vector-web/structures/LeftPanel.css   |  8 ++++--
 .../css/vector-web/structures/RoomSubList.css |  4 +--
 3 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css
index ecf29a00a4..de1b09331c 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css
@@ -17,10 +17,9 @@ limitations under the License.
 .mx_RoomTile {
     position: relative;
     cursor: pointer;
-    /* This fixes wrapping of long room names, but breaks drag & drop previews */
-    /* display: table-row; */
     font-size: 13px;
     display: block;
+    height: 34px;
 }
 
 .mx_RoomTile .mx_RoomTile_mute {
@@ -29,14 +28,14 @@ limitations under the License.
 
 .mx_RoomTile_nameContainer {
     display: inline-block;
-    width: 170px;
+    width: 180px;
     height: 24px;
 }
 
 .mx_RoomTile_avatar {
     display: inline-block;
-    padding-top: 6px;
-    padding-bottom: 6px;
+    padding-top: 5px;
+    padding-bottom: 5px;
     padding-left: 18px;
     padding-right: 6px;
     width: 24px;
@@ -47,7 +46,7 @@ limitations under the License.
 .mx_RoomTile_name {
     display: inline-block;
     position: relative;
-    width: 157px;
+    width: 165px;
     vertical-align: middle;
     padding-left: 6px;
     padding-right: 6px;
@@ -69,10 +68,6 @@ limitations under the License.
 */
 }
 
-.collapsed .mx_RoomTile {
-    height: 36px;
-}
-
 .collapsed .mx_RoomTile_nameContainer {
     height: 0;
 }
@@ -129,7 +124,7 @@ limitations under the License.
     min-width: 14px;
     height: 17px;
     position: absolute;
-    right: 9px;
+    right: 8px; /*gutter */
     top: 9px;
     border-radius: 14px;
     color: #fff;
@@ -154,6 +149,7 @@ limitations under the License.
     letter-spacing: 0.1em;
     opacity: 1;
     top: 9px;
+    right: 8px; /* gutter */
 }
 
 /* Position mute icon when room muted */
@@ -161,6 +157,7 @@ limitations under the License.
     background-color: rgba(0,0,0,0);
     opacity: 1;
     top: 11px;
+    right: 6px;
 }
 
 .mx_RoomTile_unreadNotify .mx_RoomTile_badge {
@@ -180,7 +177,7 @@ limitations under the License.
     font-weight: 600;
 }
 
-.mx_RoomTile_selected .mx_RoomTile_name {
+.mx_RoomTile_selected {
     background-color: rgba(118,207,166,0.2);
 }
 
@@ -188,10 +185,6 @@ limitations under the License.
     width: 144px;
 }
 
-.mx_RoomTile.mx_RoomTile_selected .mx_RoomTile_name.mx_RoomTile_badgeShown {
-    width: 136px;
-}
-
 .mx_RoomTile_arrow {
     position: absolute;
     right: 0px;
diff --git a/src/skins/vector/css/vector-web/structures/LeftPanel.css b/src/skins/vector/css/vector-web/structures/LeftPanel.css
index 7905f2f658..316246cb33 100644
--- a/src/skins/vector/css/vector-web/structures/LeftPanel.css
+++ b/src/skins/vector/css/vector-web/structures/LeftPanel.css
@@ -63,8 +63,8 @@ limitations under the License.
     order: 3;
 
     border-top: 1px solid rgba(0, 0, 0, 0.1);
-    margin-left: 18px;
-    margin-right: 18px;
+    margin-left: 16px; /* gutter */
+    margin-right: 16px; /* gutter */
     -webkit-flex: 0 0 60px;
     flex: 0 0 60px;
     z-index: 1;
@@ -100,3 +100,7 @@ limitations under the License.
 .mx_LeftPanel .mx_BottomLeftMenu_settings {
     float: right;
 }
+
+.mx_LeftPanel.collapsed .mx_BottomLeftMenu_settings {
+    float: none;
+}
diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css
index 83f8c873b0..b54fea9818 100644
--- a/src/skins/vector/css/vector-web/structures/RoomSubList.css
+++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css
@@ -25,8 +25,8 @@ limitations under the License.
     color: #3d3b39;
     font-weight: 600;
     font-size: 13px;
-    padding-left: 18px;
-    padding-right: 18px;
+    padding-left: 16px; /* gutter */
+    padding-right: 16px; /* gutter */
     margin-top: 8px;
     margin-bottom: 4px;
     cursor: pointer;