diff --git a/res/css/views/right_panel/_UserInfo.scss b/res/css/views/right_panel/_UserInfo.scss index 5e5b66f58a..81e4c396e7 100644 --- a/res/css/views/right_panel/_UserInfo.scss +++ b/res/css/views/right_panel/_UserInfo.scss @@ -211,7 +211,7 @@ limitations under the License. padding-bottom: 16px; } - .mx_UserInfo_scrollContainer:not(.mx_UserInfo_separator) { + .mx_UserInfo_container:not(.mx_UserInfo_separator) { padding-top: 16px; padding-bottom: 0; diff --git a/res/css/views/verification/_VerificationShowSas.scss b/res/css/views/verification/_VerificationShowSas.scss index a0da7e2539..32401bc446 100644 --- a/res/css/views/verification/_VerificationShowSas.scss +++ b/res/css/views/verification/_VerificationShowSas.scss @@ -28,21 +28,38 @@ limitations under the License. .mx_VerificationShowSas_emojiSas { text-align: center; + display: flex; + flex-wrap: wrap; + justify-content: center; + margin: 25px 0; } .mx_VerificationShowSas_emojiSas_block { display: inline-block; - margin-left: 15px; - margin-right: 15px; - text-align: center; - margin-bottom: 20px; + margin-bottom: 30px; + position: relative; + // allow the blocks to grow to space themselves evenly up to a limit of 100px + flex-grow: 1; + max-width: 100px; } .mx_VerificationShowSas_emojiSas_emoji { font-size: 48px; } -.mx_VerificationShowSas_emojiSas_label { - text-align: center; - font-weight: bold; +.mx_UserInfo .mx_VerificationShowSas_emojiSas_emoji { + font-size: 32px; // in UserInfo use a smaller font-size to fit in a smaller space +} + +.mx_VerificationShowSas_emojiSas_label { + font-weight: bold; + // allow the text to overflow the parent by 15px on each side + // this is to keep the width of the parent consistent for spacing centrally via flexbox + position: absolute; + left: -15px; + right: -15px; +} + +.mx_VerificationShowSas_emojiSas_break { + flex-basis: 100%; } diff --git a/src/MatrixClientPeg.js b/src/MatrixClientPeg.js index 450bec8e77..98fcc85d60 100644 --- a/src/MatrixClientPeg.js +++ b/src/MatrixClientPeg.js @@ -32,6 +32,7 @@ import MatrixClientBackedSettingsHandler from "./settings/handlers/MatrixClientB import * as StorageManager from './utils/StorageManager'; import IdentityAuthClient from './IdentityAuthClient'; import { crossSigningCallbacks } from './CrossSigningManager'; +import {SHOW_QR_CODE_METHOD} from "matrix-js-sdk/src/crypto/verification/QRCode"; interface MatrixClientCreds { homeserverUrl: string, @@ -217,7 +218,11 @@ class _MatrixClientPeg { timelineSupport: true, forceTURN: !SettingsStore.getValue('webRtcAllowPeerToPeer', false), fallbackICEServerAllowed: !!SettingsStore.getValue('fallbackICEServerAllowed'), - verificationMethods: [verificationMethods.SAS, verificationMethods.QR_CODE_SHOW], + verificationMethods: [ + verificationMethods.SAS, + SHOW_QR_CODE_METHOD, + verificationMethods.RECIPROCATE_QR_CODE, + ], unstableClientRelationAggregation: true, identityServer: new IdentityAuthClient(), }; diff --git a/src/components/views/verification/VerificationShowSas.js b/src/components/views/verification/VerificationShowSas.js index 40d3b96beb..38bc1bb40a 100644 --- a/src/components/views/verification/VerificationShowSas.js +++ b/src/components/views/verification/VerificationShowSas.js @@ -62,7 +62,9 @@ export default class VerificationShowSas extends React.Component { , ); sasDisplay =
{sasCaption}
-{_t("To be secure, do this in person or use a trusted way to communicate.")}
{sasDisplay} +{_t("To be secure, do this in person or use a trusted way to communicate.")}
{confirm}