From 1cb3502ff3ec3e66fea1c6ca61fe023d5dcb24b6 Mon Sep 17 00:00:00 2001
From: Adrien Young <60076088+adriencyberspace@users.noreply.github.com>
Date: Thu, 14 Nov 2024 09:14:30 -0800
Subject: [PATCH] Our415 28 Search experience header (#267)

* fix algolia logo

* search experience header color

* remove ternary

* Header rename to BrowseSubheader
---
 app/Router.tsx                                      |  2 +-
 .../SecondaryNavigationWrapper.module.scss          | 13 ++++++++++---
 .../navigation/SecondaryNavigationWrapper.tsx       |  6 ++++--
 ...ader.module.scss => BrowseSubheader.module.scss} |  0
 .../Header/{Header.tsx => BrowseSubheader.tsx}      |  8 +++-----
 .../search/Pagination/ResultsPagination.module.scss |  9 +++++++++
 .../ServiceDiscoveryResults.tsx                     |  4 ++--
 7 files changed, 29 insertions(+), 13 deletions(-)
 rename app/components/search/Header/{Header.module.scss => BrowseSubheader.module.scss} (100%)
 rename app/components/search/Header/{Header.tsx => BrowseSubheader.tsx} (86%)

diff --git a/app/Router.tsx b/app/Router.tsx
index 52695ceb8..c357150ff 100644
--- a/app/Router.tsx
+++ b/app/Router.tsx
@@ -40,7 +40,7 @@ export const Router = () => {
         path="/search"
         element={
           <>
-            <SecondaryNavigationWrapper>
+            <SecondaryNavigationWrapper variant="secondary">
               <SearchHeaderSection descriptionText="Sign up for programs and access resources." />
             </SecondaryNavigationWrapper>
             <SearchResultsPage />
diff --git a/app/components/navigation/SecondaryNavigationWrapper.module.scss b/app/components/navigation/SecondaryNavigationWrapper.module.scss
index 5ea760105..99206cd9b 100644
--- a/app/components/navigation/SecondaryNavigationWrapper.module.scss
+++ b/app/components/navigation/SecondaryNavigationWrapper.module.scss
@@ -1,9 +1,6 @@
 @import "app/styles/utils/_helpers.scss";
 
 .container {
-  background: $surface-4;
-  color: $text-tertiary;
-
   .innerContainer {
     margin: 0 auto;
     padding: $spacing-6 $general-spacing-lg;
@@ -17,3 +14,13 @@
     }
   }
 }
+
+.primary {
+  background: $surface-4;
+  color: $text-tertiary;
+}
+
+.secondary {
+  background: $color-secondary;
+  color: $text-primary;
+}
diff --git a/app/components/navigation/SecondaryNavigationWrapper.tsx b/app/components/navigation/SecondaryNavigationWrapper.tsx
index 24ab96a79..1e3fad1f2 100644
--- a/app/components/navigation/SecondaryNavigationWrapper.tsx
+++ b/app/components/navigation/SecondaryNavigationWrapper.tsx
@@ -1,14 +1,16 @@
 import React, { ReactNode } from "react";
-
+import classNames from "classnames";
 import styles from "./SecondaryNavigationWrapper.module.scss";
 
 // Provides page-level styling for the secondary navigation bar
 export const SecondaryNavigationWrapper = ({
   children,
+  variant = "primary",
 }: {
   children: ReactNode;
+  variant?: "primary" | "secondary";
 }) => (
-  <div className={styles.container}>
+  <div className={classNames(styles.container, styles[variant])}>
     <div className={styles.innerContainer}>{children}</div>
   </div>
 );
diff --git a/app/components/search/Header/Header.module.scss b/app/components/search/Header/BrowseSubheader.module.scss
similarity index 100%
rename from app/components/search/Header/Header.module.scss
rename to app/components/search/Header/BrowseSubheader.module.scss
diff --git a/app/components/search/Header/Header.tsx b/app/components/search/Header/BrowseSubheader.tsx
similarity index 86%
rename from app/components/search/Header/Header.tsx
rename to app/components/search/Header/BrowseSubheader.tsx
index 547ebafc7..d2edce34b 100644
--- a/app/components/search/Header/Header.tsx
+++ b/app/components/search/Header/BrowseSubheader.tsx
@@ -5,7 +5,7 @@ import websiteConfig from "utils/websiteConfig";
 import { CATEGORIES } from "pages/constants";
 import DropdownMenu from "components/ui/Navigation/DropdownMenu";
 
-import styles from "./Header.module.scss";
+import styles from "./BrowseSubheader.module.scss";
 
 const { showPrintResultsBtn } = websiteConfig;
 
@@ -20,7 +20,7 @@ const DROPDOWN_LINKS = CATEGORIES.map((category) => ({
   text: category.name,
 }));
 
-export const Header = ({ currentCategory }: Props) => {
+export const BrowseSubheader = ({ currentCategory }: Props) => {
   const title = currentCategory;
 
   const uuid = crypto.randomUUID();
@@ -29,9 +29,7 @@ export const Header = ({ currentCategory }: Props) => {
     <div className={styles.header}>
       <div className={styles.headerInner}>
         <div>
-          <h1 className="sr-only">
-            {title === currentCategory ?? "Search results"}
-          </h1>
+          <h1 className="sr-only">{title}</h1>
           <DropdownMenu
             id={uuid}
             title={title}
diff --git a/app/components/search/Pagination/ResultsPagination.module.scss b/app/components/search/Pagination/ResultsPagination.module.scss
index f1f74a3ee..2bcae3fdf 100644
--- a/app/components/search/Pagination/ResultsPagination.module.scss
+++ b/app/components/search/Pagination/ResultsPagination.module.scss
@@ -46,3 +46,12 @@
   align-items: center;
   justify-content: center;
 }
+
+.algoliaImgWrapper {
+  display: flex;
+  justify-content: center;
+
+  img {
+    width: 120px;
+  }
+}
diff --git a/app/pages/ServiceDiscoveryResults/ServiceDiscoveryResults.tsx b/app/pages/ServiceDiscoveryResults/ServiceDiscoveryResults.tsx
index c4232385f..bac0b493c 100644
--- a/app/pages/ServiceDiscoveryResults/ServiceDiscoveryResults.tsx
+++ b/app/pages/ServiceDiscoveryResults/ServiceDiscoveryResults.tsx
@@ -5,7 +5,7 @@ import { DEFAULT_AROUND_PRECISION, useAppContext } from "utils";
 import { SearchMapActions } from "components/search/SearchResults/SearchResults";
 import { Loader } from "components/ui/Loader";
 import Sidebar from "components/search/Sidebar/Sidebar";
-import { Header } from "components/search/Header/Header";
+import { BrowseSubheader } from "components/search/Header/BrowseSubheader";
 import { SecondaryNavigationWrapper } from "components/navigation/SecondaryNavigationWrapper";
 import { BrowseHeaderSection } from "components/search/Header/BrowseHeaderSection";
 import {
@@ -98,7 +98,7 @@ export const ServiceDiscoveryResults = () => {
         <BrowseHeaderSection descriptionText="Sign up for programs and access resources." />
       </SecondaryNavigationWrapper>
       <div className={styles.container}>
-        <Header currentCategory={categoryName} />
+        <BrowseSubheader currentCategory={categoryName} />
         <Configure
           filters={`categories:'${algoliaCategoryName}'`}
           aroundLatLng={aroundLatLng}