From 469d53396469ed0125388a5a7cfa3b7720009fe2 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Fri, 31 Jan 2020 11:48:49 +0000
Subject: [PATCH] Apply some CSS

---
 res/css/_components.scss                      |  1 +
 .../_VerificationQREmojiOptions.scss          | 71 +++++++++++++++++++
 .../VerificationQREmojiOptions.js             |  4 +-
 3 files changed, 74 insertions(+), 2 deletions(-)
 create mode 100644 res/css/views/verification/_VerificationQREmojiOptions.scss

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 {
                         <p>{_t("Scan this unique code")}</p>
                         {qrCode}
                     </div>
-                    <span>{_t("or")}</span>
+                    <div className='mx_IncomingSasDialog_betweenText'>{_t("or")}</div>
                     <div className='mx_IncomingSasDialog_startOption'>
                         <p>{_t("Compare unique emoji")}</p>
-                        <span>{_t("Compare a unique set of emoji if you don't have a camera on either device")}</span>
+                        <span className='mx_IncomingSasDialog_helpText'>{_t("Compare a unique set of emoji if you don't have a camera on either device")}</span>
                         <AccessibleButton onClick={this.props.onStartEmoji} kind='primary'>
                             {_t("Start")}
                         </AccessibleButton>