From 2fbb551035efa159bedbbd52211a25e3da9604ab Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Fri, 4 Sep 2020 14:09:34 +0100
Subject: [PATCH] Put backup details in a table

---
 .../views/settings/_SecureBackupPanel.scss    | 12 +++++++++
 .../views/settings/SecureBackupPanel.js       | 26 +++++++++++++++----
 src/i18n/strings/en_EN.json                   |  6 ++---
 3 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/res/css/views/settings/_SecureBackupPanel.scss b/res/css/views/settings/_SecureBackupPanel.scss
index 548e72fbc3..587cab8f36 100644
--- a/res/css/views/settings/_SecureBackupPanel.scss
+++ b/res/css/views/settings/_SecureBackupPanel.scss
@@ -35,3 +35,15 @@ limitations under the License.
 .mx_SecureBackupPanel_buttonRow {
     margin: 1em 0;
 }
+
+.mx_SecureBackupPanel_statusList {
+    border-spacing: 0;
+
+    td {
+        padding: 0;
+
+        &:first-of-type {
+            padding-inline-end: 1em;
+        }
+    }
+}
diff --git a/src/components/views/settings/SecureBackupPanel.js b/src/components/views/settings/SecureBackupPanel.js
index 683120f5b6..7f7a014df9 100644
--- a/src/components/views/settings/SecureBackupPanel.js
+++ b/src/components/views/settings/SecureBackupPanel.js
@@ -174,6 +174,7 @@ export default class SecureBackupPanel extends React.PureComponent {
         } = this.state;
 
         let statusDescription;
+        let extraDetailsTableRows;
         let extraDetails;
         let actions;
         if (error) {
@@ -316,9 +317,18 @@ export default class SecureBackupPanel extends React.PureComponent {
                 </AccessibleButton>;
             }
 
+            extraDetailsTableRows = <>
+                <tr>
+                    <td>{_t("Backup version:")}</td>
+                    <td>{backupInfo.version}</td>
+                </tr>
+                <tr>
+                    <td>{_t("Algorithm:")}</td>
+                    <td>{backupInfo.algorithm}</td>
+                </tr>
+            </>;
+
             extraDetails = <>
-                <div>{_t("Backup version: ")}{backupInfo.version}</div>
-                <div>{_t("Algorithm: ")}{backupInfo.algorithm}</div>
                 {uploadStatus}
                 <div>{backupSigStatuses}</div>
                 <div>{trustedLocally}</div>
@@ -359,9 +369,15 @@ export default class SecureBackupPanel extends React.PureComponent {
                 {statusDescription}
                 <details>
                     <summary>{_t("Advanced")}</summary>
-                    <div>{_t("Backup key stored: ")}{
-                        backupKeyStored === true ? _t("in secret storage") : _t("not stored")
-                    }</div>
+                    <table className="mx_SecureBackupPanel_statusList"><tbody>
+                        <tr>
+                            <td>{_t("Backup key stored:")}</td>
+                            <td>{
+                                backupKeyStored === true ? _t("in secret storage") : _t("not stored")
+                            }</td>
+                        </tr>
+                        {extraDetailsTableRows}
+                    </tbody></table>
                     {extraDetails}
                 </details>
                 {actions}
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 49e8b1d2e8..476ce11b2d 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -750,13 +750,13 @@
     "Backup has an <validity>invalid</validity> signature from <verify>unverified</verify> session <device></device>": "Backup has an <validity>invalid</validity> signature from <verify>unverified</verify> session <device></device>",
     "Backup is not signed by any of your sessions": "Backup is not signed by any of your sessions",
     "This backup is trusted because it has been restored on this session": "This backup is trusted because it has been restored on this session",
-    "Backup version: ": "Backup version: ",
-    "Algorithm: ": "Algorithm: ",
+    "Backup version:": "Backup version:",
+    "Algorithm:": "Algorithm:",
     "Your keys are <b>not being backed up from this session</b>.": "Your keys are <b>not being backed up from this session</b>.",
     "Back up your keys before signing out to avoid losing them.": "Back up your keys before signing out to avoid losing them.",
     "Start using Key Backup": "Start using Key Backup",
     "Back up your encryption keys with your account data in case you lose access to your sessions. Your keys will be secured with a unique Recovery Key.": "Back up your encryption keys with your account data in case you lose access to your sessions. Your keys will be secured with a unique Recovery Key.",
-    "Backup key stored: ": "Backup key stored: ",
+    "Backup key stored:": "Backup key stored:",
     "not stored": "not stored",
     "Identity Server URL must be HTTPS": "Identity Server URL must be HTTPS",
     "Not a valid Identity Server (status code %(code)s)": "Not a valid Identity Server (status code %(code)s)",