diff --git a/common/common.scss b/common/common.scss index 295ef6a..8c3d151 100644 --- a/common/common.scss +++ b/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; } } } diff --git a/javascripts/discourse/api-initializers/init-search-banner.js b/javascripts/discourse/api-initializers/init-search-banner.js index 461fd04..962dc23 100644 --- a/javascripts/discourse/api-initializers/init-search-banner.js +++ b/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", }) diff --git a/locales/en.yml b/locales/en.yml index 3e50af1..08ee1e3 100644 --- a/locales/en.yml +++ b/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: ""