From 670f6e4f99cf0a9f4029ab701d9af650b1d378fd Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Mon, 8 Apr 2019 16:48:42 +0100
Subject: [PATCH] Simplify settings dialog CSS

Stop the settings dialogs from requiring special styles on the
mx_Dialog which required passing in a classname from anywhere the
settings dialogs were opened (although this still requires
static=true). Some of the things have now been adopted for all dialogs
(border-radius), others have been moved to within the dialog content.
---
 res/css/structures/_TabbedView.scss        |  2 +-
 res/css/views/dialogs/_SettingsDialog.scss | 56 ++++++++++------------
 src/components/structures/MatrixChat.js    |  4 +-
 src/stores/RoomViewStore.js                |  2 +-
 4 files changed, 28 insertions(+), 36 deletions(-)

diff --git a/res/css/structures/_TabbedView.scss b/res/css/structures/_TabbedView.scss
index 29e7c401e6..eef491774a 100644
--- a/res/css/structures/_TabbedView.scss
+++ b/res/css/structures/_TabbedView.scss
@@ -91,4 +91,4 @@ limitations under the License.
     flex-grow: 1;
     overflow: auto;
     min-height: 0; // firefox
-}
\ No newline at end of file
+}
diff --git a/res/css/views/dialogs/_SettingsDialog.scss b/res/css/views/dialogs/_SettingsDialog.scss
index 925f966216..ed1738d6b4 100644
--- a/res/css/views/dialogs/_SettingsDialog.scss
+++ b/res/css/views/dialogs/_SettingsDialog.scss
@@ -14,37 +14,29 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_SettingsDialog {
-    .mx_Dialog {
-        height: 80%;
-        border-radius: 4px;
-        padding-top: 0;
-        padding-right: 30px;
-        padding-left: 0;
-
-        .mx_TabbedView {
-            top: 65px;
-        }
-
-        .mx_TabbedView .mx_SettingsTab {
-            box-sizing: border-box;
-            min-width: 580px;
-            padding-right: 100px;
-
-            // Put some padding on the bottom to avoid the settings tab from
-            // colliding harshly with the dialog when scrolled down.
-            padding-bottom: 100px;
-        }
-
-        .mx_Dialog_title {
-            text-align: center;
-            margin-top: 16px;
-            margin-bottom: 24px;
-        }
-
-        .mx_Dialog_fixedWidth {
-            max-width: 1000px;
-            width: 90vw;
-        }
+// Not actually a component but things shared by settings components
+.mx_UserSettingsDialog, .mx_RoomSettingsDialog {
+    .mx_TabbedView {
+        top: 65px;
     }
+
+    .mx_TabbedView .mx_SettingsTab {
+        box-sizing: border-box;
+        min-width: 580px;
+        padding-right: 100px;
+
+        // Put some padding on the bottom to avoid the settings tab from
+        // colliding harshly with the dialog when scrolled down.
+        padding-bottom: 100px;
+    }
+
+    .mx_Dialog_title {
+        text-align: center;
+        margin-bottom: 24px;
+    }
+
+    max-width: 1000px;
+    width: 90vw;
+    // set the height too since tabbed view scrolls itself.
+    height: 80vh;
 }
diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index 19ac145c08..38d6700de7 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -597,8 +597,8 @@ export default React.createClass({
                 break;
             case 'view_user_settings': {
                 const UserSettingsDialog = sdk.getComponent("dialogs.UserSettingsDialog");
-                Modal.createTrackedDialog('User settings', '', UserSettingsDialog, {}, 'mx_SettingsDialog',
-                    /*isPriority=*/false, /*isStatic=*/true);
+                Modal.createTrackedDialog('User settings', '', UserSettingsDialog, {},
+                    /*className*/null, /*isPriority=*/false, /*isStatic=*/true);
 
                 // View the welcome or home page if we need something to look at
                 this._viewSomethingBehindModal();
diff --git a/src/stores/RoomViewStore.js b/src/stores/RoomViewStore.js
index d8556f661e..37490ecd62 100644
--- a/src/stores/RoomViewStore.js
+++ b/src/stores/RoomViewStore.js
@@ -120,7 +120,7 @@ class RoomViewStore extends Store {
                 const RoomSettingsDialog = sdk.getComponent("dialogs.RoomSettingsDialog");
                 Modal.createTrackedDialog('Room settings', '', RoomSettingsDialog, {
                     roomId: payload.room_id || this._state.roomId,
-                }, 'mx_SettingsDialog', /*isPriority=*/false, /*isStatic=*/true);
+                }, /*className*/null, /*isPriority=*/false, /*isStatic=*/true);
                 break;
             }
         }