FIX: Adjust button styling when custom text is used (#45)

common/common.scss

@@ -74,7 +74,7 @@ $max-width: 600px;
     text-align: center;
   }
 
-  .btn.search-icon {
+  .btn.search-icon:not(.has-search-button-text) {
     position: absolute;
     z-index: 2;
     background: transparent;
@@ -91,6 +91,22 @@ $max-width: 600px;
       }
     }
   }
+  .btn.search-icon.has-search-button-text {
+    order: 2;
+    margin-left: 0.5em;
+    column-gap: 0.5em;
+    background-color: var(--tertiary);
+    color: var(--secondary);
+    &:hover {
+      background-color: var(--tertiary-hover);
+    }
+    .d-icon {
+      color: var(--secondary);
+    }
+    + .search-input #search-term[type="text"] {
+      padding-left: 0.5em;
+    }
+  }
 
   .search-input .btn.search-context {
     margin: 0;

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

@@ -108,18 +108,23 @@ export default apiInitializer("1.14.0", (api) => {
         this.state.showHeaderResults === true;
       let contents = [];
 
+      let buttonClass =
+        I18n.t(themePrefix("search_banner.search_button_text")) === ""
+          ? "btn search-icon"
+          : "btn search-icon has-search-button-text";
+
       if (formFactor === "widget") {
         contents.push(
           this.attach("link", {
             href: this.fullSearchUrl({ expanded: true }),
             contents: () => [
+              iconNode("search"),
               h(
                 "span",
                 I18n.t(themePrefix("search_banner.search_button_text"))
               ),
-              iconNode("search"),
             ],
-            className: "btn search-icon",
+            className: buttonClass,
             title: "search.open_advanced",
           })
         );