Fix UserInfo e2e buttons to match Figma

res/css/views/right_panel/_UserInfo.scss

@@ -266,12 +266,31 @@ limitations under the License.
         }
     }
 
+    .mx_AccessibleButton {
+        padding: 8px 18px;
+
+        &.mx_AccessibleButton_kind_primary {
+            color: $accent-color;
+            background-color: $accent-bg-color;
+        }
+
+        &.mx_AccessibleButton_kind_danger {
+            color: $notice-primary-color;
+            background-color: $notice-primary-bg-color;
+        }
+    }
+
+    .mx_VerificationShowSas .mx_AccessibleButton,
     .mx_UserInfo_wideButton {
         display: block;
-        margin: 16px 0;
+        margin: 16px 0 8px;
     }
-    button.mx_UserInfo_wideButton {
-        width: 100%; // FIXME get rid of this once we get rid of DialogButtons here
+
+
+    .mx_VerificationShowSas {
+        .mx_AccessibleButton + .mx_AccessibleButton {
+            margin: 8px 0; // space between buttons
+        }
     }
 }
 

src/components/views/dialogs/DeviceVerifyDialog.js

@@ -279,6 +279,7 @@ export default class DeviceVerifyDialog extends React.Component {
             onDone={this._onSasMatchesClick}
             isSelf={MatrixClientPeg.get().getUserId() === this.props.userId}
             onStartEmoji={this._onUseSasClick}
+            inDialog={true}
         />;
     }
 

src/components/views/dialogs/IncomingSasDialog.js

@@ -196,7 +196,8 @@ export default class IncomingSasDialog extends React.Component {
             sas={this._showSasEvent.sas}
             onCancel={this._onCancelClick}
             onDone={this._onSasMatchesClick}
-            isSelf={this.props.verifier.userId == MatrixClientPeg.get().getUserId()}
+            isSelf={this.props.verifier.userId === MatrixClientPeg.get().getUserId()}
+            inDialog={true}
         />;
     }
 

src/components/views/dialogs/VerificationRequestDialog.js

@@ -48,6 +48,7 @@ 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

@@ -31,7 +31,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} = props;
+    const {verificationRequest, verificationRequestPromise, member, onClose, layout, isRoomEncrypted, inDialog} = props;
     const [request, setRequest] = useState(verificationRequest);
     // state to show a spinner immediately after clicking "start verification",
     // before we have a request
@@ -133,6 +133,7 @@ const EncryptionPanel = (props) => {
                 member={member}
                 request={request}
                 key={request.channel.transactionId}
+                inDialog={inDialog}
                 phase={phase} />
         </React.Fragment>);
     }
@@ -142,6 +143,7 @@ EncryptionPanel.propTypes = {
     onClose: PropTypes.func.isRequired,
     verificationRequest: PropTypes.object,
     layout: PropTypes.string,
+    inDialog: PropTypes.bool,
 };
 
 export default EncryptionPanel;

src/components/views/right_panel/VerificationPanel.js

@@ -245,6 +245,7 @@ export default class VerificationPanel extends React.PureComponent {
                             sas={this.state.sasEvent.sas}
                             onCancel={this._onSasMismatchesClick}
                             onDone={this._onSasMatchesClick}
+                            inDialog={this.props.inDialog}
                         />
                     </div>;
                 } else {

src/components/views/verification/VerificationShowSas.js

@@ -33,6 +33,7 @@ export default class VerificationShowSas extends React.Component {
         onCancel: PropTypes.func.isRequired,
         sas: PropTypes.object.isRequired,
         isSelf: PropTypes.bool,
+        inDialog: PropTypes.bool, // whether this component is being shown in a dialog and to use DialogButtons
     };
 
     constructor(props) {
@@ -112,7 +113,7 @@ export default class VerificationShowSas extends React.Component {
                 text = _t("Cancelling…");
             }
             confirm = <PendingActionSpinner text={text} />;
-        } else {
+        } else if (this.props.inDialog) {
             // FIXME: stop using DialogButtons here once this component is only used in the right panel verification
             confirm = <DialogButtons
                 primaryButton={_t("They match")}
@@ -122,6 +123,15 @@ export default class VerificationShowSas extends React.Component {
                 onCancel={this.onDontMatchClick}
                 cancelButtonClass="mx_UserInfo_wideButton"
             />;
+        } else {
+            confirm = <React.Fragment>
+                <AccessibleButton onClick={this.onMatchClick} kind="primary">
+                    { _t("They match") }
+                </AccessibleButton>
+                <AccessibleButton onClick={this.onDontMatchClick} kind="danger">
+                    { _t("They don't match") }
+                </AccessibleButton>
+            </React.Fragment>;
         }
 
         return <div className="mx_VerificationShowSas">