From 8bb16466d68a06fe9f05bf1e8ddbbe0be34229b1 Mon Sep 17 00:00:00 2001
From: Aidan Gauland <aidalgol@fastmail.net>
Date: Mon, 18 Dec 2017 22:36:12 +1300
Subject: [PATCH 01/16] Rebase AddressSelector on BaseDialog

---
 .../views/dialogs/AddressPickerDialog.js          | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/src/components/views/dialogs/AddressPickerDialog.js b/src/components/views/dialogs/AddressPickerDialog.js
index 837d2f5349..716c6dac29 100644
--- a/src/components/views/dialogs/AddressPickerDialog.js
+++ b/src/components/views/dialogs/AddressPickerDialog.js
@@ -20,7 +20,6 @@ import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 import sdk from '../../../index';
 import MatrixClientPeg from '../../../MatrixClientPeg';
-import AccessibleButton from '../elements/AccessibleButton';
 import Promise from 'bluebird';
 import { addressTypes, getAddressType } from '../../../UserAddress.js';
 import GroupStoreCache from '../../../stores/GroupStoreCache';
@@ -507,7 +506,7 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        const TintableSvg = sdk.getComponent("elements.TintableSvg");
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         const AddressSelector = sdk.getComponent("elements.AddressSelector");
         this.scrollElement = null;
 
@@ -580,14 +579,8 @@ module.exports = React.createClass({
         }
 
         return (
-            <div className="mx_ChatInviteDialog" onKeyDown={this.onKeyDown}>
-                <div className="mx_Dialog_title">
-                    { this.props.title }
-                </div>
-                <AccessibleButton className="mx_ChatInviteDialog_cancel"
-                        onClick={this.onCancel} >
-                    <TintableSvg src="img/icons-close-button.svg" width="35" height="35" />
-                </AccessibleButton>
+            <BaseDialog className="mx_ChatInviteDialog" onKeyDown={this.onKeyDown}
+                onFinished={this.props.onFinished} title={this.props.title}>
                 <div className="mx_ChatInviteDialog_label">
                     <label htmlFor="textinput">{ this.props.description }</label>
                 </div>
@@ -602,7 +595,7 @@ module.exports = React.createClass({
                         { this.props.button }
                     </button>
                 </div>
-            </div>
+            </BaseDialog>
         );
     },
 });

From c5284eb07039845a2d03968c593af6b379529b45 Mon Sep 17 00:00:00 2001
From: Aidan Gauland <aidalgol@fastmail.net>
Date: Mon, 18 Dec 2017 23:06:21 +1300
Subject: [PATCH 02/16] Allow BaseDialog to take a class for the title <div>

Some dialogs need to set additional classes on the `mx_Dialog_title` `div`
element (for example `danger`).
---
 src/components/views/dialogs/BaseDialog.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/dialogs/BaseDialog.js b/src/components/views/dialogs/BaseDialog.js
