DEV: Refactor

common/common.scss

@@ -1,93 +1,4 @@
-@import "common/foundation/mixins";
-
-$max-width: 600px;
-
 .welcome-banner {
-  display: none;
-}
-
-.display-search-banner {
-  #main-outlet {
-    padding-top: 0;
-  }
-}
-
-.search-banner {
-  background-image: var(--custom-bg);
-
-  @if $tile-background_image == "true" {
-    background-size: auto;
-  } @else {
-    background-size: cover;
-    background-repeat: no-repeat;
-  }
-}
-
-// hide search icon from default search menu
-.search-menu.glimmer-search-menu .search-icon {
-  display: none;
-}
-
-.custom-search-banner-wrap {
-  box-sizing: border-box;
-  position: relative;
-  padding: 2.5em 0 3em;
-  margin: 1em auto;
-
-  @include breakpoint(tablet) {
-    padding: 1em 8px 1.25em;
-    margin-top: 0.5em;
-  }
-
-  > div {
-    margin: 0 auto;
-    max-width: $max-width;
-  }
-
-  .search-menu {
-    display: flex;
-    position: relative;
-
-    .search-menu-container {
-      width: 100%;
-      min-width: 0;
-    }
-  }
-
-  .menu-panel-results .menu-panel {
-    position: unset;
-    padding: 0;
-  }
-
-  .d-icon-search {
-    margin: 0;
-  }
-
-  .browser-search-tip {
-    display: none;
-  }
-
-  .search-input {
-    input.search-term__input {
-      min-width: 0;
-      flex: 1 1;
-    }
-  }
-
-  h1 {
-    font-size: var(--font-up-6);
-    line-height: $line-height-medium;
-
-    @include breakpoint(tablet) {
-      font-size: var(--font-up-4);
-    }
-  }
-
-  h1,
-  p {
-    text-align: center;
-  }
-
   .btn.search-icon:not(.has-search-button-text) {
     z-index: 2;
     background: transparent;
@@ -128,58 +39,20 @@ $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);
-    flex: none;
+    position: unset;
+    height: unset;
 
     &:hover {
       background-color: var(--tertiary-hover);
+      color: var(--secondary);
     }
 
     .d-icon {
       color: var(--secondary);
     }
   }
-
-  .results {
-    box-sizing: border-box;
-    background: var(--secondary);
-    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
-    position: absolute;
-    z-index: 9;
-    margin-left: auto;
-    margin-right: auto;
-    left: 0;
-    top: 2.75em;
-    right: 0;
-    padding: 0.5em;
-
-    @include breakpoint(mobile-extra-large) {
-      width: 100%;
-    }
-
-    ul,
-    ol {
-      list-style-type: none;
-      margin: 0;
-    }
-
-    .d-icon-search {
-      display: none;
-    }
-  }
-
-  .search-link .d-icon {
-    color: var(--primary-medium);
-  }
-
-  span.keyword {
-    color: var(--primary);
-  }
 }
-
-// these are add-on styles controlled by settings
-@import "special-styles";

javascripts/discourse/components/search-banner.hbs

@@ -1,17 +1,18 @@
 {{#if this.shouldDisplay}}
   <div
-    class="{{concat (theme-setting 'plugin_outlet') '-outlet'}} search-banner"
+    class="{{concat (theme-setting 'plugin_outlet') '-outlet'}}
+      search-banner welcome-banner"
   >
     <div
-      class="custom-search-banner"
+      class="custom-search-banner welcome-banner__inner-wrapper"
       {{did-insert this.didInsert}}
       {{will-destroy this.willDestroy}}
     >
-      <div class="wrap custom-search-banner-wrap">
+      <div class="custom-search-banner-wrap welcome-banner__wrap">
         <h1>{{html-safe (theme-i18n "search_banner.headline")}}</h1>
         <PluginOutlet @name="search-banner-below-headline" />
         <p>{{html-safe (theme-i18n "search_banner.subhead")}}</p>
-        <div class="search-menu">
+        <div class="search-menu welcome-banner__search-menu">
           {{#unless this.buttonText}}
             <SearchIcon />
           {{/unless}}