From 712e6e8c4999fb89b7b591c5bfb14768409e01ae Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 7 Apr 2020 19:03:12 +0100
Subject: [PATCH] Fix sas verification buttons to match figma and remove
 useless inDialog prop from EncryptionPanel.js

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 .../verification/_VerificationShowSas.scss     | 18 ++++++++++++++++++
 .../views/dialogs/VerificationRequestDialog.js |  1 -
 .../views/right_panel/EncryptionPanel.js       |  6 +++---
 .../views/verification/VerificationShowSas.js  |  4 ++--
 4 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/res/css/views/verification/_VerificationShowSas.scss b/res/css/views/verification/_VerificationShowSas.scss
index 6e26943640..af003112f7 100644
--- a/res/css/views/verification/_VerificationShowSas.scss
+++ b/res/css/views/verification/_VerificationShowSas.scss
@@ -61,3 +61,21 @@ limitations under the License.
 .mx_VerificationShowSas_emojiSas_break {
     flex-basis: 100%;
 }
+
+.mx_VerificationShowSas {
+    .mx_Dialog_buttons {
+        // this is more specific than the DialogButtons css so gets preference
+        button.mx_VerificationShowSas_matchButton {
+            color: $accent-color;
+            background-color: $accent-bg-color;
+            border: none;
+        }
+
+        // this is more specific than the DialogButtons css so gets preference
+        button.mx_VerificationShowSas_noMatchButton {
+            color: $notice-primary-color;
+            background-color: $notice-primary-bg-color;
+            border: none;
+        }
+    }
+}
diff --git a/src/components/views/dialogs/VerificationRequestDialog.js b/src/components/views/dialogs/VerificationRequestDialog.js
index 88ca0bc337..7ff2cb8f50 100644
--- a/src/components/views/dialogs/VerificationRequestDialog.js
+++ b/src/components/views/dialogs/VerificationRequestDialog.js
@@ -61,7 +61,6 @@ export default class VerificationRequestDialog extends React.Component {
                 verificationRequestPromise={this.props.verificationRequestPromise}
                 onClose={this.props.onFinished}
                 member={member}
-                inDialog={true}
             />
         </BaseDialog>;
     }
diff --git a/src/components/views/right_panel/EncryptionPanel.js b/src/components/views/right_panel/EncryptionPanel.js
index da06c37f75..476b6cace9 100644
--- a/src/components/views/right_panel/EncryptionPanel.js
+++ b/src/components/views/right_panel/EncryptionPanel.js
@@ -32,7 +32,7 @@ import {_t} from "../../../languageHandler";
 const MISMATCHES = ["m.key_mismatch", "m.user_error", "m.mismatched_sas"];
 
 const EncryptionPanel = (props) => {
-    const {verificationRequest, verificationRequestPromise, member, onClose, layout, isRoomEncrypted, inDialog} = props;
+    const {verificationRequest, verificationRequestPromise, member, onClose, layout, isRoomEncrypted} = props;
     const [request, setRequest] = useState(verificationRequest);
     // state to show a spinner immediately after clicking "start verification",
     // before we have a request
@@ -133,7 +133,7 @@ const EncryptionPanel = (props) => {
                 isSelfVerification={isSelfVerification}
                 waitingForOtherParty={requested && initiatedByMe}
                 waitingForNetwork={requested && !initiatedByMe}
-                inDialog={inDialog} />
+                inDialog={layout === "dialog"} />
         </React.Fragment>);
     } else {
         return (<React.Fragment>
@@ -145,7 +145,7 @@ const EncryptionPanel = (props) => {
                 member={member}
                 request={request}
                 key={request.channel.transactionId}
-                inDialog={inDialog}
+                inDialog={layout === "dialog"}
                 phase={phase}
                 device={device} />
         </React.Fragment>);
diff --git a/src/components/views/verification/VerificationShowSas.js b/src/components/views/verification/VerificationShowSas.js
index 7e9096e8fe..5fd0dca267 100644
--- a/src/components/views/verification/VerificationShowSas.js
+++ b/src/components/views/verification/VerificationShowSas.js
@@ -125,10 +125,10 @@ export default class VerificationShowSas extends React.Component {
             confirm = <DialogButtons
                 primaryButton={_t("They match")}
                 onPrimaryButtonClick={this.onMatchClick}
-                primaryButtonClass="mx_UserInfo_wideButton"
+                primaryButtonClass="mx_UserInfo_wideButton mx_VerificationShowSas_matchButton"
                 cancelButton={_t("They don't match")}
                 onCancel={this.onDontMatchClick}
-                cancelButtonClass="mx_UserInfo_wideButton"
+                cancelButtonClass="mx_UserInfo_wideButton mx_VerificationShowSas_noMatchButton"
             />;
         } else {
             confirm = <React.Fragment>