A11Y: Use button in d-modal-cancel component (#17938)

Fixes issue under User profile > Preferences > Security > Recently Used
devices > Cog icon. And cleans up the "reply where" modal as well.

app/assets/javascripts/discourse/app/controllers/composer.js

@@ -912,8 +912,7 @@ export default Controller.extend({
         let buttons = [
           {
             label: I18n.t("composer.cancel"),
-            class: "d-modal-cancel",
+            class: "btn-flat btn-text btn-reply-where-cancel",
-            link: true,
           },
         ];
 
@@ -923,7 +922,7 @@ export default Controller.extend({
             "<br/><div class='topic-title overflow-ellipsis'>" +
             currentTopic.get("fancyTitle") +
             "</div>",
-          class: "btn btn-reply-here",
+          class: "btn-reply-here",
           callback: () => {
             composer.setProperties({ topic: currentTopic, post: null });
             this.save(true);

app/assets/javascripts/discourse/app/templates/components/d-modal-cancel.hbs

@@ -1 +1 @@
-<a href {{action this.close}} class="d-modal-cancel">{{i18n "cancel"}}</a>
+<DButton @class="btn-flat d-modal-cancel" @action={{action this.close}} @translatedLabel={{i18n "cancel"}} />

app/assets/stylesheets/common/base/modal.scss

@@ -286,37 +286,27 @@
     font-size: $font-up-2;
   }
 
-  .d-modal-cancel {
-    width: 100%;
-    margin: 0.5em 0;
-  }
-
   .btn {
     display: block;
     text-align: left;
-    font-size: $font-up-1;
-    line-height: $line-height-medium;
     margin-bottom: 0.75em;
-    font-weight: bold;
     overflow: hidden;
     width: 100%;
     &:first-of-type {
       margin-top: 0.25em;
     }
+    &.btn-reply-on-original,
+    &.btn-reply-here {
+      font-size: $font-up-1;
+      line-height: $line-height-medium;
+      font-weight: bold;
+    }
     .topic-title {
       font-weight: normal;
     }
   }
 }
 
-.d-modal-cancel {
-  margin-left: 1em;
-  color: var(--primary-medium);
-  &:hover {
-    color: var(--danger);
-  }
-}
-
 .delete-user-modal {
   .modal-footer {
     .btn {

app/assets/stylesheets/common/base/topic-admin-menu.scss

@@ -91,12 +91,6 @@
   }
 }
 
-.feature-topic-modal {
-  .d-modal-cancel {
-    margin-left: 0;
-  }
-}
-
 .desktop-view .feature-topic-modal {
   .pin-until {
     position: relative;