From 24f0123dedb8eb8b6e9ea39efcb8c43fd8ec4465 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Wed, 19 Dec 2018 10:56:50 +0000
Subject: [PATCH] Convert pass phrase entry to flexbox

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

diff --git a/res/css/views/dialogs/keybackup/_CreateKeyBackupDialog.scss b/res/css/views/dialogs/keybackup/_CreateKeyBackupDialog.scss
index 0b686dbcdc..424ffbd0a8 100644
--- a/res/css/views/dialogs/keybackup/_CreateKeyBackupDialog.scss
+++ b/res/css/views/dialogs/keybackup/_CreateKeyBackupDialog.scss
@@ -29,9 +29,13 @@ limitations under the License.
     display: block;
 }
 
+.mx_CreateKeyBackupDialog_passPhraseContainer {
+    display: flex;
+    align-items: start;
+}
+
 .mx_CreateKeyBackupDialog_passPhraseHelp {
-    float: right;
-    width: 230px;
+    flex: 1;
     height: 85px;
     margin-left: 20px;
     font-size: 80%;
@@ -42,14 +46,16 @@ limitations under the License.
 }
 
 .mx_CreateKeyBackupDialog_passPhraseInput {
+    flex: none;
     width: 250px;
     border: 1px solid $accent-color;
     border-radius: 5px;
     padding: 10px;
+    margin-bottom: 1em;
 }
 
 .mx_CreateKeyBackupDialog_passPhraseMatch {
-    float: right;
+    margin-left: 20px;
 }
 
 .mx_CreateKeyBackupDialog_recoveryKeyHeader {
@@ -61,11 +67,11 @@ limitations under the License.
 }
 
 .mx_CreateKeyBackupDialog_recoveryKey {
-    width: 275px;
+    width: 262px;
     padding: 20px;
     color: $info-plinth-fg-color;
     background-color: $info-plinth-bg-color;
-    margin-right: 8px;
+    margin-right: 12px;
 }
 
 .mx_CreateKeyBackupDialog_recoveryKeyButtons {
diff --git a/src/async-components/views/dialogs/keybackup/CreateKeyBackupDialog.js b/src/async-components/views/dialogs/keybackup/CreateKeyBackupDialog.js
index 6593472670..dda378e792 100644
--- a/src/async-components/views/dialogs/keybackup/CreateKeyBackupDialog.js
+++ b/src/async-components/views/dialogs/keybackup/CreateKeyBackupDialog.js
@@ -239,17 +239,19 @@ export default React.createClass({
             <p>{_t("You'll need it if you log out or lose access to this device.")}</p>
 
             <div className="mx_CreateKeyBackupDialog_primaryContainer">
-                <div className="mx_CreateKeyBackupDialog_passPhraseHelp">
-                    {strengthMeter}
-                    {helpText}
+                <div className="mx_CreateKeyBackupDialog_passPhraseContainer">
+                    <input type="password"
+                        onChange={this._onPassPhraseChange}
+                        onKeyPress={this._onPassPhraseKeyPress}
+                        value={this.state.passPhrase}
+                        className="mx_CreateKeyBackupDialog_passPhraseInput"
+                        placeholder={_t("Enter a passphrase...")}
+                    />
+                    <div className="mx_CreateKeyBackupDialog_passPhraseHelp">
+                        {strengthMeter}
+                        {helpText}
+                    </div>
                 </div>
-                <input type="password"
-                    onChange={this._onPassPhraseChange}
-                    onKeyPress={this._onPassPhraseKeyPress}
-                    value={this.state.passPhrase}
-                    className="mx_CreateKeyBackupDialog_passPhraseInput"
-                    placeholder={_t("Enter a passphrase...")}
-                />
             </div>
 
             <DialogButtons primaryButton={_t('Next')}
@@ -317,16 +319,18 @@ export default React.createClass({
                 "somewhere safe.",
             )}</p>
             <div className="mx_CreateKeyBackupDialog_primaryContainer">
-                {passPhraseMatch}
-                <div>
-                    <input type="password"
-                        onChange={this._onPassPhraseConfirmChange}
-                        onKeyPress={this._onPassPhraseConfirmKeyPress}
-                        value={this.state.passPhraseConfirm}
-                        className="mx_CreateKeyBackupDialog_passPhraseInput"
-                        placeholder={_t("Repeat your passphrase...")}
-                        autoFocus={true}
-                    />
+                <div className="mx_CreateKeyBackupDialog_passPhraseContainer">
+                    <div>
+                        <input type="password"
+                            onChange={this._onPassPhraseConfirmChange}
+                            onKeyPress={this._onPassPhraseConfirmKeyPress}
+                            value={this.state.passPhraseConfirm}
+                            className="mx_CreateKeyBackupDialog_passPhraseInput"
+                            placeholder={_t("Repeat your passphrase...")}
+                            autoFocus={true}
+                        />
+                    </div>
+                    {passPhraseMatch}
                 </div>
             </div>
             <DialogButtons primaryButton={_t('Next')}