From 081baa23592c0a6d2677dcd09e4b67d44a2a474b Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Thu, 2 Apr 2020 17:12:10 +0200 Subject: [PATCH 1/9] set dialog title for self-verification use request.isSelfVerification helper --- .../views/dialogs/VerificationRequestDialog.js | 17 +++++++++++++++-- .../views/right_panel/VerificationPanel.js | 8 ++------ 2 files changed, 17 insertions(+), 8 deletions(-) diff --git a/src/components/views/dialogs/VerificationRequestDialog.js b/src/components/views/dialogs/VerificationRequestDialog.js index bbf3482a41..88ca0bc337 100644 --- a/src/components/views/dialogs/VerificationRequestDialog.js +++ b/src/components/views/dialogs/VerificationRequestDialog.js @@ -30,16 +30,29 @@ export default class VerificationRequestDialog extends React.Component { constructor(...args) { super(...args); this.onFinished = this.onFinished.bind(this); + this.state = {}; + if (this.props.verificationRequest) { + this.state.verificationRequest = this.props.verificationRequest; + } else if (this.props.verificationRequestPromise) { + this.props.verificationRequestPromise.then(r => { + this.setState({verificationRequest: r}); + }); + } } render() { const BaseDialog = sdk.getComponent("views.dialogs.BaseDialog"); const EncryptionPanel = sdk.getComponent("views.right_panel.EncryptionPanel"); + const request = this.state.verificationRequest; + const otherUserId = request && request.otherUserId; const member = this.props.member || - MatrixClientPeg.get().getUser(this.props.verificationRequest.otherUserId); + otherUserId && MatrixClientPeg.get().getUser(otherUserId); + const title = request && request.isSelfVerification ? + _t("Verify this session") : _t("Verification Request"); + return Date: Thu, 2 Apr 2020 17:51:25 +0200 Subject: [PATCH 2/9] adapt encryption info to self-verification - hide text when shown in a dialog - adapt "waiting for ... to accept" text to self-verif --- .../views/right_panel/EncryptionInfo.js | 24 +++++++++++++++---- .../views/right_panel/EncryptionPanel.js | 7 +++++- src/i18n/strings/en_EN.json | 1 + 3 files changed, 27 insertions(+), 5 deletions(-) diff --git a/src/components/views/right_panel/EncryptionInfo.js b/src/components/views/right_panel/EncryptionInfo.js index 610ea99511..007e2831ce 100644 --- a/src/components/views/right_panel/EncryptionInfo.js +++ b/src/components/views/right_panel/EncryptionInfo.js @@ -28,14 +28,26 @@ export const PendingActionSpinner = ({text}) => { ; }; -const EncryptionInfo = ({waitingForOtherParty, waitingForNetwork, member, onStartVerification, isRoomEncrypted}) => { +const EncryptionInfo = ({ + waitingForOtherParty, + waitingForNetwork, + member, + onStartVerification, + isRoomEncrypted, + inDialog, + isSelfVerification, +}) => { let content; if (waitingForOtherParty || waitingForNetwork) { let text; if (waitingForOtherParty) { - text = _t("Waiting for %(displayName)s to accept…", { - displayName: member.displayName || member.name || member.userId, - }); + if (isSelfVerification) { + text = _t("Waiting for you to accept on your other session…"); + } else { + text = _t("Waiting for %(displayName)s to accept…", { + displayName: member.displayName || member.name || member.userId, + }); + } } else { text = _t("Accepting…"); } @@ -66,6 +78,10 @@ const EncryptionInfo = ({waitingForOtherParty, waitingForNetwork, member, onStar ); } + if (inDialog) { + return content; + } + return

{_t("Encryption")}

diff --git a/src/components/views/right_panel/EncryptionPanel.js b/src/components/views/right_panel/EncryptionPanel.js index 6f884c4abf..152f4c0aa0 100644 --- a/src/components/views/right_panel/EncryptionPanel.js +++ b/src/components/views/right_panel/EncryptionPanel.js @@ -112,6 +112,9 @@ const EncryptionPanel = (props) => { const requested = (!request && isRequesting) || (request && (phase === PHASE_REQUESTED || phase === PHASE_UNSENT || phase === undefined)); + const isSelfVerification = request ? + request.isSelfVerification : + member.userId === MatrixClientPeg.get().getUserId(); if (!request || requested) { const initiatedByMe = (!request && isRequesting) || (request && request.initiatedByMe); return ( @@ -120,8 +123,10 @@ const EncryptionPanel = (props) => { isRoomEncrypted={isRoomEncrypted} onStartVerification={onStartVerification} member={member} + isSelfVerification={isSelfVerification} waitingForOtherParty={requested && initiatedByMe} - waitingForNetwork={requested && !initiatedByMe} /> + waitingForNetwork={requested && !initiatedByMe} + inDialog={inDialog} /> ); } else { return ( diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 389a30fe8f..68ff781ceb 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1212,6 +1212,7 @@ "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.", + "Waiting for you to accept on your other session…": "Waiting for you to accept on your other session…", "Waiting for %(displayName)s to accept…": "Waiting for %(displayName)s to accept…", "Accepting…": "Accepting…", "Start Verification": "Start Verification", From 6bb6885578b6b5847ba2dd17ed692e50c3097dde Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Thu, 2 Apr 2020 18:28:01 +0200 Subject: [PATCH 3/9] adjust sas copy to use device -> session --- src/components/views/verification/VerificationShowSas.js | 4 ++-- src/i18n/strings/en_EN.json | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/views/verification/VerificationShowSas.js b/src/components/views/verification/VerificationShowSas.js index 9b4ea4f2bd..36f2df6360 100644 --- a/src/components/views/verification/VerificationShowSas.js +++ b/src/components/views/verification/VerificationShowSas.js @@ -75,7 +75,7 @@ export default class VerificationShowSas extends React.Component {
; sasCaption = this.props.isSelf ? _t( - "Confirm the emoji below are displayed on both devices, in the same order:", + "Confirm the emoji below are displayed on both sessions, in the same order:", ): _t( "Verify this user by confirming the following emoji appear on their screen.", @@ -89,7 +89,7 @@ export default class VerificationShowSas extends React.Component { ; sasCaption = this.props.isSelf ? _t( - "Verify this device by confirming the following number appears on its screen.", + "Verify this session by confirming the following number appears on its screen.", ): _t( "Verify this user by confirming the following number appears on their screen.", diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 68ff781ceb..912a86446f 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -478,9 +478,9 @@ "Compare unique emoji": "Compare unique emoji", "Compare a unique set of emoji if you don't have a camera on either device": "Compare a unique set of emoji if you don't have a camera on either device", "Start": "Start", - "Confirm the emoji below are displayed on both devices, in the same order:": "Confirm the emoji below are displayed on both devices, in the same order:", + "Confirm the emoji below are displayed on both sessions, in the same order:": "Confirm the emoji below are displayed on both sessions, in the same order:", "Verify this user by confirming the following emoji appear on their screen.": "Verify this user by confirming the following emoji appear on their screen.", - "Verify this device by confirming the following number appears on its screen.": "Verify this device by confirming the following number appears on its screen.", + "Verify this session by confirming the following number appears on its screen.": "Verify this session by confirming the following number appears on its screen.", "Verify this user by confirming the following number appears on their screen.": "Verify this user by confirming the following number appears on their screen.", "Unable to find a supported verification method.": "Unable to find a supported verification method.", "Waiting for %(displayName)s to verify…": "Waiting for %(displayName)s to verify…", From 2ee780caa2785b4c234b2a70d2a66f7440728cb5 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Thu, 2 Apr 2020 18:28:14 +0200 Subject: [PATCH 4/9] pass isSelf flag to sas component --- src/components/views/right_panel/VerificationPanel.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/views/right_panel/VerificationPanel.js b/src/components/views/right_panel/VerificationPanel.js index f407d5f792..22cf855d2c 100644 --- a/src/components/views/right_panel/VerificationPanel.js +++ b/src/components/views/right_panel/VerificationPanel.js @@ -275,6 +275,7 @@ export default class VerificationPanel extends React.PureComponent { onCancel={this._onSasMismatchesClick} onDone={this._onSasMatchesClick} inDialog={this.props.inDialog} + isSelf={request.isSelfVerification} /> : ; return

{_t("Compare emoji")}

From 030d594e67ec09f451da928d5b177188c6c7c35a Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 3 Apr 2020 17:03:37 +0200 Subject: [PATCH 5/9] for self-verif, mention which device, not user we're verifying in panel --- .../views/right_panel/EncryptionPanel.js | 10 +++++++++- .../views/right_panel/VerificationPanel.js | 14 +++++++++++--- .../views/verification/VerificationShowSas.js | 11 +++++++++-- 3 files changed, 29 insertions(+), 6 deletions(-) diff --git a/src/components/views/right_panel/EncryptionPanel.js b/src/components/views/right_panel/EncryptionPanel.js index 152f4c0aa0..da06c37f75 100644 --- a/src/components/views/right_panel/EncryptionPanel.js +++ b/src/components/views/right_panel/EncryptionPanel.js @@ -22,6 +22,7 @@ import VerificationPanel from "./VerificationPanel"; import {MatrixClientPeg} from "../../../MatrixClientPeg"; import {ensureDMExists} from "../../../createRoom"; import {useEventEmitter} from "../../../hooks/useEventEmitter"; +import {useAsyncMemo} from "../../../hooks/useAsyncMemo"; import Modal from "../../../Modal"; import {PHASE_REQUESTED, PHASE_UNSENT} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest"; import * as sdk from "../../../index"; @@ -45,6 +46,12 @@ const EncryptionPanel = (props) => { } }, [verificationRequest]); + const deviceId = request && request.channel.deviceId; + const device = useAsyncMemo(() => { + const cli = MatrixClientPeg.get(); + return cli.getStoredDevice(cli.getUserId(), deviceId); + }, [deviceId]); + useEffect(() => { async function awaitPromise() { setRequesting(true); @@ -139,7 +146,8 @@ const EncryptionPanel = (props) => { request={request} key={request.channel.transactionId} inDialog={inDialog} - phase={phase} /> + phase={phase} + device={device} /> ); } }; diff --git a/src/components/views/right_panel/VerificationPanel.js b/src/components/views/right_panel/VerificationPanel.js index 22cf855d2c..e114b60b28 100644 --- a/src/components/views/right_panel/VerificationPanel.js +++ b/src/components/views/right_panel/VerificationPanel.js @@ -210,12 +210,19 @@ export default class VerificationPanel extends React.PureComponent { } const AccessibleButton = sdk.getComponent('elements.AccessibleButton'); + const description = request.isSelfVerification ? + _t("You've successfully verified %(deviceName)s (%(deviceId)s)!", { + deviceName: this.props.device.getDisplayName(), + deviceId: this.props.device.deviceId, + }): + _t("You've successfully verified %(displayName)s!", { + displayName: member.displayName || member.name || member.userId, + }); + return (

{_t("Verified")}

-

{_t("You've successfully verified %(displayName)s!", { - displayName: member.displayName || member.name || member.userId, - })}

+

{description}

{ text }

@@ -276,6 +283,7 @@ export default class VerificationPanel extends React.PureComponent { onDone={this._onSasMatchesClick} inDialog={this.props.inDialog} isSelf={request.isSelfVerification} + device={this.props.device} /> : ; return

{_t("Compare emoji")}

diff --git a/src/components/views/verification/VerificationShowSas.js b/src/components/views/verification/VerificationShowSas.js index 36f2df6360..7e9096e8fe 100644 --- a/src/components/views/verification/VerificationShowSas.js +++ b/src/components/views/verification/VerificationShowSas.js @@ -107,8 +107,15 @@ export default class VerificationShowSas extends React.Component { if (this.state.pending || this.state.cancelling) { let text; if (this.state.pending) { - const {displayName} = this.props; - text = _t("Waiting for %(displayName)s to verify…", {displayName}); + if (this.props.isSelf) { + text = _t("Waiting for your other session, %(deviceName)s (%(deviceId)s), to verify…", { + deviceName: this.props.device.getDisplayName(), + deviceId: this.props.device.deviceId, + }); + } else { + const {displayName} = this.props; + text = _t("Waiting for %(displayName)s to verify…", {displayName}); + } } else { text = _t("Cancelling…"); } From cdbd4da0e4e45d8fa64b5458f3f226d74ac5862a Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 3 Apr 2020 17:04:29 +0200 Subject: [PATCH 6/9] adjust copy for self-verification in verification panel --- .../views/right_panel/VerificationPanel.js | 38 ++++++++++++------- 1 file changed, 25 insertions(+), 13 deletions(-) diff --git a/src/components/views/right_panel/VerificationPanel.js b/src/components/views/right_panel/VerificationPanel.js index e114b60b28..b60cc234eb 100644 --- a/src/components/views/right_panel/VerificationPanel.js +++ b/src/components/views/right_panel/VerificationPanel.js @@ -18,7 +18,6 @@ import React from "react"; import PropTypes from "prop-types"; import * as sdk from '../../../index'; -import {MatrixClientPeg} from '../../../MatrixClientPeg'; import {verificationMethods} from 'matrix-js-sdk/src/crypto'; import {SCAN_QR_CODE_METHOD} from "matrix-js-sdk/src/crypto/verification/QRCode"; @@ -200,13 +199,15 @@ export default class VerificationPanel extends React.PureComponent { } renderVerifiedPhase() { - const {member} = this.props; + const {member, request} = this.props; let text; - if (this.props.isRoomEncrypted) { - text = _t("Verify all users in a room to ensure it's secure."); - } else { - text = _t("In encrypted rooms, verify all users to ensure it’s secure."); + if (!request.isSelfVerification) { + if (this.props.isRoomEncrypted) { + text = _t("Verify all users in a room to ensure it's secure."); + } else { + text = _t("In encrypted rooms, verify all users to ensure it’s secure."); + } } const AccessibleButton = sdk.getComponent('elements.AccessibleButton'); @@ -224,8 +225,7 @@ export default class VerificationPanel extends React.PureComponent {

{_t("Verified")}

{description}

-

{ text }

- + { text ?

{ text }

: null } {_t("Got it")} @@ -238,15 +238,27 @@ export default class VerificationPanel extends React.PureComponent { const AccessibleButton = sdk.getComponent('elements.AccessibleButton'); + let startAgainInstruction; + if (request.isSelfVerification) { + startAgainInstruction = _t("Start verification again from the notification."); + } else { + startAgainInstruction = _t("Start verification again from their profile."); + } + let text; if (request.cancellationCode === "m.timeout") { - text = _t("Verification timed out. Start verification again from their profile."); + text = _t("Verification timed out.") + ` ${startAgainInstruction}`; } else if (request.cancellingUserId === request.otherUserId) { - text = _t("%(displayName)s cancelled verification. Start verification again from their profile.", { - displayName: member.displayName || member.name || member.userId, - }); + if (request.isSelfVerification) { + text = _t("You cancelled verification on your other session."); + } else { + text = _t("%(displayName)s cancelled verification.", { + displayName: member.displayName || member.name || member.userId, + }); + } + text = `${text} ${startAgainInstruction}`; } else { - text = _t("You cancelled verification. Start verification again from their profile."); + text = _t("You cancelled verification.") + ` ${startAgainInstruction}`; } return ( From 364421b08896e93cd10050c5e5a89292686dd503 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 3 Apr 2020 17:04:58 +0200 Subject: [PATCH 7/9] adjust self-verification copy in incoming verif req toast --- src/components/structures/MatrixChat.js | 2 +- .../views/toasts/VerificationRequestToast.js | 35 +++++++++++++------ 2 files changed, 26 insertions(+), 11 deletions(-) diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js index 09d4740c73..7d3b7dd0d9 100644 --- a/src/components/structures/MatrixChat.js +++ b/src/components/structures/MatrixChat.js @@ -1521,7 +1521,7 @@ export default createReactClass({ } else if (request.pending) { ToastStore.sharedInstance().addOrReplaceToast({ key: 'verifreq_' + request.channel.transactionId, - title: _t("Verification Request"), + title: request.isSelfVerification ? _t("Self-verification request") : _t("Verification Request"), icon: "verification", props: {request}, component: sdk.getComponent("toasts.VerificationRequestToast"), diff --git a/src/components/views/toasts/VerificationRequestToast.js b/src/components/views/toasts/VerificationRequestToast.js index c11cefc839..6ca582fbc7 100644 --- a/src/components/views/toasts/VerificationRequestToast.js +++ b/src/components/views/toasts/VerificationRequestToast.js @@ -31,7 +31,7 @@ export default class VerificationRequestToast extends React.PureComponent { this.state = {counter: Math.ceil(props.request.timeout / 1000)}; } - componentDidMount() { + async componentDidMount() { const {request} = this.props; if (request.timeout && request.timeout > 0) { this._intervalHandle = setInterval(() => { @@ -48,6 +48,11 @@ export default class VerificationRequestToast extends React.PureComponent { // As a quick & dirty fix, check the toast is still relevant when it mounts (this prevents // a toast hanging around after logging in if you did a verification as part of login). this._checkRequestIsPending(); + + if (request.isSelfVerification) { + const cli = MatrixClientPeg.get(); + this.setState({device: await cli.getStoredDevice(cli.getUserId(), request.channel.deviceId)}); + } } componentWillUnmount() { @@ -107,15 +112,25 @@ export default class VerificationRequestToast extends React.PureComponent { render() { const FormButton = sdk.getComponent("elements.FormButton"); const {request} = this.props; - const userId = request.otherUserId; - const roomId = request.channel.roomId; - let nameLabel = roomId ? userLabelForEventRoom(userId, roomId) : userId; - // for legacy to_device verification requests - if (nameLabel === userId) { - const client = MatrixClientPeg.get(); - const user = client.getUser(userId); - if (user && user.displayName) { - nameLabel = _t("%(name)s (%(userId)s)", {name: user.displayName, userId}); + let nameLabel; + if (request.isSelfVerification) { + if (this.state.device) { + nameLabel = _t("From %(deviceName)s (%(deviceId)s)", { + deviceName: this.state.device.getDisplayName(), + deviceId: this.state.device.deviceId, + }); + } + } else { + const userId = request.otherUserId; + const roomId = request.channel.roomId; + nameLabel = roomId ? userLabelForEventRoom(userId, roomId) : userId; + // for legacy to_device verification requests + if (nameLabel === userId) { + const client = MatrixClientPeg.get(); + const user = client.getUser(userId); + if (user && user.displayName) { + nameLabel = _t("%(name)s (%(userId)s)", {name: user.displayName, userId}); + } } } const declineLabel = this.state.counter == 0 ? From 37289bc832cbe6fa02fde12dbd9da426a098ce23 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 3 Apr 2020 17:05:20 +0200 Subject: [PATCH 8/9] i18n --- src/i18n/strings/en_EN.json | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 912a86446f..3007db1b44 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -483,6 +483,7 @@ "Verify this session by confirming the following number appears on its screen.": "Verify this session by confirming the following number appears on its screen.", "Verify this user by confirming the following number appears on their screen.": "Verify this user by confirming the following number appears on their screen.", "Unable to find a supported verification method.": "Unable to find a supported verification method.", + "Waiting for your other session, %(deviceName)s (%(deviceId)s), to verify…": "Waiting for your other session, %(deviceName)s (%(deviceId)s), to verify…", "Waiting for %(displayName)s to verify…": "Waiting for %(displayName)s to verify…", "Cancelling…": "Cancelling…", "They match": "They match", @@ -559,6 +560,7 @@ "Verify": "Verify", "Later": "Later", "Review": "Review", + "From %(deviceName)s (%(deviceId)s)": "From %(deviceName)s (%(deviceId)s)", "Decline (%(counter)s)": "Decline (%(counter)s)", "Accept to continue:": "Accept to continue:", "Upload": "Upload", @@ -1259,12 +1261,16 @@ "Yes": "Yes", "Verify all users in a room to ensure it's secure.": "Verify all users in a room to ensure it's secure.", "In encrypted rooms, verify all users to ensure it’s secure.": "In encrypted rooms, verify all users to ensure it’s secure.", - "Verified": "Verified", + "You've successfully verified %(deviceName)s (%(deviceId)s)!": "You've successfully verified %(deviceName)s (%(deviceId)s)!", "You've successfully verified %(displayName)s!": "You've successfully verified %(displayName)s!", + "Verified": "Verified", "Got it": "Got it", - "Verification timed out. Start verification again from their profile.": "Verification timed out. Start verification again from their profile.", - "%(displayName)s cancelled verification. Start verification again from their profile.": "%(displayName)s cancelled verification. Start verification again from their profile.", - "You cancelled verification. Start verification again from their profile.": "You cancelled verification. Start verification again from their profile.", + "Start verification again from the notification.": "Start verification again from the notification.", + "Start verification again from their profile.": "Start verification again from their profile.", + "Verification timed out.": "Verification timed out.", + "You cancelled verification on your other session.": "You cancelled verification on your other session.", + "%(displayName)s cancelled verification.": "%(displayName)s cancelled verification.", + "You cancelled verification.": "You cancelled verification.", "Verification cancelled": "Verification cancelled", "Compare emoji": "Compare emoji", "Sunday": "Sunday", @@ -1964,6 +1970,7 @@ "Review terms and conditions": "Review terms and conditions", "Old cryptography data detected": "Old cryptography data detected", "Data from an older version of Riot has been detected. This will have caused end-to-end cryptography to malfunction in the older version. End-to-end encrypted messages exchanged recently whilst using the older version may not be decryptable in this version. This may also cause messages exchanged with this version to fail. If you experience problems, log out and back in again. To retain message history, export and re-import your keys.": "Data from an older version of Riot has been detected. This will have caused end-to-end cryptography to malfunction in the older version. End-to-end encrypted messages exchanged recently whilst using the older version may not be decryptable in this version. This may also cause messages exchanged with this version to fail. If you experience problems, log out and back in again. To retain message history, export and re-import your keys.", + "Self-verification request": "Self-verification request", "Logout": "Logout", "%(creator)s created and configured the room.": "%(creator)s created and configured the room.", "Your Communities": "Your Communities", From 2cf55fb2a0a166eca9bf5217edcfb44e88550dc9 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 3 Apr 2020 17:32:09 +0200 Subject: [PATCH 9/9] adjust start options styling --- res/css/views/right_panel/_VerificationPanel.scss | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/res/css/views/right_panel/_VerificationPanel.scss b/res/css/views/right_panel/_VerificationPanel.scss index 01a654b523..7634706d51 100644 --- a/res/css/views/right_panel/_VerificationPanel.scss +++ b/res/css/views/right_panel/_VerificationPanel.scss @@ -75,6 +75,7 @@ limitations under the License. margin-top: 10px; margin-bottom: 10px; align-items: stretch; + justify-content: center; > .mx_VerificationPanel_QRPhase_betweenText { width: 50px; @@ -90,10 +91,12 @@ limitations under the License. border-radius: 10px; flex: 1; display: flex; - padding: 10px; + padding: 20px; align-items: center; flex-direction: column; position: relative; + max-width: 310px; + justify-content: space-between; canvas, .mx_VerificationPanel_QRPhase_noQR { width: 220px !important; @@ -106,19 +109,15 @@ limitations under the License. } > p { + margin-top: 0; font-weight: 700; } .mx_VerificationPanel_QRPhase_helpText { font-size: 14px; - margin-top: 71px; + margin: 30px 0; text-align: center; } - - .mx_AccessibleButton { - position: absolute; - bottom: 30px; - } } }