fix search titles

client/src/components/templates/Route.module.scss

@@ -18,12 +18,3 @@
     margin-top: $spacer / 2;
     font-size: $font-size-large;
 }
-
-.titleReverse {
-    composes: title;
-    color: $brand-grey-light;
-
-    span {
-        color: $brand-grey-dark;
-    }
-}

client/src/components/templates/Route.tsx

@@ -7,14 +7,12 @@ import meta from '../../data/meta.json'
 const Route = ({
     title,
     description,
-    titleReverse,
     wide,
     children,
     className
 }: {
     title: string
     description?: string
-    titleReverse?: boolean
     children: any
     wide?: boolean
     className?: string
@@ -29,13 +27,7 @@ const Route = ({
         <Content wide={wide}>
             <article>
                 <header className={styles.header}>
-                    <h1
+                    <h1 className={styles.title}>{title}</h1>
-                        className={
-                            titleReverse ? styles.titleReverse : styles.title
-                        }
-                    >
-                        {title}
-                    </h1>
                     {description && (
                         <p
                             className={styles.description}

client/src/routes/Search.module.scss

@@ -1,5 +1,16 @@
 @import '../styles/variables';
 
+.resultsTitle {
+    color: $brand-grey-light;
+    font-size: $font-size-h3;
+    margin-top: -($spacer / 2);
+    margin-bottom: $spacer;
+
+    span {
+        color: $brand-grey-dark;
+    }
+}
+
 .results {
     display: grid;
     grid-template-columns: 1fr;

client/src/routes/Search.tsx

@@ -102,13 +102,17 @@ export default class Search extends PureComponent<SearchProps, SearchState> {
         const { totalResults, totalPages, currentPage } = this.state
 
         return (
-            <Route
+            <Route title="Search" wide>
-                title={`${
+                {totalResults > 0 && (
-                    totalResults > 0 ? totalResults : ''
+                    <h2
-                } Results for <span>${this.searchTerm}</span>`}
+                        className={styles.resultsTitle}
-                titleReverse
+                        dangerouslySetInnerHTML={{
-                wide
+                            __html: `${totalResults} results for <span>${
-            >
+                                this.searchTerm
+                            }</span>`
+                        }}
+                    />
+                )}
                 {this.renderResults()}
 
                 <Pagination