Merge pull request #6943 from matrix-org/fayed/emoji-compare-buttons

Update the button styling on the emoji comparison dialog during cross-signing

res/css/views/verification/_VerificationShowSas.scss

@@ -62,20 +62,13 @@ limitations under the License.
     flex-basis: 100%;
 }
 
-.mx_VerificationShowSas {
+.mx_VerificationShowSas_buttonRow {
-    .mx_Dialog_buttons {
+    text-align: center;
-        // this is more specific than the DialogButtons css so gets preference
+    display: flex;
-        button.mx_VerificationShowSas_matchButton {
+    flex-wrap: wrap;
-            color: $accent-color;
+    justify-content: center;
-            background-color: $accent-bg-color;
-            border: none;
-        }
 
-        // this is more specific than the DialogButtons css so gets preference
+    .mx_AccessibleButton {
-        button.mx_VerificationShowSas_noMatchButton {
+        margin-inline: 9px;
-            color: $notice-primary-color;
-            background-color: $notice-primary-bg-color;
-            border: none;
-        }
     }
 }

src/components/views/verification/VerificationShowSas.tsx

@@ -20,7 +20,6 @@ import { DeviceInfo } from "matrix-js-sdk/src//crypto/deviceinfo";
 import { _t, _td } from '../../../languageHandler';
 import { PendingActionSpinner } from "../right_panel/EncryptionInfo";
 import AccessibleButton from "../elements/AccessibleButton";
-import DialogButtons from "../elements/DialogButtons";
 import { fixupColorFonts } from '../../../utils/FontManager';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
@@ -143,25 +142,15 @@ export default class VerificationShowSas extends React.Component<IProps, IState>
                 text = _t("Cancelling…");
             }
             confirm = <PendingActionSpinner text={text} />;
-        } 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")}
-                onPrimaryButtonClick={this.onMatchClick}
-                primaryButtonClass="mx_UserInfo_wideButton mx_VerificationShowSas_matchButton"
-                cancelButton={_t("They don't match")}
-                onCancel={this.onDontMatchClick}
-                cancelButtonClass="mx_UserInfo_wideButton mx_VerificationShowSas_noMatchButton"
-            />;
         } else {
-            confirm = <React.Fragment>
+            confirm = <div className="mx_VerificationShowSas_buttonRow">
                 <AccessibleButton onClick={this.onDontMatchClick} kind="danger">
                     { _t("They don't match") }
                 </AccessibleButton>
                 <AccessibleButton onClick={this.onMatchClick} kind="primary">
                     { _t("They match") }
                 </AccessibleButton>
-            </React.Fragment>;
+            </div>;
         }
 
         return <div className="mx_VerificationShowSas">

src/i18n/strings/en_EN.json

@@ -952,8 +952,8 @@
     "Waiting for you to verify on your other session…": "Waiting for you to verify on your other session…",
     "Waiting for %(displayName)s to verify…": "Waiting for %(displayName)s to verify…",
     "Cancelling…": "Cancelling…",
-    "They match": "They match",
     "They don't match": "They don't match",
+    "They match": "They match",
     "To be secure, do this in person or use a trusted way to communicate.": "To be secure, do this in person or use a trusted way to communicate.",
     "Dog": "Dog",
     "Cat": "Cat",