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.

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>