Use correct color for cancel button in dialog (#34308)

* Use secondary style for cancel button in dialog * Update snapshots * Update screenshots * Update screenshots
2026-07-23 12:41:17 +00:00
parent 8dc1965d15
commit 2d07c591e3
32 changed files with 41 additions and 2 deletions
@@ -662,6 +662,7 @@ legend {
    button:not(
        .mx_Dialog_nonDialogButton,
        .mx_AccessibleButton,
+        .cancel,
        .mx_UserProfileSettings button,
        .mx_ThemeChoicePanel_CustomTheme button,
        .mx_UnpinAllDialog button,
@@ -723,6 +724,13 @@ legend {
    opacity: 0.7;
 }

+.mx_Dialog_buttons button.cancel {
+    color: var(--cpd-color-text-primary);
+    background-color: var(--cpd-color-bg-action-secondary-rest);
+    border-color: var(--cpd-color-border-interactive-secondary);
+    min-width: 156px;
+}
+
 /* Spinner Dialog overide */
 .mx_Dialog_wrapper.mx_Dialog_spinner {
    /* This is not a real dialog, so we shouldn't show a glass border */
@@ -29,8 +29,10 @@ interface IProps {
    // should there be a cancel button? default: true
    hasCancel?: boolean;

-    // The class of the cancel button, only used if a cancel button is
-    // enabled
+    /**
+     * The class of the cancel button, only used if a cancel button is enabled
+     * @default "cancel"
+     */
    cancelButtonClass?: string;

    // onClick handler for the cancel button.
@@ -58,6 +60,7 @@ export default class DialogButtons extends React.Component<IProps> {
    public static defaultProps: Partial<IProps> = {
        hasCancel: true,
        disabled: false,
+        cancelButtonClass: "cancel",
    };

    private onCancelClick = (event: React.MouseEvent): void => {
@@ -107,6 +107,7 @@ exports[`dialogTermsInteractionCallback should render a dialog with the expected
      class="mx_Dialog_buttons_row"
    >
      <button
+        class="cancel"
        data-testid="dialog-cancel-button"
        type="button"
      >
@@ -54,6 +54,7 @@ exports[`<NewRecoveryMethodDialog /> when key backup is disabled 1`] = `
        class="mx_Dialog_buttons_row"
      >
        <button
+          class="cancel"
          data-testid="dialog-cancel-button"
          type="button"
        >
@@ -152,6 +153,7 @@ exports[`<NewRecoveryMethodDialog /> when key backup is enabled 1`] = `
        class="mx_Dialog_buttons_row"
      >
        <button
+          class="cancel"
          data-testid="dialog-cancel-button"
          type="button"
        >
@@ -609,6 +609,7 @@ exports[`<MatrixChat /> with an existing session onAction() room actions leave_r
      class="mx_Dialog_buttons_row"
    >
      <button
+        class="cancel"
        data-testid="dialog-cancel-button"
        type="button"
      >
@@ -678,6 +679,7 @@ exports[`<MatrixChat /> with an existing session onAction() room actions leave_r
      class="mx_Dialog_buttons_row"
    >
      <button
+        class="cancel"
        data-testid="dialog-cancel-button"
        type="button"
      >
@@ -102,6 +102,7 @@ exports[`AnalyticsLearnMoreDialog should match snapshot 1`] = `
        class="mx_Dialog_buttons_row"
      >
        <button
+          class="cancel"
          data-testid="dialog-cancel-button"
          type="button"
        >
@@ -47,6 +47,7 @@ exports[`BugReportDialog renders when the config only allows local downloads: lo
        class="mx_Dialog_buttons_row"
      >
        <button
+          class="cancel"
          data-testid="dialog-cancel-button"
          type="button"
        >
@@ -92,6 +92,7 @@ exports[`<ChangelogDialog /> should fetch github proxy url for each repo with ol
        class="mx_Dialog_buttons_row"
      >
        <button
+          class="cancel"
          data-testid="dialog-cancel-button"
          type="button"
        >
@@ -131,6 +131,7 @@ exports[`ConfirmRejectInviteDialog can reject with options selected 1`] = `
          class="mx_Dialog_buttons_row"
        >
          <button
+            class="cancel"
            data-testid="dialog-cancel-button"
            type="button"
          >
@@ -66,6 +66,7 @@ exports[`ConfirmUserActionDialog renders 1`] = `
        class="mx_Dialog_buttons_row"
      >
        <button
+          class="cancel"
          data-testid="dialog-cancel-button"
          type="button"
        >
@@ -208,6 +208,7 @@ exports[`<CreateRoomDialog /> for a private room should create a private room 1`
        class="mx_Dialog_buttons_row"
      >
        <button
+          class="cancel"
          data-testid="dialog-cancel-button"
          type="button"
        >
@@ -448,6 +449,7 @@ exports[`<CreateRoomDialog /> for a private room should render not the advanced
        class="mx_Dialog_buttons_row"
      >
        <button
+          class="cancel"
          data-testid="dialog-cancel-button"
          type="button"
        >
@@ -690,6 +692,7 @@ exports[`<CreateRoomDialog /> for a private room when the state encryption labs
        class="mx_Dialog_buttons_row"
      >
        <button
+          class="cancel"
          data-testid="dialog-cancel-button"
          type="button"
        >
@@ -64,6 +64,7 @@ exports[`CreateSectionDialog renders the dialog 1`] = `
        class="mx_Dialog_buttons_row"
      >
        <button
+          class="cancel"
          data-testid="dialog-cancel-button"
          type="button"
        >
@@ -218,6 +218,7 @@ exports[`<ExportDialog /> renders export dialog 1`] = `
      class="mx_Dialog_buttons_row"
    >
      <button
+        class="cancel"
        data-testid="dialog-cancel-button"
        type="button"
      >
@@ -38,6 +38,7 @@ exports[`<IntegrationsDisabledDialog /> should render as expected 1`] = `
        class="mx_Dialog_buttons_row"
      >
        <button
+          class="cancel"
          data-testid="dialog-cancel-button"
          type="button"
        >
@@ -497,6 +497,7 @@ exports[`LogoutDialog shows a regular dialog when crypto is disabled 1`] = `
        class="mx_Dialog_buttons_row"
      >
        <button
+          class="cancel"
          data-testid="dialog-cancel-button"
          type="button"
        >
@@ -78,6 +78,7 @@ exports[`ManualDeviceKeyVerificationDialog should render correctly 1`] = `
        class="mx_Dialog_buttons_row"
      >
        <button
+          class="cancel"
          data-testid="dialog-cancel-button"
          type="button"
        >
@@ -36,6 +36,7 @@ exports[`RemoveSectionDialog renders the dialog when section is empty 1`] = `
        class="mx_Dialog_buttons_row"
      >
        <button
+          class="cancel"
          data-testid="dialog-cancel-button"
          type="button"
        >
@@ -119,6 +120,7 @@ exports[`RemoveSectionDialog renders the dialog when section is not empty 1`] =
        class="mx_Dialog_buttons_row"
      >
        <button
+          class="cancel"
          data-testid="dialog-cancel-button"
          type="button"
        >
@@ -103,6 +103,7 @@ exports[`ReportRoomDialog displays admin message 1`] = `
          class="mx_Dialog_buttons_row"
        >
          <button
+            class="cancel"
            data-testid="dialog-cancel-button"
            type="button"
          >
@@ -82,6 +82,7 @@ exports[`WidgetOpenIDPermissionsDialog should render 1`] = `
        class="mx_Dialog_buttons_row"
      >
        <button
+          class="cancel"
          data-testid="dialog-cancel-button"
          type="button"
        >
@@ -98,6 +98,7 @@ exports[`CreateSecretStorageDialog handles the happy path 1`] = `
            class="mx_Dialog_buttons_row"
          >
            <button
+              class="cancel"
              data-testid="dialog-cancel-button"
              type="button"
            >
@@ -247,6 +248,7 @@ exports[`CreateSecretStorageDialog when there is an error fetching the backup ve
              class="mx_Dialog_buttons_row"
            >
              <button
+                class="cancel"
                data-testid="dialog-cancel-button"
                type="button"
              >
@@ -58,6 +58,7 @@ exports[`<RestoreKeyBackupDialog /> should display an error when recovery key is
              class="mx_Dialog_buttons_row"
            >
              <button
+                class="cancel"
                data-testid="dialog-cancel-button"
                type="button"
              >
@@ -171,6 +172,7 @@ exports[`<RestoreKeyBackupDialog /> should not raise an error when recovery is v
              class="mx_Dialog_buttons_row"
            >
              <button
+                class="cancel"
                data-testid="dialog-cancel-button"
                type="button"
              >
@@ -281,6 +283,7 @@ exports[`<RestoreKeyBackupDialog /> should render 1`] = `
              class="mx_Dialog_buttons_row"
            >
              <button
+                class="cancel"
                data-testid="dialog-cancel-button"
                type="button"
              >
@@ -208,6 +208,7 @@ exports[`<SecurityRoomSettingsTab /> join rule warns when trying to make an encr
      class="mx_Dialog_buttons_row"
    >
      <button
+        class="cancel"
        data-testid="dialog-cancel-button"
        type="button"
      >