From 7d6f5518416abd92b967d60633b7a1c06645302e Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Tue, 29 Jan 2019 21:14:16 +0100
Subject: [PATCH] small makeover of member info panel

this removes the style sharing between the verify buttons in the memberinfo panel and
and the encrypted event dialog because the diverge too much now.
---
 .../views/dialogs/_EncryptedEventDialog.scss  |  5 ++++-
 res/css/views/rooms/_MemberDeviceInfo.scss    | 15 +++++++------
 res/css/views/rooms/_MemberInfo.scss          | 21 +++++++++++--------
 .../views/elements/DeviceVerifyButtons.js     |  3 +--
 4 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/res/css/views/dialogs/_EncryptedEventDialog.scss b/res/css/views/dialogs/_EncryptedEventDialog.scss
index 58ed8b2527d..ff73df509dc 100644
--- a/res/css/views/dialogs/_EncryptedEventDialog.scss
+++ b/res/css/views/dialogs/_EncryptedEventDialog.scss
@@ -14,10 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_EncryptedEventDialog .mx_MemberDeviceInfo {
+.mx_EncryptedEventDialog .mx_DeviceVerifyButtons {
     float: right;
     padding: 0px;
     margin-right: 42px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
 }
 
 .mx_EncryptedEventDialog .mx_MemberDeviceInfo_textButton {
diff --git a/res/css/views/rooms/_MemberDeviceInfo.scss b/res/css/views/rooms/_MemberDeviceInfo.scss
index d4e4bb1adff..9fabd9153ee 100644
--- a/res/css/views/rooms/_MemberDeviceInfo.scss
+++ b/res/css/views/rooms/_MemberDeviceInfo.scss
@@ -15,13 +15,15 @@ limitations under the License.
 */
 
 .mx_MemberDeviceInfo {
-    padding: 10px 0px;
+    display: flex;
+    padding-bottom: 10px;
 }
 
-.mx_MemberDeviceInfo.mx_DeviceVerifyButtons {
+.mx_MemberDeviceInfo > .mx_DeviceVerifyButtons {
     display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
+    flex-direction: column;
+    flex: 0 1 auto;
+    align-items: stretch;
 }
 
 .mx_MemberDeviceInfo_textButton {
@@ -39,16 +41,13 @@ limitations under the License.
 }
 
 .mx_MemberDeviceInfo_deviceInfo {
-    margin-bottom: 10px;
-    padding-bottom: 10px;
-    border-bottom: 1px solid rgba(0,0,0,0.1);
+    margin: 0 5px 5px 8px;
 }
 
 /* "Unblacklist" is too long for a regular button: make it wider and
    reduce the padding. */
 .mx_EncryptedEventDialog .mx_MemberDeviceInfo_blacklist,
 .mx_EncryptedEventDialog .mx_MemberDeviceInfo_unblacklist {
-    width: 8em;
     padding-left: 1em;
     padding-right: 1em;
 }
diff --git a/res/css/views/rooms/_MemberInfo.scss b/res/css/views/rooms/_MemberInfo.scss
index 4af181a4640..99771fece07 100644
--- a/res/css/views/rooms/_MemberInfo.scss
+++ b/res/css/views/rooms/_MemberInfo.scss
@@ -43,7 +43,7 @@ limitations under the License.
 }
 
 .mx_MemberInfo_container {
-    padding: 8px;
+    margin: 0 16px 16px 16px;
 }
 
 .mx_MemberInfo .mx_RoomTile_nameContainer {
@@ -60,6 +60,7 @@ limitations under the License.
 
 .mx_MemberInfo_avatar {
     background: $tagpanel-bg-color;
+    margin-bottom: 16px;
 }
 
 .mx_MemberInfo_avatar > img {
@@ -83,15 +84,14 @@ limitations under the License.
 
 .mx_MemberInfo h3 {
     text-transform: uppercase;
-    color: $h3-color;
-    font-weight: 600;
-    font-size: 13px;
-    margin-top: 16px;
-    margin-bottom: 14px;
+    color: $input-darker-fg-color;
+    font-weight: bold;
+    font-size: 12px;
+    margin: 4px 0;
 }
 
 .mx_MemberInfo_profileField {
-    font-size: 13px;
+    font-size: 15px;
     position: relative;
 }
 
@@ -101,14 +101,17 @@ limitations under the License.
 
 .mx_MemberInfo_field {
     cursor: pointer;
-    font-size: 13px;
-    color: $accent-color;
+    font-size: 15px;
+    color: $primary-fg-color;
     margin-left: 8px;
     line-height: 23px;
 }
 
 .mx_MemberInfo_createRoom {
     cursor: pointer;
+    display: flex;
+    align-items: center;
+    padding: 0 8px;
 }
 
 .mx_MemberInfo_createRoom_label {
diff --git a/src/components/views/elements/DeviceVerifyButtons.js b/src/components/views/elements/DeviceVerifyButtons.js
index cfd79529f14..f0be1f4bf21 100644
--- a/src/components/views/elements/DeviceVerifyButtons.js
+++ b/src/components/views/elements/DeviceVerifyButtons.js
@@ -114,9 +114,8 @@ export default React.createClass({
             );
         }
 
-        // mx_MemberDeviceInfo because the vector's CSS on EncryptedEventDialog is awful
         return (
-            <div className="mx_MemberDeviceInfo mx_DeviceVerifyButtons" >
+            <div className="mx_DeviceVerifyButtons" >
                 { verifyButton }
                 { blacklistButton }
             </div>