Merge pull request #2868 from matrix-org/dbkr/dialog_redesign

Design tweaks to dialogs

res/css/views/dialogs/_AddressPickerDialog.scss

@@ -1,5 +1,6 @@
 /*
 Copyright 2016 OpenMarket Ltd
+Copyright 2019 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,8 +16,8 @@ limitations under the License.
 */
 
 /* Using a textarea for this element, to circumvent autofill */
-.mx_ChatInviteDialog_input,
-.mx_ChatInviteDialog_input:focus
+.mx_AddressPickerDialog_input,
+.mx_AddressPickerDialog_input:focus
 {
     height: 26px;
     font-size: 14px;
@@ -34,11 +35,11 @@ limitations under the License.
     word-wrap: nowrap;
 }
 
-.mx_ChatInviteDialog .mx_Dialog_content {
+.mx_AddressPickerDialog .mx_Dialog_content {
     min-height: 50px
 }
 
-.mx_ChatInviteDialog_inputContainer {
+.mx_AddressPickerDialog_inputContainer {
     border-radius: 3px;
     border: solid 1px $input-border-color;
     line-height: 36px;
@@ -51,19 +52,19 @@ limitations under the License.
     overflow-y: auto;
 }
 
-.mx_ChatInviteDialog_error {
+.mx_AddressPickerDialog_error {
     margin-top: 10px;
     color: $warning-color;
 }
 
-.mx_ChatInviteDialog_cancel {
+.mx_AddressPickerDialog_cancel {
     position: absolute;
     right: 11px;
     top: 13px;
     cursor: pointer;
 }
 
-.mx_ChatInviteDialog_cancel object {
+.mx_AddressPickerDialog_cancel object {
     pointer-events: none;
 }
 

res/css/views/dialogs/_SettingsDialog.scss

@@ -21,7 +21,7 @@ limitations under the License.
         height: 80%;
         border-radius: 4px;
         padding-top: 0;
-        padding-right: 0;
+        padding-right: 30px;
         padding-left: 0;
 
         .mx_TabbedView {
@@ -31,7 +31,7 @@ limitations under the License.
         .mx_TabbedView .mx_SettingsTab {
             box-sizing: border-box;
             min-width: 580px;
-            padding-right: 130px;
+            padding-right: 100px;
 
             // Put some padding on the bottom to avoid the settings tab from
             // colliding harshly with the dialog when scrolled down.
@@ -43,5 +43,8 @@ limitations under the License.
             margin-top: 16px;
             margin-bottom: 24px;
         }
+        .mx_Dialog_fixedWidth {
+            width: 90vw;
+        }
     }
 }

res/css/views/dialogs/_UploadConfirmDialog.scss

@@ -30,4 +30,6 @@ limitations under the License.
 .mx_UploadConfirmDialog_imagePreview {
     max-height: 300px;
     max-width: 100%;
+    border-radius: 4px;
+    border: 1px solid $dialog-close-fg-color;
 }