UX: banner headline should not be an H1 (#98)

Author: awesomerobot

common/common.scss

@@ -60,7 +60,11 @@
     }
   }
 
-  h1 {
+  .custom-search-banner-headline {
+    font-family: var(--heading-font-family);
+    font-size: var(--font-up-5);
+    font-weight: bold;
+    margin-bottom: 0.5rem;
     text-align: center;
   }
 

javascripts/discourse/components/search-banner.gjs

@@ -88,7 +88,9 @@ export default class SearchBanner extends Component {
           {{willDestroy this.willDestroy}}
         >
           <div class="wrap custom-search-banner-wrap welcome-banner__wrap">
-            <h1>{{htmlSafe (i18n (themePrefix "search_banner.headline"))}}</h1>
+            <div class="custom-search-banner-headline">
+              {{htmlSafe (i18n (themePrefix "search_banner.headline"))}}
+            </div>
             <PluginOutlet @name="search-banner-below-headline" />
             <p>{{htmlSafe (i18n (themePrefix "search_banner.subhead"))}}</p>
             <div class="search-menu welcome-banner__search-menu">

stylesheets/special-styles.scss

@@ -36,7 +36,7 @@
       width: auto;
     }
 
-    > h1,
+    > .custom-search-banner-headline,
     > p {
       display: none;
     }

test/acceptance/search-banner-test.js

@@ -25,7 +25,7 @@ acceptance("Discourse Advanced Search Banner", function (needs) {
     assert.dom(".custom-search-banner .results").exists();
 
     // select a element to simulate clicking outside the search banner
-    await click(".custom-search-banner h1");
+    await click(".custom-search-banner .custom-search-banner-headline");
     assert.dom(".custom-search-banner .results").doesNotExist();
   });