UX: add optional search button text (#33)

* UX: add optional search button text

* include i18n

common/common.scss

@@ -72,20 +72,24 @@ $max-width: 600px;
     text-align: center;
   }
 
-  .search-icon {
+  .btn.search-icon {
     position: absolute;
     z-index: 2;
     order: 2;
     right: 0;
     background: transparent;
+    padding-top: 0.6em;
+    line-height: 1;
+    color: var(--primary-high);
     .d-icon {
-      margin: 0;
+      margin: 0 0 0 0.33em;
     }
     .discourse-no-touch & {
       &:hover {
         background: transparent;
+        color: var(--primary);
         .d-icon {
-          color: var(--primary-high);
+          color: currentColor;
         }
       }
     }

javascripts/discourse/api-initializers/init-search-banner.js

@@ -1,6 +1,8 @@
 import { apiInitializer } from "discourse/lib/api";
 import { logSearchLinkClick } from "discourse/lib/search";
 import { iconNode } from "discourse-common/lib/icon-library";
+import { h } from "virtual-dom";
+import I18n from "I18n";
 
 export default apiInitializer("0.8", (api) => {
   const enableConnectorName = settings.plugin_outlet;
@@ -114,7 +116,13 @@ export default apiInitializer("0.8", (api) => {
         contents.push(
           this.attach("link", {
             href: this.fullSearchUrl({ expanded: true }),
-            contents: () => iconNode("search"),
+            contents: () => [
+              h(
+                "span",
+                I18n.t(themePrefix("search_banner.search_button_text"))
+              ),
+              iconNode("search"),
+            ],
             className: "btn search-icon",
             title: "search.open_advanced",
           })

locales/en.yml

@@ -2,3 +2,4 @@ en:
   search_banner:
     headline: "Welcome to our community"
     subhead: "We're happy to have you here. If you need help, please search before you post."
+    search_button_text: ""