diff --git a/res/css/_components.scss b/res/css/_components.scss index bc636eb3c6..ad6bbdc486 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -206,6 +206,7 @@ @import "./views/settings/tabs/user/_SecurityUserSettingsTab.scss"; @import "./views/settings/tabs/user/_VoiceUserSettingsTab.scss"; @import "./views/terms/_InlineTermsAgreement.scss"; +@import "./views/verification/_VerificationQREmojiOptions.scss"; @import "./views/verification/_VerificationShowSas.scss"; @import "./views/voip/_CallView.scss"; @import "./views/voip/_IncomingCallbox.scss"; diff --git a/res/css/views/verification/_VerificationQREmojiOptions.scss b/res/css/views/verification/_VerificationQREmojiOptions.scss new file mode 100644 index 0000000000..6c9b527ba9 --- /dev/null +++ b/res/css/views/verification/_VerificationQREmojiOptions.scss @@ -0,0 +1,71 @@ +/* +Copyright 2020 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +.mx_IncomingSasDialog_startOptions { + display: flex; + margin-top: 10px; + margin-bottom: 10px; + align-items: stretch; + + > .mx_IncomingSasDialog_betweenText { + width: 50px; + vertical-align: middle; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + } + + .mx_IncomingSasDialog_startOption { + background-color: $user-tile-hover-bg-color; + border-radius: 10px; + flex: 1; + display: flex; + padding: 10px; + align-items: center; + flex-direction: column; + position: relative; + + canvas, .mx_VerificationQREmojiOptions_noQR { + width: 220px !important; + height: 220px !important; + background-color: #fff; + border-radius: 4px; + vertical-align: middle; + text-align: center; + padding: 10px; + } + + > p { + font-weight: 700; + } + + .mx_IncomingSasDialog_helpText { + font-size: 14px; + margin-top: 71px; + text-align: center; + } + + .mx_AccessibleButton { + position: absolute; + bottom: 30px; + } + } +} + +//mx_IncomingSasDialog_startOptions +//mx_IncomingSasDialog_startOption > canvas +//mx_VerificationQREmojiOptions_noQR diff --git a/src/components/views/verification/VerificationQREmojiOptions.js b/src/components/views/verification/VerificationQREmojiOptions.js index 07f3b30f50..770b8a44a4 100644 --- a/src/components/views/verification/VerificationQREmojiOptions.js +++ b/src/components/views/verification/VerificationQREmojiOptions.js @@ -66,10 +66,10 @@ export default class VerificationQREmojiOptions extends React.Component {
{_t("Scan this unique code")}
{qrCode} - {_t("or")} +{_t("Compare unique emoji")}
- {_t("Compare a unique set of emoji if you don't have a camera on either device")} + {_t("Compare a unique set of emoji if you don't have a camera on either device")}