Merge pull request #4358 from matrix-org/t3chguy/fix_complete_security

Fix sas verification buttons to match figma

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;
+        }
+    }
+}

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>;
     }

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>);

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>