From a180dddc669d9781bdd567c9c88d30b429ec7cdc Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 29 Jan 2020 22:31:19 +0000
Subject: [PATCH] Pass an ID to the <Field/> as needed and fix div inside p
 nesting

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 .../dialogs/secretstorage/_CreateSecretStorageDialog.scss | 4 ++++
 .../dialogs/secretstorage/CreateSecretStorageDialog.js    | 8 +++++---
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/res/css/views/dialogs/secretstorage/_CreateSecretStorageDialog.scss b/res/css/views/dialogs/secretstorage/_CreateSecretStorageDialog.scss
index bbbf3fc1d3..a9ebd54b31 100644
--- a/res/css/views/dialogs/secretstorage/_CreateSecretStorageDialog.scss
+++ b/res/css/views/dialogs/secretstorage/_CreateSecretStorageDialog.scss
@@ -37,6 +37,10 @@ limitations under the License.
         flex: 0 0 auto;
         margin-left: 30px;
     }
+
+    details .mx_AccessibleButton {
+        margin: 1em 0; // emulate paragraph spacing because we can't put this button in a paragraph due to HTML rules
+    }
 }
 
 .mx_CreateSecretStorageDialog .mx_Dialog_title {
diff --git a/src/async-components/views/dialogs/secretstorage/CreateSecretStorageDialog.js b/src/async-components/views/dialogs/secretstorage/CreateSecretStorageDialog.js
index c3b74381ff..64aff467a7 100644
--- a/src/async-components/views/dialogs/secretstorage/CreateSecretStorageDialog.js
+++ b/src/async-components/views/dialogs/secretstorage/CreateSecretStorageDialog.js
@@ -480,7 +480,9 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
             )}</p>
 
             <div className="mx_CreateSecretStorageDialog_passPhraseContainer">
-                <Field type="password"
+                <Field
+                    type="password"
+                    id="mx_CreateSecretStorageDialog_passPhraseField"
                     className="mx_CreateSecretStorageDialog_passPhraseField"
                     onChange={this._onPassPhraseChange}
                     onKeyPress={this._onPassPhraseKeyPress}
@@ -512,9 +514,9 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
 
             <details>
                 <summary>{_t("Advanced")}</summary>
-                <p><AccessibleButton kind='primary' onClick={this._onSkipPassPhraseClick} >
+                <AccessibleButton kind='primary' onClick={this._onSkipPassPhraseClick} >
                     {_t("Set up with a recovery key")}
-                </AccessibleButton></p>
+                </AccessibleButton>
             </details>
         </div>;
     }