From 8c228316721da9f728790ed3cce4b77fc5760cdc Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Thu, 29 Feb 2024 05:47:07 -0500
Subject: [PATCH] UX: update appropriate `btn-flat` instances to
 `btn-transparent` (#25945)

With the adjustments of `btn-transparent` in https://github.com/discourse/discourse/pull/24666, there are more buttons that could use this class instead of `btn-flat`. This mostly relates to `x` close buttons, but also includes composer and chat toggles.

The primary difference between these styles is that `btn-transparent` never has a background, where `btn-flat` may have a hover or focus background.
---
 .../admin/addon/components/theme-upload-add.hbs          | 2 +-
 .../javascripts/admin/addon/components/themes-list.hbs   | 2 +-
 .../discourse/app/components/composer-container.hbs      | 2 +-
 .../app/components/composer-tip-close-button.hbs         | 2 +-
 .../discourse/app/components/composer-toggles.hbs        | 4 ++--
 .../discourse/app/components/d-lightbox/body.hbs         | 2 +-
 .../javascripts/discourse/app/components/d-modal.hbs     | 2 +-
 .../discourse/app/components/global-notice.hbs           | 2 +-
 .../app/components/notification-consent-banner.gjs       | 2 +-
 .../discourse/app/components/pwa-install-banner.hbs      | 2 +-
 .../discourse/app/components/sidebar/section-header.hbs  | 2 +-
 .../discourse/app/components/user-status-picker.hbs      | 2 +-
 .../discourse/app/raw-templates/flat-button.hbr          | 2 +-
 .../float-kit/addon/components/d-default-toast.gjs       | 2 +-
 app/assets/stylesheets/common/base/compose.scss          | 4 ----
 app/assets/stylesheets/common/base/sidebar-section.scss  | 4 ++++
 app/assets/stylesheets/common/components/buttons.scss    | 9 +--------
 .../common/components/user-status-picker.scss            | 4 ----
 .../javascripts/discourse/components/chat-notice.gjs     | 2 +-
 .../discourse/components/chat-retention-reminder.gjs     | 2 +-
 .../components/chat/navbar/close-drawer-button.gjs       | 2 +-
 .../components/chat/navbar/close-thread-button.gjs       | 2 +-
 .../components/chat/navbar/close-threads-button.gjs      | 2 +-
 .../components/chat/navbar/full-page-button.gjs          | 2 +-
 .../components/chat/navbar/open-drawer-button.gjs        | 2 +-
 .../components/chat/navbar/thread-settings-button.gjs    | 2 +-
 .../components/chat/navbar/toggle-drawer-button.gjs      | 2 +-
 .../components/chat/routes/channel-info-settings.gjs     | 8 ++++----
 plugins/chat/assets/stylesheets/common/chat-navbar.scss  | 3 +++
 29 files changed, 36 insertions(+), 44 deletions(-)

diff --git a/app/assets/javascripts/admin/addon/components/theme-upload-add.hbs b/app/assets/javascripts/admin/addon/components/theme-upload-add.hbs
index e53a861c0ce..e4d694eb94c 100644
--- a/app/assets/javascripts/admin/addon/components/theme-upload-add.hbs
+++ b/app/assets/javascripts/admin/addon/components/theme-upload-add.hbs
@@ -41,7 +41,7 @@
     <DButton
       @action={{@closeModal}}
       @label="cancel"
-      class="btn-flat d-modal-cancel"
+      class="btn-transparent d-modal-cancel"
     />
   </:footer>
 </DModal>
\ No newline at end of file
diff --git a/app/assets/javascripts/admin/addon/components/themes-list.hbs b/app/assets/javascripts/admin/addon/components/themes-list.hbs
index aac6dec9266..51d33899c58 100644
--- a/app/assets/javascripts/admin/addon/components/themes-list.hbs
+++ b/app/assets/javascripts/admin/addon/components/themes-list.hbs
@@ -65,7 +65,7 @@
                 />
               {{else}}
                 <DButton
-                  class="btn-flat select-inactive-mode"
+                  class="btn-transparent select-inactive-mode"
                   @action={{this.toggleInactiveMode}}
                 >
                   {{d-icon "list"}}
diff --git a/app/assets/javascripts/discourse/app/components/composer-container.hbs b/app/assets/javascripts/discourse/app/components/composer-container.hbs
index 97c3a2a2504..6947bf43082 100644
--- a/app/assets/javascripts/discourse/app/components/composer-container.hbs
+++ b/app/assets/javascripts/discourse/app/components/composer-container.hbs
@@ -401,7 +401,7 @@
               @translatedTitle={{this.composer.toggleText}}
               @icon="angle-double-left"
               class={{concat-class
-                "btn-flat btn-mini-toggle toggle-preview"
+                "btn-transparent btn-mini-toggle toggle-preview"
                 (unless this.composer.showPreview "active")
               }}
             />
diff --git a/app/assets/javascripts/discourse/app/components/composer-tip-close-button.hbs b/app/assets/javascripts/discourse/app/components/composer-tip-close-button.hbs
index b497710601f..0090d73f9d7 100644
--- a/app/assets/javascripts/discourse/app/components/composer-tip-close-button.hbs
+++ b/app/assets/javascripts/discourse/app/components/composer-tip-close-button.hbs
@@ -3,5 +3,5 @@
   @icon="times"
   @label="composer.esc"
   @ariaLabel="composer.esc_label"
-  class="btn-flat close"
+  class="btn-transparent close"
 />
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/composer-toggles.hbs b/app/assets/javascripts/discourse/app/components/composer-toggles.hbs
index 0caaa73e3f4..64599357350 100644
--- a/app/assets/javascripts/discourse/app/components/composer-toggles.hbs
+++ b/app/assets/javascripts/discourse/app/components/composer-toggles.hbs
@@ -18,7 +18,7 @@
       @icon={{this.fullscreenIcon}}
       @action={{this.toggleFullscreen}}
       @title={{this.fullscreenTitle}}
-      class="btn-flat toggle-fullscreen btn-mini-toggle"
+      class="btn-transparent toggle-fullscreen btn-mini-toggle"
     />
   {{/if}}
 
@@ -26,6 +26,6 @@
     @icon={{this.toggleIcon}}
     @action={{this.toggleComposer}}
     @title={{this.toggleTitle}}
-    class="btn-flat toggler toggle-minimize btn-mini-toggle"
+    class="btn-transparent toggler toggle-minimize btn-mini-toggle"
   />
 </div>
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/d-lightbox/body.hbs b/app/assets/javascripts/discourse/app/components/d-lightbox/body.hbs
index ac63518023e..d7fbb213f91 100644
--- a/app/assets/javascripts/discourse/app/components/d-lightbox/body.hbs
+++ b/app/assets/javascripts/discourse/app/components/d-lightbox/body.hbs
@@ -11,7 +11,7 @@
       @title="experimental_lightbox.buttons.previous"
       @icon={{@previousButtonIcon}}
       @ariaHidden="true"
-      class="d-lightbox__previous-button btn-flat"
+      class="d-lightbox__previous-button btn-transparent"
     />
   {{/if}}
   {{#if @isLoading}}
diff --git a/app/assets/javascripts/discourse/app/components/d-modal.hbs b/app/assets/javascripts/discourse/app/components/d-modal.hbs
index e886bfbace1..ac5231f4a17 100644
--- a/app/assets/javascripts/discourse/app/components/d-modal.hbs
+++ b/app/assets/javascripts/discourse/app/components/d-modal.hbs
@@ -57,7 +57,7 @@
               @icon="times"
               @action={{this.handleCloseButton}}
               @title="modal.close"
-              class="btn-flat modal-close"
+              class="btn-transparent modal-close"
             />
           {{/if}}
         </div>
diff --git a/app/assets/javascripts/discourse/app/components/global-notice.hbs b/app/assets/javascripts/discourse/app/components/global-notice.hbs
index 7599ffbc052..1555b161459 100644
--- a/app/assets/javascripts/discourse/app/components/global-notice.hbs
+++ b/app/assets/javascripts/discourse/app/components/global-notice.hbs
@@ -16,7 +16,7 @@
             <DButton
               @icon="times"
               @action={{fn this.dismissNotice notice}}
-              class="btn-flat close"
+              class="btn-transparent close"
             />
           {{/if}}
         </div>
diff --git a/app/assets/javascripts/discourse/app/components/notification-consent-banner.gjs b/app/assets/javascripts/discourse/app/components/notification-consent-banner.gjs
index 7feb12d84d7..ad2f6cda4e5 100644
--- a/app/assets/javascripts/discourse/app/components/notification-consent-banner.gjs
+++ b/app/assets/javascripts/discourse/app/components/notification-consent-banner.gjs
@@ -70,7 +70,7 @@ export default class NotificationConsentBanner extends Component {
             @icon="times"
             @action={{this.dismiss}}
             @title="banner.close"
-            class="btn-flat close"
+            class="btn-transparent close"
           />
         </div>
       </div>
diff --git a/app/assets/javascripts/discourse/app/components/pwa-install-banner.hbs b/app/assets/javascripts/discourse/app/components/pwa-install-banner.hbs
index 5fa446e697a..ba5ed5dfb9f 100644
--- a/app/assets/javascripts/discourse/app/components/pwa-install-banner.hbs
+++ b/app/assets/javascripts/discourse/app/components/pwa-install-banner.hbs
@@ -12,7 +12,7 @@
         @icon="times"
         @action={{action "dismiss"}}
         @title="banner.close"
-        class="btn-flat close"
+        class="btn-transparent close"
       />
     </div>
   </div>
diff --git a/app/assets/javascripts/discourse/app/components/sidebar/section-header.hbs b/app/assets/javascripts/discourse/app/components/sidebar/section-header.hbs
index 74c5bbcdeec..bd33e0a25f3 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar/section-header.hbs
+++ b/app/assets/javascripts/discourse/app/components/sidebar/section-header.hbs
@@ -4,7 +4,7 @@
     @action={{@toggleSectionDisplay}}
     aria-controls={{@sidebarSectionContentID}}
     aria-expanded={{if @isExpanded "true" "false"}}
-    class="sidebar-section-header sidebar-section-header-collapsable btn-flat"
+    class="sidebar-section-header sidebar-section-header-collapsable btn-transparent"
   >
     {{yield}}
   </DButton>
diff --git a/app/assets/javascripts/discourse/app/components/user-status-picker.hbs b/app/assets/javascripts/discourse/app/components/user-status-picker.hbs
index 1cbea2c9cfe..0a526547e08 100644
--- a/app/assets/javascripts/discourse/app/components/user-status-picker.hbs
+++ b/app/assets/javascripts/discourse/app/components/user-status-picker.hbs
@@ -5,7 +5,7 @@
   >
     <button
       type="button"
-      class="btn-emoji btn-flat"
+      class="btn-emoji btn-transparent"
       onclick={{this.toggleEmojiPicker}}
       {{on "focus" this.focus}}
       {{on "blur" this.blur}}
diff --git a/app/assets/javascripts/discourse/app/raw-templates/flat-button.hbr b/app/assets/javascripts/discourse/app/raw-templates/flat-button.hbr
index 9b5f10eebc3..b74ca394e20 100644
--- a/app/assets/javascripts/discourse/app/raw-templates/flat-button.hbr
+++ b/app/assets/javascripts/discourse/app/raw-templates/flat-button.hbr
@@ -1,3 +1,3 @@
-<button class='btn-flat {{class}}' title='{{i18n "topics.bulk.toggle"}}'>
+<button class='btn-transparent {{class}}' title='{{i18n "topics.bulk.toggle"}}'>
   {{d-icon icon}}
 </button>
diff --git a/app/assets/javascripts/float-kit/addon/components/d-default-toast.gjs b/app/assets/javascripts/float-kit/addon/components/d-default-toast.gjs
index f1fe7dfcc4d..161e4bd09ec 100644
--- a/app/assets/javascripts/float-kit/addon/components/d-default-toast.gjs
+++ b/app/assets/javascripts/float-kit/addon/components/d-default-toast.gjs
@@ -48,7 +48,7 @@ const DDefaultToast = <template>
       {{/if}}
     </div>
     <div class="fk-d-default-toast__close-container">
-      <DButton class="btn-flat" @icon="times" @action={{@close}} />
+      <DButton class="btn-transparent" @icon="times" @action={{@close}} />
     </div>
   </div>
 </template>;
diff --git a/app/assets/stylesheets/common/base/compose.scss b/app/assets/stylesheets/common/base/compose.scss
index 8d5d1345c22..74666ae92b9 100644
--- a/app/assets/stylesheets/common/base/compose.scss
+++ b/app/assets/stylesheets/common/base/compose.scss
@@ -176,10 +176,6 @@ html.composer-open {
       display: flex;
       gap: 8px;
       margin-left: 8px;
-
-      .d-icon {
-        color: var(--primary-medium);
-      }
     }
   }
 
diff --git a/app/assets/stylesheets/common/base/sidebar-section.scss b/app/assets/stylesheets/common/base/sidebar-section.scss
index f886c8f1f69..d476c2b5759 100644
--- a/app/assets/stylesheets/common/base/sidebar-section.scss
+++ b/app/assets/stylesheets/common/base/sidebar-section.scss
@@ -82,6 +82,10 @@
     &.sidebar-section-header-collapsable {
       justify-content: flex-start;
 
+      &:hover {
+        color: var(--primary);
+      }
+
       &:focus {
         background: transparent;
       }
diff --git a/app/assets/stylesheets/common/components/buttons.scss b/app/assets/stylesheets/common/components/buttons.scss
index a30b39acb98..791167ff6b0 100644
--- a/app/assets/stylesheets/common/components/buttons.scss
+++ b/app/assets/stylesheets/common/components/buttons.scss
@@ -452,16 +452,9 @@
   border-radius: var(--d-border-radius);
   padding: 0.4em 0.467em;
   .d-icon {
-    color: var(--primary-high);
+    color: var(--primary-medium);
   }
   @include hover {
-    background: transparent;
-    .d-icon {
-      color: var(--primary);
-    }
-  }
-  &:focus {
-    background: var(--primary-low);
     .d-icon {
       color: var(--primary);
     }
diff --git a/app/assets/stylesheets/common/components/user-status-picker.scss b/app/assets/stylesheets/common/components/user-status-picker.scss
index 3723ece1c4f..05819079ae5 100644
--- a/app/assets/stylesheets/common/components/user-status-picker.scss
+++ b/app/assets/stylesheets/common/components/user-status-picker.scss
@@ -12,10 +12,6 @@
       margin: 3px;
       width: 2.3em;
       text-align: center;
-
-      .svg-icon {
-        color: var(--primary-high);
-      }
     }
 
     .user-status-description {
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-notice.gjs b/plugins/chat/assets/javascripts/discourse/components/chat-notice.gjs
index 4601eb0a0e5..1df8bff4440 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-notice.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-notice.gjs
@@ -38,7 +38,7 @@ export default class ChatNotices extends Component {
       <DButton
         @icon="times"
         @action={{this.clearNotice}}
-        class="btn-flat chat-notices__notice__clear"
+        class="btn-transparent chat-notices__notice__clear"
       />
     </div>
   </template>
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-retention-reminder.gjs b/plugins/chat/assets/javascripts/discourse/components/chat-retention-reminder.gjs
index 362f283891c..6a00593001e 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-retention-reminder.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-retention-reminder.gjs
@@ -41,7 +41,7 @@ export default class ChatRetentionReminder extends Component {
         <DButton
           @action={{this.dismiss}}
           @icon="times"
-          class="btn no-text btn-icon btn-flat no-text dismiss-btn"
+          class="no-text btn-icon btn-transparent dismiss-btn"
         />
       </div>
     {{/if}}
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/navbar/close-drawer-button.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/navbar/close-drawer-button.gjs
index f8a53fbe1b4..e3490007f59 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat/navbar/close-drawer-button.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/navbar/close-drawer-button.gjs
@@ -18,7 +18,7 @@ export default class ChatNavbarCloseDrawerButton extends Component {
       @icon="times"
       @action={{this.closeDrawer}}
       @title="chat.close"
-      class="btn-flat no-text c-navbar__close-drawer-button"
+      class="btn-transparent no-text c-navbar__close-drawer-button"
     />
   </template>
 }
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/navbar/close-thread-button.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/navbar/close-thread-button.gjs
index 809ea1e78bf..4e07f2d933d 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat/navbar/close-thread-button.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/navbar/close-thread-button.gjs
@@ -10,7 +10,7 @@ export default class ChatNavbarCloseThreadButton extends Component {
   <template>
     {{#if this.site.desktopView}}
       <LinkTo
-        class="c-navbar__close-thread-button btn-flat btn btn-icon no-text"
+        class="c-navbar__close-thread-button btn-transparent btn btn-icon no-text"
         @route="chat.channel"
         @models={{@thread.channel.routeModels}}
         title={{i18n "chat.thread.close"}}
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/navbar/close-threads-button.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/navbar/close-threads-button.gjs
index 24d2d5462bb..6ed1f61262a 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat/navbar/close-threads-button.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/navbar/close-threads-button.gjs
@@ -12,7 +12,7 @@ export default class ChatNavbarCloseThreadsButton extends Component {
   <template>
     {{#if this.site.desktopView}}
       <LinkTo
-        class="c-navbar__close-threads-button btn-flat btn btn-icon no-text"
+        class="c-navbar__close-threads-button btn-transparent btn btn-icon no-text"
         @route="chat.channel"
         @models={{@channel.routeModels}}
         title={{this.closeButtonTitle}}
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/navbar/full-page-button.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/navbar/full-page-button.gjs
index c1f1becadb3..068a813ccc9 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat/navbar/full-page-button.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/navbar/full-page-button.gjs
@@ -24,7 +24,7 @@ export default class ChatNavbarFullPageButton extends Component {
     {{#if this.chatStateManager.isDrawerExpanded}}
       <DButton
         @icon="discourse-expand"
-        class="btn-flat no-text c-navbar__full-page-button"
+        class="btn-transparent no-text c-navbar__full-page-button"
         @title="chat.open_full_page"
         @action={{this.openInFullPage}}
       />
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/navbar/open-drawer-button.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/navbar/open-drawer-button.gjs
index 442a14cc550..c9dd9b59c9c 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat/navbar/open-drawer-button.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/navbar/open-drawer-button.gjs
@@ -22,7 +22,7 @@ export default class ChatNavbarOpenDrawerButton extends Component {
       <DButton
         @icon="discourse-compress"
         @title="chat.close_full_page"
-        class="c-navbar__open-drawer-button btn-flat"
+        class="c-navbar__open-drawer-button btn-transparent"
         @action={{this.openDrawer}}
       />
     {{/if}}
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/navbar/thread-settings-button.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/navbar/thread-settings-button.gjs
index fdd42f03841..2214d2d6c40 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat/navbar/thread-settings-button.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/navbar/thread-settings-button.gjs
@@ -30,7 +30,7 @@ export default class ChatNavbarThreadSettingsButton extends Component {
         @action={{this.openThreadSettings}}
         @icon="cog"
         @title="chat.thread.settings"
-        class="btn-flat c-navbar__thread-settings-button"
+        class="btn-transparent c-navbar__thread-settings-button"
       />
     {{/if}}
   </template>
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/navbar/toggle-drawer-button.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/navbar/toggle-drawer-button.gjs
index 7f535981b8e..10ed4908b95 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat/navbar/toggle-drawer-button.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/navbar/toggle-drawer-button.gjs
@@ -19,7 +19,7 @@ export default class ChatNavbarToggleDrawerButton extends Component {
         "chat.collapse"
         "chat.expand"
       }}
-      class="btn-flat no-text c-navbar__toggle-drawer-button"
+      class="btn-transparent no-text c-navbar__toggle-drawer-button"
     />
   </template>
 }
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/routes/channel-info-settings.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/routes/channel-info-settings.gjs
index 6765a1a1859..5c248646754 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat/routes/channel-info-settings.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/routes/channel-info-settings.gjs
@@ -537,7 +537,7 @@ export default class ChatRouteChannelInfoSettings extends Component {
                       @action={{this.onArchiveChannel}}
                       @label="chat.channel_settings.archive_channel"
                       @icon="archive"
-                      class="archive-btn chat-form__btn btn-flat"
+                      class="archive-btn chat-form__btn btn-transparent"
                     />
                   </:action>
                 </section.row>
@@ -550,14 +550,14 @@ export default class ChatRouteChannelInfoSettings extends Component {
                       @action={{this.onToggleChannelState}}
                       @label="chat.channel_settings.close_channel"
                       @icon="lock"
-                      class="close-btn chat-form__btn btn-flat"
+                      class="close-btn chat-form__btn btn-transparent"
                     />
                   {{else}}
                     <DButton
                       @action={{this.onToggleChannelState}}
                       @label="chat.channel_settings.open_channel"
                       @icon="unlock"
-                      class="open-btn chat-form__btn btn-flat"
+                      class="open-btn chat-form__btn btn-transparent"
                     />
                   {{/if}}
                 </:action>
@@ -569,7 +569,7 @@ export default class ChatRouteChannelInfoSettings extends Component {
                     @action={{this.onDeleteChannel}}
                     @label="chat.channel_settings.delete_channel"
                     @icon="trash-alt"
-                    class="delete-btn chat-form__btn btn-flat"
+                    class="delete-btn chat-form__btn btn-transparent"
                   />
                 </:action>
               </section.row>
diff --git a/plugins/chat/assets/stylesheets/common/chat-navbar.scss b/plugins/chat/assets/stylesheets/common/chat-navbar.scss
index 0bbaeb0ea3d..7b3b1c9660b 100644
--- a/plugins/chat/assets/stylesheets/common/chat-navbar.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-navbar.scss
@@ -99,6 +99,9 @@
   display: flex;
   align-items: center;
   height: var(--chat-header-offset);
+  .d-icon {
+    color: var(--primary-low-mid);
+  }
 }
 
 .c-navbar__back-button ~ .c-navbar__title {