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

@@ -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;

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";

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

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;
 }

res/css/views/dialogs/_QuestionDialog.scss

@@ -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;
-}

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" />

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}
+                        onClick={this.props.onPrimaryButtonClick}
-                    autoFocus={this.props.focus}
+                        autoFocus={this.props.focus}
-                    disabled={this.props.disabled}
+                        disabled={this.props.disabled}
                 >
                     { this.props.primaryButton }
                 </button>
-                { this.props.children }
-                { cancelButton }
             </div>
         );
     },