From 9582c1e65a490c7797236b1740332d014a3bd66e Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Fri, 19 Oct 2018 15:33:23 -0600
Subject: [PATCH] Move all dialog buttons to the right and fix their order

Fixes https://github.com/vector-im/riot-web/issues/5689

Some dialogs had their own CSS that prevented the buttons from being placed in the right spot. This has been fixed by using a generic standard for the buttons. The only strange dialog that needed more CSS was the devtools dialog due to the header.

Not all dialogs have been checked - I spot-checked about half of them and verified the CSS manually on an established account. It's hard to get at all the dialogs without convoluted testing.
---
 res/css/_common.scss                           |  5 +++++
 res/css/_components.scss                       |  1 -
 res/css/views/dialogs/_ChatInviteDialog.scss   |  8 --------
 res/css/views/dialogs/_DevtoolsDialog.scss     |  4 ++++
 res/css/views/dialogs/_QuestionDialog.scss     | 18 ------------------
 src/components/views/dialogs/DevtoolsDialog.js |  4 ++--
 src/components/views/elements/DialogButtons.js | 10 +++++-----
 7 files changed, 16 insertions(+), 34 deletions(-)
 delete mode 100644 res/css/views/dialogs/_QuestionDialog.scss

diff --git a/res/css/_common.scss b/res/css/_common.scss
index 38f576a532..bf67edc1c3 100644
--- a/res/css/_common.scss
+++ b/res/css/_common.scss
@@ -222,6 +222,11 @@ textarea {
     word-wrap: break-word;
 }
 
+.mx_Dialog_buttons {
+    padding-right: 58px;
+    text-align: right;
+}
+
 .mx_Dialog button, .mx_Dialog input[type="submit"] {
     @mixin mx_DialogButton;
     margin-left: 0px;
diff --git a/res/css/_components.scss b/res/css/_components.scss
index 0e40b40a29..a09f895d5f 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -38,7 +38,6 @@
 @import "./views/dialogs/_DevtoolsDialog.scss";
 @import "./views/dialogs/_EncryptedEventDialog.scss";
 @import "./views/dialogs/_GroupAddressPicker.scss";
-@import "./views/dialogs/_QuestionDialog.scss";
 @import "./views/dialogs/_RoomUpgradeDialog.scss";
 @import "./views/dialogs/_SetEmailDialog.scss";
 @import "./views/dialogs/_SetMxIdDialog.scss";
diff --git a/res/css/views/dialogs/_ChatInviteDialog.scss b/res/css/views/dialogs/_ChatInviteDialog.scss
index 6fc211743d..dcc0f5921a 100644
--- a/res/css/views/dialogs/_ChatInviteDialog.scss
+++ b/res/css/views/dialogs/_ChatInviteDialog.scss
@@ -14,14 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_ChatInviteDialog {
-    /* XXX: padding-left is on mx_Dialog but padding-right has subsequently
-     * been added on other dialogs. Surely all our dialogs should have consistent
-     * right hand padding?
-     */
-    padding-right: 58px;
-}
-
 /* Using a textarea for this element, to circumvent autofill */
 .mx_ChatInviteDialog_input,
 .mx_ChatInviteDialog_input:focus
diff --git a/res/css/views/dialogs/_DevtoolsDialog.scss b/res/css/views/dialogs/_DevtoolsDialog.scss
index a4a868bd11..3764bb13b3 100644
--- a/res/css/views/dialogs/_DevtoolsDialog.scss
+++ b/res/css/views/dialogs/_DevtoolsDialog.scss
@@ -14,6 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.mx_DevTools_dialog {
+    padding-right: 58px;
+}
+
 .mx_DevTools_content {
     margin: 10px 0;
 }
diff --git a/res/css/views/dialogs/_QuestionDialog.scss b/res/css/views/dialogs/_QuestionDialog.scss
deleted file mode 100644
index 3d47f17592..0000000000
--- a/res/css/views/dialogs/_QuestionDialog.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-/*
-Copyright 2017 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.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-.mx_QuestionDialog {
-    padding-right: 58px;
-}
diff --git a/src/components/views/dialogs/DevtoolsDialog.js b/src/components/views/dialogs/DevtoolsDialog.js
index ea198461c5..22ee44f81a 100644
--- a/src/components/views/dialogs/DevtoolsDialog.js
+++ b/src/components/views/dialogs/DevtoolsDialog.js
@@ -625,7 +625,7 @@ export default class DevtoolsDialog extends React.Component {
         let body;
 
         if (this.state.mode) {
-            body = <div>
+            body = <div className="mx_DevTools_dialog">
                 <div className="mx_DevTools_label_left">{ this.state.mode.getLabel() }</div>
                 <div className="mx_DevTools_label_right">Room ID: { this.props.roomId }</div>
                 <div className="mx_DevTools_label_bottom" />
@@ -634,7 +634,7 @@ export default class DevtoolsDialog extends React.Component {
         } else {
             const classes = "mx_DevTools_RoomStateExplorer_button";
             body = <div>
-                <div>
+                <div className="mx_DevTools_dialog">
                     <div className="mx_DevTools_label_left">{ _t('Toolbox') }</div>
                     <div className="mx_DevTools_label_right">Room ID: { this.props.roomId }</div>
                     <div className="mx_DevTools_label_bottom" />
diff --git a/src/components/views/elements/DialogButtons.js b/src/components/views/elements/DialogButtons.js
index baf831415f..f314588caa 100644
--- a/src/components/views/elements/DialogButtons.js
+++ b/src/components/views/elements/DialogButtons.js
@@ -70,15 +70,15 @@ module.exports = React.createClass({
         }
         return (
             <div className="mx_Dialog_buttons">
+                { cancelButton }
+                { this.props.children }
                 <button className={primaryButtonClassName}
-                    onClick={this.props.onPrimaryButtonClick}
-                    autoFocus={this.props.focus}
-                    disabled={this.props.disabled}
+                        onClick={this.props.onPrimaryButtonClick}
+                        autoFocus={this.props.focus}
+                        disabled={this.props.disabled}
                 >
                     { this.props.primaryButton }
                 </button>
-                { this.props.children }
-                { cancelButton }
             </div>
         );
     },