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>