index b88a6c026e..56c8322c0b 100644
--- a/src/components/views/dialogs/BaseDialog.js
+++ b/src/components/views/dialogs/BaseDialog.js
@@ -75,7 +75,7 @@ export default React.createClass({
                 >
                     <TintableSvg src="img/icons-close-button.svg" width="35" height="35" />
                 </AccessibleButton>
-                <div className='mx_Dialog_title'>
+                <div className={'mx_Dialog_title ' + this.props.titleClass}>
                     { this.props.title }
                 </div>
                 { this.props.children }

From 9ebd58852c7ccc68a445121389ddd43eec157dc2 Mon Sep 17 00:00:00 2001
From: Aidan Gauland <aidalgol@fastmail.net>
Date: Mon, 18 Dec 2017 23:08:51 +1300
Subject: [PATCH 03/16] Rebase DeactivateAccountDialog on BaseDialog

---
 .../views/dialogs/DeactivateAccountDialog.js         | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/views/dialogs/DeactivateAccountDialog.js b/src/components/views/dialogs/DeactivateAccountDialog.js
index c45e072d72..2af9acfbb5 100644
--- a/src/components/views/dialogs/DeactivateAccountDialog.js
+++ b/src/components/views/dialogs/DeactivateAccountDialog.js
@@ -77,6 +77,7 @@ export default class DeactivateAccountDialog extends React.Component {
     }
 
     render() {
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         const Loader = sdk.getComponent("elements.Spinner");
         let passwordBoxClass = '';
 
@@ -99,10 +100,11 @@ export default class DeactivateAccountDialog extends React.Component {
         }
 
         return (
-            <div className="mx_DeactivateAccountDialog">
-                <div className="mx_Dialog_title danger">
-                    { _t("Deactivate Account") }
-                </div>
+            <BaseDialog className="mx_DeactivateAccountDialog"
+                onFinished={this.props.onFinished}
+                onEnterPressed={this.onOk}
+                titleClass="danger"
+                title={_t("Deactivate Account")}>
                 <div className="mx_Dialog_content">
                     <p>{ _t("This will make your account permanently unusable. You will not be able to re-register the same user ID.") }</p>
 
@@ -130,7 +132,7 @@ export default class DeactivateAccountDialog extends React.Component {
 
                     { cancelButton }
                 </div>
-            </div>
+            </BaseDialog>
         );
     }
 }

From 45d86ea7ca764c00dac2ae4c04a09bfc89eb23ab Mon Sep 17 00:00:00 2001
From: Aidan Gauland <aidalgol@fastmail.net>
Date: Thu, 21 Dec 2017 23:48:46 +1300
Subject: [PATCH 04/16] Add DialogButton component

A component to normalise the buttons in dialogs.
---
 .../views/elements/DialogButtons.js           | 61 +++++++++++++++++++
 1 file changed, 61 insertions(+)
 create mode 100644 src/components/views/elements/DialogButtons.js

diff --git a/src/components/views/elements/DialogButtons.js b/src/components/views/elements/DialogButtons.js
new file mode 100644
index 0000000000..e730bfb377
--- /dev/null
+++ b/src/components/views/elements/DialogButtons.js
@@ -0,0 +1,61 @@
+/*
+Copyright 2015, 2016 OpenMarket 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.
+*/
+
+"use strict";
+
+import React from "react";
+import { _t } from '../../../languageHandler';
+
+/**
+ * Basic container for buttons in modal dialogs.
+ */
+module.exports = React.createClass({
+    displayName: "DialogButtons",
+
+    propTypes: {
+        // The primary button which is styled differently and has default focus.
+        primaryButton: React.PropTypes.node.isRequired,
+
+        // onClick handler for the primary button.
+        onPrimaryButtonClick: React.PropTypes.func.isRequired,
+
+        // onClick handler for the cancel button.
+        onCancel: React.PropTypes.func.isRequired,
+
+        focus: React.PropTypes.bool,
+    },
+
+    render: function() {
+        let primaryButtonClassName = "mx_Dialog_primary";
+        if (this.props.primaryButtonClass) {
+            primaryButtonClassName += " " + this.props.primaryButtonClass;
+        }
+        return (
+            <div className="mx_Dialog_buttons">
+                <button className={primaryButtonClassName}
+                    onClick={this.props.onPrimaryButtonClick}
+                    autoFocus={this.props.focus}
+                >
+                    { this.props.primaryButton }
+                </button>
+                { this.props.children }
+                <button onClick={this.props.onCancel}>
+                    { _t("Cancel") }
+                </button>
+            </div>
+        );
+    },
+});

From 3b2c61e4566512b3f513aacd2ccfece2dbc37e31 Mon Sep 17 00:00:00 2001
From: Aidan Gauland <aidalgol@fastmail.net>
Date: Thu, 21 Dec 2017 23:51:14 +1300
Subject: [PATCH 05/16] Use DialogButtons in QuestionDialog

Use DialogButtons to eliminate duplicate button code.
---
 .../views/dialogs/QuestionDialog.js           | 30 ++++++++-----------
 1 file changed, 13 insertions(+), 17 deletions(-)

diff --git a/src/components/views/dialogs/QuestionDialog.js b/src/components/views/dialogs/QuestionDialog.js
index 339b284e2f..4197199bde 100644
--- a/src/components/views/dialogs/QuestionDialog.js
+++ b/src/components/views/dialogs/QuestionDialog.js
@@ -18,7 +18,6 @@ limitations under the License.
 import React from 'react';
 import sdk from '../../../index';
 import { _t } from '../../../languageHandler';
-import classnames from 'classnames';
 
 export default React.createClass({
     displayName: 'QuestionDialog',
@@ -53,30 +52,27 @@ export default React.createClass({
 
     render: function() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-        const cancelButton = this.props.hasCancelButton ? (
-            <button onClick={this.onCancel}>
-                { _t("Cancel") }
-            </button>
-        ) : null;
-        const buttonClasses = classnames({
-            mx_Dialog_primary: true,
-            danger: this.props.danger,
-        });
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+        let primaryButtonClass = "";
+        if (this.props.danger) {
+            primaryButtonClass = "danger";
+        }
         return (
             <BaseDialog className="mx_QuestionDialog" onFinished={this.props.onFinished}
                 onEnterPressed={this.onOk}
                 title={this.props.title}
+                focus={this.props.focus}
             >
                 <div className="mx_Dialog_content">
                     { this.props.description }
-                </div>
-                <div className="mx_Dialog_buttons">
-                    <button className={buttonClasses} onClick={this.onOk} autoFocus={this.props.focus}>
-                        { this.props.button || _t('OK') }
-                    </button>
+                </div>.
+                <DialogButtons primaryButton={this.props.button || _t('OK')}
+                    onPrimaryButtonClick={this.onOk}
+                    primaryButtonClass={primaryButtonClass}
+                    onCancel={this.onCancel}
+                >
                     { this.props.extraButtons }
-                    { cancelButton }
-                </div>
+                </DialogButtons>
             </BaseDialog>
         );
     },

From 0f6125e74958cc7e2e62f4a60916804a72df0311 Mon Sep 17 00:00:00 2001
From: Aidan Gauland <aidalgol@fastmail.net>
Date: Sat, 23 Dec 2017 10:12:47 +1300
Subject: [PATCH 06/16] Use DialogButtons in AddressSelector

Use DialogButtons to eliminate duplicate button code.
---
 src/components/views/dialogs/AddressPickerDialog.js | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/views/dialogs/AddressPickerDialog.js b/src/components/views/dialogs/AddressPickerDialog.js
index 716c6dac29..685c4fcde3 100644
--- a/src/components/views/dialogs/AddressPickerDialog.js
+++ b/src/components/views/dialogs/AddressPickerDialog.js
@@ -507,6 +507,7 @@ module.exports = React.createClass({
 
     render: function() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
         const AddressSelector = sdk.getComponent("elements.AddressSelector");
         this.scrollElement = null;
 
@@ -590,11 +591,9 @@ module.exports = React.createClass({
                     { addressSelector }
                     { this.props.extraNode }
                 </div>
-                <div className="mx_Dialog_buttons">
-                    <button className="mx_Dialog_primary" onClick={this.onButtonClick}>
-                        { this.props.button }
-                    </button>
-                </div>
+                <DialogButtons primaryButton={this.props.button}
+                    onPrimaryButtonClick={this.onButtonClick}
+                    onCancel={this.onCancel} />
             </BaseDialog>
         );
     },

From c863dbfc7601f254edf3c7ec7bcf7e18575cfd36 Mon Sep 17 00:00:00 2001
From: Aidan Gauland <aidalgol@fastmail.net>
Date: Sat, 23 Dec 2017 13:42:44 +1300
Subject: [PATCH 07/16] Use DialogButtons in CreateRoomDialog

Use DialogButtons to eliminate duplicate button code.
---
 src/components/views/dialogs/CreateRoomDialog.js | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/components/views/dialogs/CreateRoomDialog.js b/src/components/views/dialogs/CreateRoomDialog.js
index f7be47b3eb..a53f88f707 100644
--- a/src/components/views/dialogs/CreateRoomDialog.js
+++ b/src/components/views/dialogs/CreateRoomDialog.js
@@ -41,6 +41,7 @@ export default React.createClass({
 
     render: function() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
         return (
             <BaseDialog className="mx_CreateRoomDialog" onFinished={this.props.onFinished}
                 onEnterPressed={this.onOk}
@@ -67,14 +68,9 @@ export default React.createClass({
                         </div>
                     </details>
                 </div>
-                <div className="mx_Dialog_buttons">
-                    <button onClick={this.onCancel}>
-                        { _t('Cancel') }
-                    </button>
-                    <button className="mx_Dialog_primary" onClick={this.onOk}>
-                        { _t('Create Room') }
-                    </button>
-                </div>
+                <DialogButtons primaryButton={_t('Create Room')}
+                    onPrimaryButtonClick={this.onOk}
+                    onCancel={this.onCancel} />
             </BaseDialog>
         );
     },

From aecb4650bc901d2c610be2e71c1b376ed541f804 Mon Sep 17 00:00:00 2001
From: Aidan Gauland <aidalgol@fastmail.net>
Date: Sat, 23 Dec 2017 13:56:04 +1300
Subject: [PATCH 08/16] Correct order of buttons in CreateGroupDialog

We can't use DialogButtons because the primary button is an <input> element.
---
 src/components/views/dialogs/CreateGroupDialog.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/dialogs/CreateGroupDialog.js b/src/components/views/dialogs/CreateGroupDialog.js
index 168fe75947..d811dde09e 100644
--- a/src/components/views/dialogs/CreateGroupDialog.js
+++ b/src/components/views/dialogs/CreateGroupDialog.js
@@ -159,10 +159,10 @@ export default React.createClass({
                         { createErrorNode }
                     </div>
                     <div className="mx_Dialog_buttons">
+                        <input type="submit" value={_t('Create')} className="mx_Dialog_primary" />
                         <button onClick={this._onCancel}>
                             { _t("Cancel") }
                         </button>
-                        <input type="submit" value={_t('Create')} className="mx_Dialog_primary" />
                     </div>
                 </form>
             </BaseDialog>

From 7a761dbf6bdfef2067956e8968ef660e214b2caf Mon Sep 17 00:00:00 2001
From: Aidan Gauland <aidalgol@fastmail.net>
Date: Sat, 23 Dec 2017 16:15:28 +1300
Subject: [PATCH 09/16] Use DialogButtons in ChatCreateOrReuseDialog

Use DialogButtons to eliminate duplicate button code.
---
 src/components/views/dialogs/ChatCreateOrReuseDialog.js | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/views/dialogs/ChatCreateOrReuseDialog.js b/src/components/views/dialogs/ChatCreateOrReuseDialog.js
index e0578f3b53..22e747a989 100644
--- a/src/components/views/dialogs/ChatCreateOrReuseDialog.js
+++ b/src/components/views/dialogs/ChatCreateOrReuseDialog.js
@@ -137,6 +137,7 @@ export default class ChatCreateOrReuseDialog extends React.Component {
         } else {
             // Show the avatar, name and a button to confirm that a new chat is requested
             const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
+            const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
             const Spinner = sdk.getComponent('elements.Spinner');
             title = _t('Start chatting');
 
@@ -166,11 +167,8 @@ export default class ChatCreateOrReuseDialog extends React.Component {
                     </p>
                     { profile }
                 </div>
-                <div className="mx_Dialog_buttons">
-                    <button className="mx_Dialog_primary" onClick={this.props.onNewDMClick}>
-                        { _t('Start Chatting') }
-                    </button>
-                </div>
+                <DialogButtons primaryButton={_t('Start Chatting')}
+                    onPrimaryButtonClick={this.props.onNewDMClick} />
             </div>;
         }
 

From 93b789438b90888006d714a8e9cd07dc71a9a598 Mon Sep 17 00:00:00 2001
From: Aidan Gauland <aidalgol@fastmail.net>
Date: Sat, 23 Dec 2017 16:15:53 +1300
Subject: [PATCH 10/16] Use DialogButtons in ConfirmUserActionDialog

Use DialogButtons to eliminate duplicate button code.
---
 .../views/dialogs/ConfirmUserActionDialog.js  | 22 ++++++-------------
 1 file changed, 7 insertions(+), 15 deletions(-)

diff --git a/src/components/views/dialogs/ConfirmUserActionDialog.js b/src/components/views/dialogs/ConfirmUserActionDialog.js
index 78d084b709..91d2b342a4 100644
--- a/src/components/views/dialogs/ConfirmUserActionDialog.js
+++ b/src/components/views/dialogs/ConfirmUserActionDialog.js
@@ -76,13 +76,11 @@ export default React.createClass({
 
     render: function() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
         const MemberAvatar = sdk.getComponent("views.avatars.MemberAvatar");
         const BaseAvatar = sdk.getComponent("views.avatars.BaseAvatar");
 
-        const confirmButtonClass = classnames({
-            'mx_Dialog_primary': true,
-            'danger': this.props.danger,
-        });
+        const confirmButtonClass = this.props.danger ? 'danger' : '';
 
         let reasonBox;
         if (this.props.askReason) {
@@ -127,17 +125,11 @@ export default React.createClass({
                     <div className="mx_ConfirmUserActionDialog_userId">{ userId }</div>
                 </div>
                 { reasonBox }
-                <div className="mx_Dialog_buttons">
-                    <button className={confirmButtonClass}
-                        onClick={this.onOk} autoFocus={!this.props.askReason}
-                    >
-                        { this.props.action }
-                    </button>
-
-                    <button onClick={this.onCancel}>
-                        { _t("Cancel") }
-                    </button>
-                </div>
+                <DialogButtons primaryButton={this.props.action}
+                    onPrimaryButtonClick={this.onOk}
+                    primaryButtonClass={confirmButtonClass}
+                    focus={!this.props.askReason}
+                    onCancel={this.onCancel} />
             </BaseDialog>
         );
     },

From a11146f39d890e906f6262909ce2dfa4e57e93eb Mon Sep 17 00:00:00 2001
From: Aidan Gauland <aidalgol@fastmail.net>
Date: Sat, 23 Dec 2017 16:44:32 +1300
Subject: [PATCH 11/16] Use DialogButtons in SessionRestoreErrorDialog

Use DialogButtons to eliminate duplicate button code.
---
 .../views/dialogs/SessionRestoreErrorDialog.js           | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/views/dialogs/SessionRestoreErrorDialog.js b/src/components/views/dialogs/SessionRestoreErrorDialog.js
index 75ae0eda17..2e384a268f 100644
--- a/src/components/views/dialogs/SessionRestoreErrorDialog.js
+++ b/src/components/views/dialogs/SessionRestoreErrorDialog.js
@@ -40,6 +40,7 @@ export default React.createClass({
 
     render: function() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
         let bugreport;
 
         if (SdkConfig.get().bug_report_endpoint_url) {
@@ -68,11 +69,9 @@ export default React.createClass({
 
                     { bugreport }
                 </div>
-                <div className="mx_Dialog_buttons">
-                    <button className="mx_Dialog_primary" onClick={this._continueClicked}>
-                        { _t("Continue anyway") }
-                    </button>
-                </div>
+                <DialogButtons primaryButton={_t("Continue anyway")}
+                    onPrimaryButtonClick={this._continueClicked}
+                    onCancel={this.props.onFinished} />
             </BaseDialog>
         );
     },

From 2674fcb6d3f5735d8158b1399000169cce9e00e9 Mon Sep 17 00:00:00 2001
From: Aidan Gauland <aidalgol@fastmail.net>
Date: Sat, 23 Dec 2017 16:50:35 +1300
Subject: [PATCH 12/16] Use DialogButtons in TextInputDialog

Use DialogButtons to eliminate duplicate button code.
---
 src/components/views/dialogs/TextInputDialog.js | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/components/views/dialogs/TextInputDialog.js b/src/components/views/dialogs/TextInputDialog.js
index 5ea4191e5e..2e40ee0d67 100644
--- a/src/components/views/dialogs/TextInputDialog.js
+++ b/src/components/views/dialogs/TextInputDialog.js
@@ -58,6 +58,7 @@ export default React.createClass({
 
     render: function() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
         return (
             <BaseDialog className="mx_TextInputDialog" onFinished={this.props.onFinished}
                 onEnterPressed={this.onOk}
@@ -71,14 +72,9 @@ export default React.createClass({
                         <input id="textinput" ref="textinput" className="mx_TextInputDialog_input" defaultValue={this.props.value} autoFocus={this.props.focus} size="64" />
                     </div>
                 </div>
-                <div className="mx_Dialog_buttons">
-                    <button onClick={this.onCancel}>
-                        { _t("Cancel") }
-                    </button>
-                    <button className="mx_Dialog_primary" onClick={this.onOk}>
-                        { this.props.button }
-                    </button>
-                </div>
+                <DialogButtons primaryButton={this.props.button}
+                    onPrimaryButtonClick={this.onOk}
+                    onCancel={this.onCancel} />
             </BaseDialog>
         );
     },

From e6dbc3b863a7010a14e58c24abeddd933eb70870 Mon Sep 17 00:00:00 2001
From: Aidan Gauland <aidalgol@fastmail.net>
Date: Sat, 23 Dec 2017 16:50:45 +1300
Subject: [PATCH 13/16] Use DialogButtons in UnknownDeviceDialog

Use DialogButtons to eliminate duplicate button code.
---
 .../views/dialogs/UnknownDeviceDialog.js      | 24 +++++--------------
 1 file changed, 6 insertions(+), 18 deletions(-)

diff --git a/src/components/views/dialogs/UnknownDeviceDialog.js b/src/components/views/dialogs/UnknownDeviceDialog.js
index 9c19ee6eca..b81700cac0 100644
--- a/src/components/views/dialogs/UnknownDeviceDialog.js
+++ b/src/components/views/dialogs/UnknownDeviceDialog.js
@@ -187,18 +187,11 @@ export default React.createClass({
                 }
             });
         });
-        let sendButton;
-        if (haveUnknownDevices) {
-            sendButton = <button onClick={this._onSendAnywayClicked}>
-                { this.props.sendAnywayLabel }
-            </button>;
-        } else {
-            sendButton = <button onClick={this._onSendClicked}>
-                { this.props.sendLabel }
-            </button>;
-        }
+        const sendButtonOnClick = haveUnknownDevices ? this._onSendAnywayClicked : this._onSendClicked;
+        const sendButtonLabel = haveUnknownDevices ? this.props.sendAnywayLabel : this.props.sendAnywayLabel;
 
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
         return (
             <BaseDialog className='mx_UnknownDeviceDialog'
                 onFinished={this.props.onFinished}
@@ -213,14 +206,9 @@ export default React.createClass({
 
                     <UnknownDeviceList devices={this.props.devices} />
                 </GeminiScrollbar>
-                <div className="mx_Dialog_buttons">
-                    {sendButton}
-                    <button className="mx_Dialog_primary" autoFocus={true}
-                        onClick={this._onDismissClicked}
-                    >
-                        {_t("Dismiss")}
-                    </button>
-                </div>
+                <DialogButtons primaryButton={sendButtonLabel}
+                    onPrimaryButtonClick={sendButtonOnClick}
+                    onCancel={this._onDismissClicked} />
             </BaseDialog>
         );
         // XXX: do we want to give the user the option to enable blacklistUnverifiedDevices for this room (or globally) at this point?

From e4b86f073069cc93b4bcb4c559db24d684d3002c Mon Sep 17 00:00:00 2001
From: Aidan Gauland <aidalgol@fastmail.net>
Date: Tue, 26 Dec 2017 11:55:15 +1300
Subject: [PATCH 14/16] Fix use of deprecated module

Use PropTypes from "prop-types" instead of the deprecated React.PropTypes
submodule.
---
 src/components/views/elements/DialogButtons.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/views/elements/DialogButtons.js b/src/components/views/elements/DialogButtons.js
index e730bfb377..4f22d43ae0 100644
--- a/src/components/views/elements/DialogButtons.js
+++ b/src/components/views/elements/DialogButtons.js
@@ -17,6 +17,7 @@ limitations under the License.
 "use strict";
 
 import React from "react";
+import PropTypes from "prop-types";
 import { _t } from '../../../languageHandler';
 
 /**
@@ -27,15 +28,15 @@ module.exports = React.createClass({
 
     propTypes: {
         // The primary button which is styled differently and has default focus.
-        primaryButton: React.PropTypes.node.isRequired,
+        primaryButton: PropTypes.node.isRequired,
 
         // onClick handler for the primary button.
-        onPrimaryButtonClick: React.PropTypes.func.isRequired,
+        onPrimaryButtonClick: PropTypes.func.isRequired,
 
         // onClick handler for the cancel button.
-        onCancel: React.PropTypes.func.isRequired,
+        onCancel: PropTypes.func.isRequired,
 
-        focus: React.PropTypes.bool,
+        focus: PropTypes.bool,
     },
 
     render: function() {

From 9531b219d21f09f6f92eb41e923a525db268f12e Mon Sep 17 00:00:00 2001
From: Aidan Gauland <aidalgol@fastmail.net>
Date: Tue, 26 Dec 2017 12:53:01 +1300
Subject: [PATCH 15/16] Remove unused imports

---
 src/components/views/dialogs/ConfirmUserActionDialog.js | 1 -
 src/components/views/dialogs/TextInputDialog.js         | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/components/views/dialogs/ConfirmUserActionDialog.js b/src/components/views/dialogs/ConfirmUserActionDialog.js
index 91d2b342a4..3515b1f58d 100644
--- a/src/components/views/dialogs/ConfirmUserActionDialog.js
+++ b/src/components/views/dialogs/ConfirmUserActionDialog.js
@@ -18,7 +18,6 @@ import React from 'react';
 import { MatrixClient } from 'matrix-js-sdk';
 import sdk from '../../../index';
 import { _t } from '../../../languageHandler';
-import classnames from 'classnames';
 import { GroupMemberType } from '../../../groups';
 
 /*
diff --git a/src/components/views/dialogs/TextInputDialog.js b/src/components/views/dialogs/TextInputDialog.js
index 2e40ee0d67..cfe4ae0c99 100644
--- a/src/components/views/dialogs/TextInputDialog.js
+++ b/src/components/views/dialogs/TextInputDialog.js
@@ -16,7 +16,6 @@ limitations under the License.
 
 import React from 'react';
 import sdk from '../../../index';
-import { _t } from '../../../languageHandler';
 
 export default React.createClass({
     displayName: 'TextInputDialog',

From 9365860075b34e43e248bf4cd56147ec66e3d1f1 Mon Sep 17 00:00:00 2001
From: Aidan Gauland <aidan@aidalbox14.lan>
Date: Tue, 9 Jan 2018 18:40:12 +1300
Subject: [PATCH 16/16] Update copyright line

---
 src/components/views/elements/DialogButtons.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/elements/DialogButtons.js b/src/components/views/elements/DialogButtons.js
index 4f22d43ae0..c159324c1d 100644
--- a/src/components/views/elements/DialogButtons.js
+++ b/src/components/views/elements/DialogButtons.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 Aidan Gauland
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.