From de1c3e2f83b7f387adbb3432684545eb4882868d Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Fri, 20 Dec 2019 21:30:47 +0100
Subject: [PATCH] use same style as UserInfo for sections and paragraphs

---
 src/components/views/right_panel/EncryptionInfo.js  | 13 +++++++------
 .../views/right_panel/VerificationPanel.js          |  8 ++++++++
 src/i18n/strings/en_EN.json                         |  4 ++++
 3 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/components/views/right_panel/EncryptionInfo.js b/src/components/views/right_panel/EncryptionInfo.js
index f10d0b3499..49f4fc5da3 100644
--- a/src/components/views/right_panel/EncryptionInfo.js
+++ b/src/components/views/right_panel/EncryptionInfo.js
@@ -16,15 +16,16 @@ limitations under the License.
 
 import React from 'react';
 import sdk from "../../..";
+import {_t} from "../../../languageHandler";
 
 export default class EncryptionInfo extends React.PureComponent {
     render() {
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-        return (<div>
-            <p>End-to-end encryption is great! You should try it.</p>
-            <div>
-                <AccessibleButton kind="primary" onClick={this.props.onStartVerification}>Start verification</AccessibleButton>
-            </div>
-        </div>);
+        return (<div class="mx_UserInfo"><div class="mx_UserInfo_container">
+            <h3>{_t("Verify User")}</h3>
+            <p>{_t("For extra security, verify this user by checking a one-time code on both of your devices.")}</p>
+            <p>{_t("For maximum security, do this in person.")}</p>
+            <AccessibleButton kind="primary" onClick={this.props.onStartVerification}>{_t("Start Verification")}</AccessibleButton>
+        </div></div>);
     }
 }
diff --git a/src/components/views/right_panel/VerificationPanel.js b/src/components/views/right_panel/VerificationPanel.js
index ff7a356e70..9e5a448239 100644
--- a/src/components/views/right_panel/VerificationPanel.js
+++ b/src/components/views/right_panel/VerificationPanel.js
@@ -26,6 +26,14 @@ export default class VerificationPanel extends React.PureComponent {
     }
 
     render() {
+        return <div class="mx_UserInfo">
+            <div class="mx_UserInfo_container">
+                { this.renderStatus() }
+            </div>
+        </div>;
+    }
+
+    renderStatus() {
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         const Spinner = sdk.getComponent('elements.Spinner');
         const {request} = this.props;
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 6979759cd2..59c1684076 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1106,6 +1106,10 @@
     "URL previews are disabled by default for participants in this room.": "URL previews are disabled by default for participants in this room.",
     "In encrypted rooms, like this one, URL previews are disabled by default to ensure that your homeserver (where the previews are generated) cannot gather information about links you see in this room.": "In encrypted rooms, like this one, URL previews are disabled by default to ensure that your homeserver (where the previews are generated) cannot gather information about links you see in this room.",
     "When someone puts a URL in their message, a URL preview can be shown to give more information about that link such as the title, description, and an image from the website.": "When someone puts a URL in their message, a URL preview can be shown to give more information about that link such as the title, description, and an image from the website.",
+    "Verify User": "Verify User",
+    "For extra security, verify this user by checking a one-time code on both of your devices.": "For extra security, verify this user by checking a one-time code on both of your devices.",
+    "For maximum security, do this in person.": "For maximum security, do this in person.",
+    "Start Verification": "Start Verification",
     "Members": "Members",
     "Files": "Files",
     "Trusted": "Trusted",