UX: Add flat text button styles and use in date/time cancel modal (#17892)

Also fixes an A11Y issue with the date/time cancel button.

app/assets/javascripts/admin/addon/templates/logs/screened-ip-addresses.hbs

@@ -63,9 +63,7 @@
             <td class="col actions">
               {{#if item.editing}}
                 <DButton @class="btn-default" @action={{action "save"}} @actionParam={{item}} @label="admin.logs.save" />
-                <a href {{action "cancel" item}} class="cancel-action">
-                  {{i18n "cancel"}}
-                </a>
+                <DButton @class="btn-flat" @action={{action "cancel" item}} @translatedLabel={{i18n "cancel"}} />
               {{else}}
                 <DButton @class="btn-default btn-danger" @action={{action "destroy"}} @actionParam={{item}} @icon="far-trash-alt" />
                 <DButton @class="btn-default" @action={{action "edit"}} @actionParam={{item}} @icon="pencil-alt" />

app/assets/stylesheets/common/admin/staff_logs.scss

@@ -193,9 +193,6 @@ table.screened-ip-addresses {
   }
   td.actions {
     text-align: right;
-    .cancel-action {
-      margin-left: 0.5em;
-    }
   }
 }
 

app/assets/stylesheets/common/components/buttons.scss

@@ -287,7 +287,32 @@
       }
     }
   }
+  &.btn-text {
+    color: var(--tertiary);
+    &[disabled] {
+      &,
+      &:hover,
+      &.btn-hover,
+      &:focus {
+        color: var(--primary);
+      }
+    }
+    &:not([disabled]) {
+      &:hover,
+      &.btn-hover,
+      &:focus {
+        color: var(--tertiary-hover);
+      }
 
+      &:active,
+      &.btn-active {
+        @include linear-gradient(
+          var(--primary-low-mid) 0%,
+          var(--primary-very-low) 100%
+        );
+      }
+    }
+  }
   &:focus {
     outline: none;
     background: var(--primary-low);

plugins/discourse-local-dates/assets/javascripts/discourse/templates/components/discourse-local-dates-create-form.hbs

@@ -156,9 +156,10 @@
       @label="discourse_local_dates.create.form.insert" />
   {{/if}}
 
-  <a class="cancel-action" href {{action "cancel"}}>
-    {{i18n "cancel"}}
-  </a>
+  <DButton
+    @class="btn-flat"
+    @action={{action "cancel"}}
+    @translatedLabel={{i18n "cancel"}} />
 
   <DButton
     @class="btn-default advanced-mode-btn"

plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss

@@ -58,14 +58,6 @@ div[data-tippy-root] {
     content: none;
   }
 
-  .cancel-action {
-    margin: 0 5px 5px 0;
-  }
-
-  .btn + .cancel-action {
-    margin-left: 1em;
-  }
-
   .advanced-mode-btn {
     margin-left: auto;
   }

plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/02-buttons.hbs

@@ -69,3 +69,15 @@
     <FlatButton @icon="trash-alt" @disabled={{bs.disabled}} @translatedTitle={{bs.title}} />
   {{/each}}
 </StyleguideExample>
+
+<StyleguideExample @title="dbutton btn-flat btn-text - sizes (large, default, small)">
+  {{#each this.dummy.buttonSizes as |bs|}}
+    <DButton @class={{concat "btn-flat " bs.class}} @disabled={{bs.disabled}} @translatedLabel={{bs.text}} />
+  {{/each}}
+</StyleguideExample>
+
+<StyleguideExample @title="dbutton btn-flat btn-text - states">
+  {{#each this.dummy.buttonStates as |bs|}}
+    <DButton @class={{concat "btn-flat " bs.class}} @disabled={{bs.disabled}} @translatedLabel={{bs.text}} />
+  {{/each}}
+</StyleguideExample>