From b930f4886aca4e7440e06a618a4a55aa4ac04913 Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Mon, 15 Aug 2022 15:06:03 -0400
Subject: [PATCH] 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.
---
 .../templates/logs/screened-ip-addresses.hbs  |  4 +--
 .../stylesheets/common/admin/staff_logs.scss  |  3 ---
 .../common/components/buttons.scss            | 25 +++++++++++++++++++
 .../discourse-local-dates-create-form.hbs     |  7 +++---
 .../common/discourse-local-dates.scss         |  8 ------
 .../templates/styleguide/atoms/02-buttons.hbs | 12 +++++++++
 6 files changed, 42 insertions(+), 17 deletions(-)

diff --git a/app/assets/javascripts/admin/addon/templates/logs/screened-ip-addresses.hbs b/app/assets/javascripts/admin/addon/templates/logs/screened-ip-addresses.hbs
index 56af8c935f3..63489dcdee9 100644
--- a/app/assets/javascripts/admin/addon/templates/logs/screened-ip-addresses.hbs
+++ b/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" />
diff --git a/app/assets/stylesheets/common/admin/staff_logs.scss b/app/assets/stylesheets/common/admin/staff_logs.scss
index c5cb456c863..3f2b48aa06a 100644
--- a/app/assets/stylesheets/common/admin/staff_logs.scss
+++ b/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;
-    }
   }
 }
 
diff --git a/app/assets/stylesheets/common/components/buttons.scss b/app/assets/stylesheets/common/components/buttons.scss
index 18d61d1c2e8..1725ba2cc9a 100644
--- a/app/assets/stylesheets/common/components/buttons.scss
+++ b/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);
diff --git a/plugins/discourse-local-dates/assets/javascripts/discourse/templates/components/discourse-local-dates-create-form.hbs b/plugins/discourse-local-dates/assets/javascripts/discourse/templates/components/discourse-local-dates-create-form.hbs
index 10c56ff5e41..390e4ece951 100644
--- a/plugins/discourse-local-dates/assets/javascripts/discourse/templates/components/discourse-local-dates-create-form.hbs
+++ b/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"
diff --git a/plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss b/plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss
index f2c98bf1607..34fd4dabdc1 100644
--- a/plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss
+++ b/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;
   }
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/02-buttons.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/02-buttons.hbs
index 258d7aa24cb..64408ccfd97 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/02-buttons.hbs
+++ b/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>