From 585c2b9ed3ac6fe6cd49cc2169e48ac1eb330202 Mon Sep 17 00:00:00 2001
From: Jordan Vidrine <30537603+jordanvidrine@users.noreply.github.com>
Date: Mon, 3 Feb 2025 16:24:53 -0600
Subject: [PATCH] UX: Replace href cancel with DButton (#31138)

---
 .../app/components/composer-container.hbs     | 32 ++++++++-----------
 .../tests/acceptance/composer-test.js         |  4 +--
 .../stylesheets/common/base/compose.scss      |  8 ++++-
 .../common/components/buttons.scss            |  4 +--
 app/assets/stylesheets/mobile/compose.scss    |  3 +-
 5 files changed, 26 insertions(+), 25 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/composer-container.hbs b/app/assets/javascripts/discourse/app/components/composer-container.hbs
index db81de3f0ef..ca0002889a1 100644
--- a/app/assets/javascripts/discourse/app/components/composer-container.hbs
+++ b/app/assets/javascripts/discourse/app/components/composer-container.hbs
@@ -239,25 +239,21 @@
             />
 
             {{#if this.site.mobileView}}
-              <a
-                href
-                {{on "click" this.composer.cancel}}
-                title={{i18n "cancel"}}
-                class="cancel"
-              >
-                {{#if this.composer.canEdit}}
-                  {{d-icon "xmark"}}
-                {{else}}
-                  {{d-icon "trash-can"}}
-                {{/if}}
-              </a>
+              <DButton
+                @action={{this.composer.cancel}}
+                class="cancel btn-transparent"
+                @icon={{if this.composer.canEdit "xmark" "trash-can"}}
+                @preventFocus={{true}}
+                @title="close"
+              />
             {{else}}
-              <a
-                href
-                {{on "click" this.composer.cancel}}
-                class="cancel"
-                role="button"
-              >{{i18n "close"}}</a>
+              <DButton
+                @action={{this.composer.cancel}}
+                class="cancel btn-transparent"
+                @preventFocus={{true}}
+                @title="close"
+                @label="close"
+              />
             {{/if}}
 
             {{#if this.site.mobileView}}
diff --git a/app/assets/javascripts/discourse/tests/acceptance/composer-test.js b/app/assets/javascripts/discourse/tests/acceptance/composer-test.js
index 6880c6fadcc..f932f38498f 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/composer-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/composer-test.js
@@ -214,7 +214,7 @@ acceptance("Composer", function (needs) {
         "supports keyboard shortcuts"
       );
 
-    await click("#reply-control a.cancel");
+    await click("#reply-control button.cancel");
     assert.dom(".d-modal").exists("pops up a confirmation dialog");
 
     await click(".d-modal__footer .discard-draft");
@@ -776,7 +776,7 @@ acceptance("Composer", function (needs) {
     await visit("/t/topic-with-whisper/960");
 
     await click(".topic-post:nth-of-type(3) button.reply");
-    await click("#reply-control .save-or-cancel a.cancel");
+    await click("#reply-control .save-or-cancel button.cancel");
     await click(".topic-footer-main-buttons button.create");
     await click(".reply-details summary div");
     assert
diff --git a/app/assets/stylesheets/common/base/compose.scss b/app/assets/stylesheets/common/base/compose.scss
index b306dd70bb8..70a10f82736 100644
--- a/app/assets/stylesheets/common/base/compose.scss
+++ b/app/assets/stylesheets/common/base/compose.scss
@@ -387,16 +387,22 @@ html.composer-open {
     .cancel {
       align-items: center;
       display: flex;
-      margin-left: 1.25em;
+      margin-left: 1em;
       line-height: normal;
       color: var(--primary-high);
       transition: color 250ms;
+      padding: 0;
 
       &:hover,
       &:focus {
         outline: none;
         color: var(--danger);
       }
+
+      &:active {
+        background-color: transparent;
+        background-image: none;
+      }
     }
 
     .preview-template {
diff --git a/app/assets/stylesheets/common/components/buttons.scss b/app/assets/stylesheets/common/components/buttons.scss
index 060bed70f95..8373fe2961b 100644
--- a/app/assets/stylesheets/common/components/buttons.scss
+++ b/app/assets/stylesheets/common/components/buttons.scss
@@ -435,8 +435,8 @@
 }
 
 .btn-transparent {
-  &,
-  &.btn-default {
+  &.btn-default,
+  &.btn-text {
     background: transparent;
     border: 0;
     color: var(--primary);
diff --git a/app/assets/stylesheets/mobile/compose.scss b/app/assets/stylesheets/mobile/compose.scss
index 0bee0087b57..df7c74f675c 100644
--- a/app/assets/stylesheets/mobile/compose.scss
+++ b/app/assets/stylesheets/mobile/compose.scss
@@ -94,10 +94,9 @@
         margin-left: 6px;
       }
 
-      .cancel {
+      .cancel .d-icon {
         font-size: 1.4em;
         color: var(--primary-low-mid);
-        margin-left: 0.6em;
         padding: 3px 6px;
       }
     }