SUM-45 | @rebeccahongsf | Theme & style header

src/components/elements/lockup/lockup.tsx

@@ -43,19 +43,17 @@ export const Lockup = ({
 
   if (!suLockupEnabled) {
     return (
-      <div className="py-10">
-        <Link href="/" className="flex no-underline">
-          <div className="self-end">
-            <div className="lg:inline-block pr-2 mr-2 lg:border-r border-black">
-              <LockupLogo {...lockupProps}/>
-            </div>
-            <div
-              className="lg:inline-block font-normal text-black text-m2">
-              {suSiteName || "University"}
-            </div>
+      <Link href="/" className="flex no-underline">
+        <div className="self-end">
+          <div className="lg:inline-block pr-2 mr-2 lg:border-r border-black">
+            <LockupLogo {...lockupProps}/>
           </div>
-        </Link>
-      </div>
+          <div
+            className="lg:inline-block font-normal text-black text-m2">
+            {suSiteName || "University"}
+          </div>
+        </div>
+      </Link>
     )
   }
 
@@ -99,12 +97,10 @@ export const Lockup = ({
     case "none":
     default:
       return (
-        <div className="py-10">
-          <Link href="/"
-                className="flex flex-col lg:flex-row gap-4 no-underline">
-            <LockupLogo {...lockupProps}/>
-          </Link>
-        </div>
+        <Link href="/"
+              className="flex flex-col lg:flex-row gap-4 no-underline">
+          <LockupLogo {...lockupProps}/>
+        </Link>
       )
   }
 }

src/components/global/page-header.tsx

@@ -1,4 +1,3 @@
-import SiteSearchForm from "@components/search/site-search-form";
 import MainMenu from "@components/menu/main-menu";
 import GlobalMessage from "@components/config-pages/global-message";
 import Lockup from "@components/elements/lockup/lockup";
@@ -10,6 +9,7 @@ import {
   StanfordGlobalMessage
 } from "@lib/gql/__generated__/drupal.d";
 import {isPreviewMode} from "@lib/drupal/utils";
+import Button from "@components/elements/button";
 
 const PageHeader = async () => {
   const menuItems = await getMenu(MenuAvailable.Main, isPreviewMode());
@@ -30,15 +30,19 @@ const PageHeader = async () => {
         </div>
       </div>
       {globalMessageConfig && <GlobalMessage {...globalMessageConfig}/>}
-      <div className="relative shadow">
-        <div className="centered min-h-50 pr-24 lg:pr-0">
-          <div className="flex w-full justify-between">
-            <Lockup {...siteSettingsConfig} {...lockupSettingsConfig}/>
-            <SiteSearchForm className="hidden lg:block"/>
+      <div className="relative bg-fog-light">
+        <div className="w-full border-b-2 lg:border-b-0">
+          <div className="centered min-h-50 pr-24 rs-py-2 lg:pr-0">
+            <div className="flex w-full justify-between">
+              <Lockup {...siteSettingsConfig} {...lockupSettingsConfig} />
+              <div className="hidden lg:block">
+                {siteSettingsConfig && siteSettingsConfig.sumSiteHeaderPrim && <Button href={siteSettingsConfig.sumSiteHeaderPrim.url} secondary>{siteSettingsConfig.sumSiteHeaderPrim.title}</Button>}
+                {siteSettingsConfig && siteSettingsConfig.sumSiteHeaderSec && <Button href={siteSettingsConfig.sumSiteHeaderSec.url}>{siteSettingsConfig.sumSiteHeaderSec.title}</Button>}
+              </div>
+            </div>
           </div>
         </div>
-
-        <MainMenu menuItems={menuItems}/>
+        <MainMenu menuItems={menuItems} {...siteSettingsConfig}/>
       </div>
     </header>
   )