Fix UX issues with bug report dialog

* Make it use BaseDialog / DialogButtons (also gives it has a top-right 'x' &
   escape to cancel works)
 * Stop misusing the 'danger' CSS class on the buttons. There is nothing dangerous
   about submitting logs.
 * Continued campaign against 'Click here' links.

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

src/components/structures/UserSettings.js

@@ -1,7 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
-Copyright 2017 New Vector Ltd
+Copyright 2017, 2018 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.
@@ -804,7 +804,7 @@ module.exports = React.createClass({
                             "other users. They do not contain messages.",
                         )
                     }</p>
-                    <button className="mx_UserSettings_button danger"
+                    <button className="mx_UserSettings_button"
                         onClick={this._onBugReportClicked}>{ _t('Submit debug logs') }
                     </button>
                 </div>

src/components/views/dialogs/BugReportDialog.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2017 OpenMarket Ltd
+Copyright 2018 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.
@@ -105,6 +106,8 @@ export default class BugReportDialog extends React.Component {
 
     render() {
         const Loader = sdk.getComponent("elements.Spinner");
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
 
         let error = null;
         if (this.state.err) {
@@ -113,13 +116,6 @@ export default class BugReportDialog extends React.Component {
             </div>;
         }
 
-        let cancelButton = null;
-        if (!this.state.busy) {
-            cancelButton = <button onClick={this._onCancel}>
-                { _t("Cancel") }
-            </button>;
-        }
-
         let progress = null;
         if (this.state.busy) {
             progress = (
@@ -131,11 +127,11 @@ export default class BugReportDialog extends React.Component {
         }
 
         return (
-            <div className="mx_BugReportDialog">
-                <div className="mx_Dialog_title">
-                    { _t("Submit debug logs") }
-                </div>
-                <div className="mx_Dialog_content">
+            <BaseDialog className="mx_BugReportDialog" onFinished={this._onCancel}
+                    title={_t('Submit debug logs')}
+                contentId='mx_Dialog_content'
+            >
+                <div className="mx_Dialog_content" id='mx_Dialog_content'>
                     <p>
                         { _t(
                             "Debug logs contain application usage data including your " +
@@ -146,7 +142,7 @@ export default class BugReportDialog extends React.Component {
                     </p>
                     <p>
                         { _t(
-                            "<a>Click here</a> to create a GitHub issue.",
+                            "Riot bugs are tracked on GitHub: <a>create a GitHub issue</a>.",
                             {},
                             {
                                 a: (sub) => <a
@@ -191,19 +187,13 @@ export default class BugReportDialog extends React.Component {
                     {progress}
                     {error}
                 </div>
-                <div className="mx_Dialog_buttons">
-                    <button
-                        className="mx_Dialog_primary danger"
-                        onClick={this._onSubmit}
-                        autoFocus={true}
-                        disabled={this.state.busy}
-                    >
-                        { _t("Send logs") }
-                    </button>
-
-                    {cancelButton}
-                </div>
-            </div>
+                <DialogButtons primaryButton={_t("Send logs")}
+                    onPrimaryButtonClick={this._onSubmit}
+                    focus={true}
+                    onCancel={this._onCancel}
+                    disabled={this.state.busy}
+                />
+            </BaseDialog>
         );
     }
 }

src/components/views/elements/DialogButtons.js

@@ -39,11 +39,14 @@ module.exports = React.createClass({
         onCancel: PropTypes.func,
 
         focus: PropTypes.bool,
+
+        disabled: PropTypes.bool,
     },
 
     getDefaultProps: function() {
         return {
             hasCancel: true,
+            disabled: false,
         }
     },
 
@@ -56,18 +59,23 @@ module.exports = React.createClass({
         if (this.props.primaryButtonClass) {
             primaryButtonClassName += " " + this.props.primaryButtonClass;
         }
+        let cancelButton;
+        if (this.props.hasCancel) {
+            cancelButton = <button onClick={this._onCancelClick} disabled={this.props.disabled}>
+                { _t("Cancel") }
+            </button>;
+        }
         return (
             <div className="mx_Dialog_buttons">
                 <button className={primaryButtonClassName}
                     onClick={this.props.onPrimaryButtonClick}
                     autoFocus={this.props.focus}
+                    disabled={this.props.disabled}
                 >
                     { this.props.primaryButton }
                 </button>
                 { this.props.children }
-                { this.props.hasCancel ? <button onClick={this._onCancelClick}>
-                    { _t("Cancel") }
-                </button> : null }
+                { cancelButton }
             </div>
         );
     },