From 2ca9d87b95b673cdfc628be8b262dc64c4086c6e Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Thu, 23 Jun 2016 17:32:33 +0100
Subject: [PATCH] CSS for device blocking

A bunch of updates to the device info:

* format as a table
* make the buttons green, because the old way was super confusing
* instead make the status indicator red/orange/green.
---
 .../views/rooms/MemberDeviceInfo.css          | 29 ++++++++++++++-----
 .../views/rooms/MemberInfo.css                |  5 ++++
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberDeviceInfo.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberDeviceInfo.css
index 2031f4f188..4eef01ce1a 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberDeviceInfo.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberDeviceInfo.css
@@ -16,18 +16,18 @@ limitations under the License.
 
 .mx_MemberDeviceInfo {
     font-size: 12px;
-    margin-top: 5px;
+    display: table-row;
+    height: 17px;
 }
 
 .mx_MemberDeviceInfo div {
-    display: inline;
-    margin-right: 5px;
+    display: table-cell;
 }
 
 .mx_MemberDeviceInfo_textButton {
     color: #fff;
-    height: 20px;
-    border-radius: 20px;
+    background-color: #76cfa6;
+    border-radius: 17px;
     text-align: center;
     padding-left: 1em;
     padding-right: 1em;
@@ -35,10 +35,23 @@ limitations under the License.
     cursor: pointer;
 }
 
-.mx_MemberDeviceInfo_verify {
+.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_verified,
+.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_unverified,
+.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_blocked {
+    color: #fff;
+    width: 17px;
+    border-radius: 17px;
+    text-align: center;
+}
+
+.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_verified {
     background-color: #76cfa6;
 }
 
-.mx_MemberDeviceInfo_unverify {
+.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_unverified {
+    background-color: #eca46f;
+}
+
+.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_blocked {
     background-color: #e55e5e;
-}
\ No newline at end of file
+}
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css
index 30de93242e..829c822784 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css
@@ -72,3 +72,8 @@ limitations under the License.
     margin-left: 8px;
     line-height: 23px;
 }
+
+.mx_MemberInfo_devices {
+    display: table;
+    border-spacing: 5px;
+}
\ No newline at end of file