From 3259ab1f250ee0d027a4a5d020f360848a6562db Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Fri, 11 Sep 2020 14:09:54 +0100
Subject: [PATCH] Place cross-signing action buttons on a single row

Part of https://github.com/vector-im/element-web/issues/13895
---
 .../views/settings/_CrossSigningPanel.scss    |  4 ++
 .../views/settings/CrossSigningPanel.js       | 40 ++++++++++---------
 2 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/res/css/views/settings/_CrossSigningPanel.scss b/res/css/views/settings/_CrossSigningPanel.scss
index fa9f76a963..12a0e36835 100644
--- a/res/css/views/settings/_CrossSigningPanel.scss
+++ b/res/css/views/settings/_CrossSigningPanel.scss
@@ -28,4 +28,8 @@ limitations under the License.
 
 .mx_CrossSigningPanel_buttonRow {
     margin: 1em 0;
+
+    :nth-child(n + 1) {
+        margin-inline-end: 10px;
+    }
 }
diff --git a/src/components/views/settings/CrossSigningPanel.js b/src/components/views/settings/CrossSigningPanel.js
index fd8fef0544..5b5ef56024 100644
--- a/src/components/views/settings/CrossSigningPanel.js
+++ b/src/components/views/settings/CrossSigningPanel.js
@@ -195,29 +195,32 @@ export default class CrossSigningPanel extends React.PureComponent {
             crossSigningPublicKeysOnDevice
         );
 
-        let resetButton;
-        if (keysExistAnywhere) {
-            resetButton = (
-                <div className="mx_CrossSigningPanel_buttonRow">
-                    <AccessibleButton kind="danger" onClick={this._resetCrossSigning}>
-                        {_t("Reset")}
-                    </AccessibleButton>
-                </div>
+        const actions = [];
+
+        // TODO: determine how better to expose this to users in addition to prompts at login/toast
+        if (!keysExistEverywhere && homeserverSupportsCrossSigning) {
+            actions.push(
+                <AccessibleButton kind="primary" onClick={this._onBootstrapClick}>
+                    {_t("Set up")}
+                </AccessibleButton>,
             );
         }
 
-        // TODO: determine how better to expose this to users in addition to prompts at login/toast
-        let bootstrapButton;
-        if (!keysExistEverywhere && homeserverSupportsCrossSigning) {
-            bootstrapButton = (
-                <div className="mx_CrossSigningPanel_buttonRow">
-                    <AccessibleButton kind="primary" onClick={this._onBootstrapClick}>
-                        {_t("Set up")}
-                    </AccessibleButton>
-                </div>
+        if (keysExistAnywhere) {
+            actions.push(
+                <AccessibleButton kind="danger" onClick={this._resetCrossSigning}>
+                    {_t("Reset")}
+                </AccessibleButton>,
             );
         }
 
+        let actionRow;
+        if (actions.length) {
+            actionRow = <div className="mx_CrossSigningPanel_buttonRow">
+                {actions}
+            </div>;
+        }
+
         return (
             <div>
                 {summarisedStatus}
@@ -251,8 +254,7 @@ export default class CrossSigningPanel extends React.PureComponent {
                    </tbody></table>
                 </details>
                 {errorSection}
-                {bootstrapButton}
-                {resetButton}
+                {actionRow}
             </div>
         );
     }