UX: Replace href cancel with DButton (#31138)

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"}}
+              <DButton
+                @action={{this.composer.cancel}}
+                class="cancel btn-transparent"
+                @icon={{if this.composer.canEdit "xmark" "trash-can"}}
+                @preventFocus={{true}}
+                @title="close"
+              />
             {{else}}
-                  {{d-icon "trash-can"}}
-                {{/if}}
-              </a>
-            {{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}}

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

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 {

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);

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;
       }
     }