move css to correct file

Move the CSS for the dialog layout used in VerificationPanel to
_VerificationPanel.scss,
and delete the latter as it doesn't have any css of it's own anymore

res/css/_components.scss

@@ -206,7 +206,6 @@
 @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";

res/css/views/right_panel/_VerificationPanel.scss

@@ -36,4 +36,72 @@ limitations under the License.
             max-width: 240px;
         }
     }
+
+}
+
+// Special case styling for EncryptionPanel in a Modal dialog
+.mx_Dialog, .mx_CompleteSecurity_body {
+    .mx_VerificationPanel_QRPhase_startOptions {
+        display: flex;
+        margin-top: 10px;
+        margin-bottom: 10px;
+        align-items: stretch;
+
+        > .mx_VerificationPanel_QRPhase_betweenText {
+            width: 50px;
+            vertical-align: middle;
+            text-align: center;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .mx_VerificationPanel_QRPhase_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_VerificationPanel_QRPhase_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_VerificationPanel_QRPhase_helpText {
+                font-size: 14px;
+                margin-top: 71px;
+                text-align: center;
+            }
+
+            .mx_AccessibleButton {
+                position: absolute;
+                bottom: 30px;
+            }
+        }
+    }
+
+    // EncryptionPanel when verification is done
+    .mx_VerificationPanel_verified_section {
+        // center the big shield icon
+        .mx_E2EIcon {
+            margin: 0 auto;
+        }
+        // right align the "Got it" button
+        .mx_AccessibleButton {
+            float: right;
+        }
+    }
 }

res/css/views/verification/_VerificationQREmojiOptions.scss

@@ -1,86 +0,0 @@
-/*
-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;
-        }
-    }
-}
-
-// Special case styling for EncryptionPanel in a Modal dialog
-.mx_Dialog {
-    // EncryptionPanel when verification is done
-    .mx_VerificationPanel_verified_section {
-        // center the big shield icon
-        .mx_E2EIcon {
-            margin: 0 auto;
-        }
-        // right align the "Got it" button
-        .mx_AccessibleButton {
-            float: right;
-        }
-    }
-}
-
-//mx_IncomingSasDialog_startOptions
-//mx_IncomingSasDialog_startOption > canvas
-//mx_VerificationQREmojiOptions_noQR

src/components/views/right_panel/VerificationPanel.js

@@ -73,22 +73,22 @@ export default class VerificationPanel extends React.PureComponent {
 
         if (this.props.layout === 'dialog') {
             // HACK: This is a terrible idea.
-            let qrCode = <div className='mx_VerificationQREmojiOptions_noQR'><Spinner /></div>;
+            let qrCode = <div className='mx_VerificationPanel_QRPhase_noQR'><Spinner /></div>;
             if (this.state.qrCodeProps) {
                 qrCode = <VerificationQRCode {...this.state.qrCodeProps} />;
             }
             return (
                 <div>
                     {_t("Verify this session by completing one of the following:")}
-                    <div className='mx_IncomingSasDialog_startOptions'>
+                    <div className='mx_VerificationPanel_QRPhase_startOptions'>
-                        <div className='mx_IncomingSasDialog_startOption'>
+                        <div className='mx_VerificationPanel_QRPhase_startOption'>
                             <p>{_t("Scan this unique code")}</p>
                             {qrCode}
                         </div>
-                        <div className='mx_IncomingSasDialog_betweenText'>{_t("or")}</div>
+                        <div className='mx_VerificationPanel_QRPhase_betweenText'>{_t("or")}</div>
-                        <div className='mx_IncomingSasDialog_startOption'>
+                        <div className='mx_VerificationPanel_QRPhase_startOption'>
                             <p>{_t("Compare unique emoji")}</p>
-                            <span className='mx_IncomingSasDialog_helpText'>{_t("Compare a unique set of emoji if you don't have a camera on either device")}</span>
+                            <span className='mx_VerificationPanel_QRPhase_helpText'>{_t("Compare a unique set of emoji if you don't have a camera on either device")}</span>
                             <AccessibleButton onClick={this._startSAS} kind='primary'>
                                 {_t("Start")}
                             </AccessibleButton>