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 ( -
+
{ verifyButton } { blacklistButton }