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 58ed8b2527..ff73df509d 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 d4e4bb1adf..9fabd9153e 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 4af181a464..99771fece0 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 cfd79529f1..f0be1f4bf2 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>