From 9c4ff4048a596b7bd824fd9b6362a4fb23c1a5ae Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Tue, 18 Dec 2018 17:26:11 +0000
Subject: [PATCH] Convert show recovery key to flexbox

This allows the buttons to fit on a single line and flows a bit better at low
widths.

Signed-off-by: J. Ryan Stinnett <jryans@gmail.com>
---
 .../keybackup/_CreateKeyBackupDialog.scss     | 17 +++++++++--
 .../keybackup/CreateKeyBackupDialog.js        | 28 +++++++++----------
 2 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/res/css/views/dialogs/keybackup/_CreateKeyBackupDialog.scss b/res/css/views/dialogs/keybackup/_CreateKeyBackupDialog.scss
index 1addb99792..0b686dbcdc 100644
--- a/res/css/views/dialogs/keybackup/_CreateKeyBackupDialog.scss
+++ b/res/css/views/dialogs/keybackup/_CreateKeyBackupDialog.scss
@@ -52,13 +52,24 @@ limitations under the License.
     float: right;
 }
 
-.mx_CreateKeyBackupDialog_recoveryKeyButtons {
-    float: right;
+.mx_CreateKeyBackupDialog_recoveryKeyHeader {
+    margin-bottom: 1em;
+}
+
+.mx_CreateKeyBackupDialog_recoveryKeyContainer {
+    display: flex;
 }
 
 .mx_CreateKeyBackupDialog_recoveryKey {
-    width: 300px;
+    width: 275px;
     padding: 20px;
     color: $info-plinth-fg-color;
     background-color: $info-plinth-bg-color;
+    margin-right: 8px;
+}
+
+.mx_CreateKeyBackupDialog_recoveryKeyButtons {
+    flex: 1;
+    display: flex;
+    align-items: center;
 }
diff --git a/src/async-components/views/dialogs/keybackup/CreateKeyBackupDialog.js b/src/async-components/views/dialogs/keybackup/CreateKeyBackupDialog.js
index 0db9d0699b..6593472670 100644
--- a/src/async-components/views/dialogs/keybackup/CreateKeyBackupDialog.js
+++ b/src/async-components/views/dialogs/keybackup/CreateKeyBackupDialog.js
@@ -351,21 +351,21 @@ export default React.createClass({
             <p>{_t("Make a copy of this Recovery Key and keep it safe.")}</p>
             <p>{bodyText}</p>
             <p className="mx_CreateKeyBackupDialog_primaryContainer">
-                <div>{_t("Your Recovery Key")}</div>
-                <div className="mx_CreateKeyBackupDialog_recoveryKeyButtons">
-                    <button onClick={this._onCopyClick}>
-                        {_t("Copy to clipboard")}
-                    </button>
-                    {
-                        // FIXME REDESIGN: buttons should be adjacent but insufficient room in current design
-                    }
-                    <br /><br />
-                    <button onClick={this._onDownloadClick}>
-                        {_t("Download")}
-                    </button>
+                <div className="mx_CreateKeyBackupDialog_recoveryKeyHeader">
+                    {_t("Your Recovery Key")}
                 </div>
-                <div className="mx_CreateKeyBackupDialog_recoveryKey">
-                    <code ref={this._collectRecoveryKeyNode}>{this._keyBackupInfo.recovery_key}</code>
+                <div className="mx_CreateKeyBackupDialog_recoveryKeyContainer">
+                    <div className="mx_CreateKeyBackupDialog_recoveryKey">
+                        <code ref={this._collectRecoveryKeyNode}>{this._keyBackupInfo.recovery_key}</code>
+                    </div>
+                    <div className="mx_CreateKeyBackupDialog_recoveryKeyButtons">
+                        <button onClick={this._onCopyClick}>
+                            {_t("Copy to clipboard")}
+                        </button>
+                        <button onClick={this._onDownloadClick}>
+                            {_t("Download")}
+                        </button>
+                    </div>
                 </div>
             </p>
             <br />