UX: adjustments for experimental bulk select menu (#26474)

app/assets/javascripts/discourse/app/raw-views/topic-bulk-select-dropdown.gjs

@@ -1,5 +1,6 @@
 import EmberObject from "@ember/object";
 import rawRenderGlimmer from "discourse/lib/raw-render-glimmer";
+import i18n from "discourse-common/helpers/i18n";
 import BulkSelectTopicsDropdown from "select-kit/components/bulk-select-topics-dropdown";
 
 export default class extends EmberObject {
@@ -12,7 +13,9 @@ export default class extends EmberObject {
       this,
       "div.bulk-select-topics-dropdown",
       <template>
-        <span>{{@data.selectedCount}} selected</span>
+        <span class="bulk-select-topic-dropdown__count">
+          {{i18n "topics.bulk.selected_count" count=@data.selectedCount}}
+        </span>
         <BulkSelectTopicsDropdown
           @bulkSelectHelper={{@data.bulkSelectHelper}}
         />

app/assets/stylesheets/common/base/_topic-list.scss

@@ -172,6 +172,20 @@
   z-index: 2;
 }
 
+.bulk-select-topics-dropdown {
+  .select-kit.single-select.dropdown-select-box .select-kit-row {
+    .texts .name {
+      font-weight: normal;
+    }
+    .icons {
+      font-size: var(--font-down-2);
+      margin-right: 0.75em;
+      position: relative;
+      top: 0.15em;
+    }
+  }
+}
+
 .topic-list {
   width: 100%;
   border-collapse: collapse;

app/assets/stylesheets/mobile/topic-list.scss

@@ -522,7 +522,7 @@ td .main-link {
       }
       &.default {
         display: flex;
-        span:not(.bulk-select-topics) {
+        .bulk-select-topic-dropdown__count {
           display: none;
         }
       }
@@ -536,9 +536,12 @@ td .main-link {
 
 .bulk-select-topics {
   display: flex;
+  flex-wrap: wrap;
   padding-left: 0.85em;
-  .btn {
+  gap: 0.5em;
-    margin-right: 0.5em;
+  font-size: var(--font-down-1);
+  .select-kit-collection {
+    font-size: var(--font-up-1);
   }
 }
 

config/locales/client.en.yml

@@ -2967,6 +2967,7 @@ en:
         selected:
           one: "You have selected <b>%{count}</b> topic."
           other: "You have selected <b>%{count}</b> topics."
+        selected_count: "%{count} selected"
         change_tags: "Replace Tags"
         append_tags: "Append Tags"
         choose_new_tags: "Choose new tags for these topics:"