SUP-179 | @rebeccahongsf | Theme and style masthead, navigation, and …

…logo
SU-SWS · Jun 24, 2024 · b734838 · b734838
1 parent 8ca4706
commit b734838
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git a/src/components/global/page-header.tsx b/src/components/global/page-header.tsx
@@ -18,7 +18,7 @@ const PageHeader = async () => {
       {globalMessageConfig && <GlobalMessage {...globalMessageConfig} />}
       <div className="min-h-50 centered pr-24 lg:pr-0">
         <div className="flex w-full items-center justify-between gap-20">
-          <div className="py-10">
+          <div className="rs-pt-2 rs-pb-3">
             <Link
               href="/"
               className="flex flex-col gap-4 no-underline lg:flex-row"

diff --git a/src/components/images/header-logo-lg.tsx b/src/components/images/header-logo-lg.tsx
@@ -2,6 +2,8 @@
 
 import {HtmlHTMLAttributes} from "react"
 import usePageHasTopBanner from "@lib/hooks/usePageHasTopBanner"
+import { useWindowSize } from 'usehooks-ts'
+
 
 type Props = HtmlHTMLAttributes<SVGSVGElement> & {
   height?: number
@@ -10,6 +12,11 @@ type Props = HtmlHTMLAttributes<SVGSVGElement> & {
 
 const HeaderLogoLg = ({height = 89, width = 579, ...props}: Props) => {
   const hasPageBanner = usePageHasTopBanner()
+  const { width: windowWidth } = useWindowSize()
+
+  if (!height || height === 89) {
+    height = windowWidth >= 1500 ? 126 : windowWidth <= 1500 ? 104 : 72;
+  }
 
   if (height != 89 && width == 579) {
     width *= height / 89

diff --git a/src/components/menu/main-menu.tsx b/src/components/menu/main-menu.tsx
@@ -88,7 +88,7 @@ const MainMenu = ({menuItems}: Props) => {
 
         <a
           href="/search"
-          className="group ml-24 hidden lg:block"
+          className="group rs-ml-2 hidden lg:block"
         >
           <span className="sr-only">Search Site</span>
           <MagnifyingGlassIcon
@@ -164,7 +164,7 @@ const MenuItem = ({id, url, title, activeTrail, children, level}: MenuItemProps)
       "lg:border-white": pageHasBanner && level === 0 && isCurrent,
       "lg:border-fog": pageHasBanner && level === 0 && !isCurrent && inTrail,
       "border-transparent": level === 0 && !isCurrent && !inTrail,
-      "flex items-center gap-5": title === "Cart",
+      "flex items-center gap-3": title === "Cart",
     },
     // Child menu item styles.
     {
@@ -186,7 +186,7 @@ const MenuItem = ({id, url, title, activeTrail, children, level}: MenuItemProps)
   return (
     <li
       ref={menuItemRef}
-      className={clsx("relative m-0 border-b border-cool-grey py-2 first:border-t last:border-0 lg:relative lg:mr-5 lg:border-black-20 lg:py-0 last:lg:mr-0", {"first:border-t-0 lg:border-b-0": level === 0})}
+      className={clsx("relative m-0 border-b border-cool-grey py-2 first:border-t last:border-0 lg:relative lg:rs-ml-2 2xl:rs-ml-3 lg:border-black-20 lg:py-0 first:lg:ml-0", {"first:border-t-0 lg:border-b-0": level === 0})}
     >
       <div className="flex items-center justify-between lg:justify-end">
         <Link
@@ -198,7 +198,7 @@ const MenuItem = ({id, url, title, activeTrail, children, level}: MenuItemProps)
           {title}
           {title === "Cart" && (
             <ShoppingCartIcon
-              width={30}
+              width={20}
               className={clsx({"text-press-sand-dark": !pageHasBanner})}
             />
           )}