William dev (vercel#19)

* logo changes * Remove Spanish Locale
DSCO-Co · Apr 5, 2023 · 04de2bc · 04de2bc
1 parent f4eea04
commit 04de2bc
Show file tree

Hide file tree

Showing 7 changed files with 242 additions and 23 deletions.
diff --git a/site/components/common/Navbar/Navbar.module.css b/site/components/common/Navbar/Navbar.module.css
@@ -9,7 +9,6 @@
 
 .navMenu {
   @apply hidden px-4 space-x-4 lg:flex justify-center;
-
 }
 
 .link {

diff --git a/site/components/common/Navbar/Navbar.tsx b/site/components/common/Navbar/Navbar.tsx
@@ -1,10 +1,10 @@
-import { Children, FC, useState } from 'react'
 import type { Category } from '@commerce/types/site'
+import { FreeShippingBanner, Searchbar, UserNav } from '@components/common'
+import { Container, Logo } from '@components/ui'
 import Link from 'next/link'
+import { FC, useState } from 'react'
 import s from './Navbar.module.css'
 import NavbarRoot from './NavbarRoot'
-import { Logo, Container } from '@components/ui'
-import { Searchbar, UserNav, FreeShippingBanner } from '@components/common'
 
 interface Link {
   href: string
@@ -16,9 +16,8 @@ interface NavbarProps {
   links?: Link[]
 }
 
-import { Fragment } from 'react'
 import { Menu, Transition } from '@headlessui/react'
-import { EllipsisVerticalIcon } from '@heroicons/react/20/solid'
+import { Fragment } from 'react'
 
 function classNames(...classes) {
   return classes.filter(Boolean).join(' ')
@@ -69,7 +68,7 @@ function DropDownMenu({ children, dropDownLinks, isActive, menuKey, setActiveMen
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Menu.Items className="absolute right-0 z-10 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+        <Menu.Items className="absolute right-0 z-10 w-56 origin-top-right bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
           <div className="py-1">
             {dropDownLinks.map((dropDownLink) => (
               <Menu.Item key={dropDownLink.name}>
@@ -106,7 +105,7 @@ const Navbar: FC<NavbarProps> = ({ links }) => {
       {/* Free shipping banner */}
       <FreeShippingBanner />
       {/* Main Navbar piece */}
-      <Container clean className="mx-auto max-w-8xl px-6">
+      <Container clean className="px-6 mx-auto max-w-8xl">
         <div className={s.nav}>
           {/* Logo */}
           <div className="flex items-center flex-1">
@@ -130,20 +129,20 @@ const Navbar: FC<NavbarProps> = ({ links }) => {
                 <Link href={l.href} className={`${s.link} ${activeMenu === l.href ? s.linkActive : ''}`}>
                   {l.label}
                 </Link>
-                
+
               </DropDownMenu>
             ))}
           </nav>
           <div className="flex items-center justify-end flex-1 flex-shrink-[2] space-x-8">
             {process.env.COMMERCE_SEARCH_ENABLED && (
-              <div className="flex justify-center items-center">
+              <div className="flex items-center justify-center">
                 <button
                   onClick={() =>
                     setShowSearchBar((prevShowSearchBar) => !prevShowSearchBar)
                   }
                 >
                   <svg
-                    className="h-6 w-6"
+                    className="w-6 h-6"
                     fill="currentColor"
                     viewBox="0 0 20 20"
                   >

diff --git a/site/components/ui/Logo/InsigniaLogo.tsx b/site/components/ui/Logo/InsigniaLogo.tsx
@@ -0,0 +1,45 @@
+import { memo } from 'react';
+export const InsigniaLogo = ({ color = "#000", ...props }) => {
+    return (
+        <svg
+            id="f4b917d7-d616-40d6-a167-960dc27bf2ee"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlnsXlink="http://www.w3.org/1999/xlink"
+            viewBox="0 0 141.07 86.8"
+            {...props}
+        >
+            <defs>
+                <style
+                    dangerouslySetInnerHTML={
+                        {
+                            __html:
+                                `
+                            .a991bde2-ed78-4eed-b49b-5290dd36518e,.ff40a96b-5c7c-434d-b464-1651d6797f37{
+                                fill:none;
+                            }
+                            .b626f769-69ca-4251-bc1c-19c19d08f94d{ 
+                                clip - path:url(#aac29af8-c357-4420-a13b-9daa4fd5c100);
+                            }
+                            .add3b857-e623-48ee-a573-413dfe3c8885{
+                                fill:${color};
+                            }
+                            .a991bde2-ed78-4eed-b49b-5290dd36518e{
+                                stroke:${color};
+                                stroke-miterlimit:10;
+                                stroke-width:4px;
+                            }`
+                        }
+                    } />
+                <clipPath id="aac29af8-c357-4420-a13b-9daa4fd5c100" transform="translate(-233.98 -241.18)">
+                    <rect className="ff40a96b-5c7c-434d-b464-1651d6797f37" width={612} height={792} />
+                </clipPath>
+            </defs>
+            <g className="b626f769-69ca-4251-bc1c-19c19d08f94d">
+                <path className="add3b857-e623-48ee-a573-413dfe3c8885" d="M308.18,325.34h0a12.49,12.49,0,0,0,12.49-12.49V255.71a12.49,12.49,0,0,0-12.49-12.49.84.84,0,0,1,0-1.68h21.73q1.68,0,3.36-.06c1.11,0,2.23-.1,3.34-.18h0c1.12,0,2.21,0,3.28-.06s2.18-.06,3.3-.06a47.1,47.1,0,0,1,12.67,1.62A32.7,32.7,0,0,1,366,247.42a22.49,22.49,0,0,1,6.67,7.21,18.53,18.53,0,0,1,2.4,9.36,17.14,17.14,0,0,1-2.76,9.61,24,24,0,0,1-7.33,7.08,37,37,0,0,1-10.62,4.44,50.67,50.67,0,0,1-12.67,1.56,39.8,39.8,0,0,1-4.32-.3c-1.35-.15-2.59-.32-3.7-.5a.84.84,0,0,0-1,.83v26.14a12.49,12.49,0,0,0,12.49,12.49.84.84,0,1,1,0,1.68h-37a.84.84,0,1,1,0-1.68m24.49-46.14a5.57,5.57,0,0,0,5,5.56h0q2.64.24,4.68.24,8.89,0,13.87-5.22t5-15.79a36.75,36.75,0,0,0-1.2-10.2,14.54,14.54,0,0,0-3.78-6.55,14.22,14.22,0,0,0-6.72-3.42,44.46,44.46,0,0,0-9.91-1q-2.28,0-4.14.12h0a3,3,0,0,0-2.78,3Z" transform="translate(-233.98 -241.18)" />
+                <path className="add3b857-e623-48ee-a573-413dfe3c8885" d="M234,325.82h0a13.32,13.32,0,0,0,13.32-13.33V257A13.32,13.32,0,0,0,234,243.7V242h21c1.2,0,2.42,0,3.67-.06s2.5-.1,3.78-.18,2.52,0,3.72-.06,2.36-.06,3.48-.06a41.92,41.92,0,0,1,14.41,2.1,25.86,25.86,0,0,1,8.88,5.17,16.35,16.35,0,0,1,4.44,6.6,20.2,20.2,0,0,1,1.2,6.42,15.68,15.68,0,0,1-1.74,7.32,19.41,19.41,0,0,1-4.68,5.89,24.49,24.49,0,0,1-6.78,4.08,30.61,30.61,0,0,1-8.05,2v.24a37.87,37.87,0,0,1,8.83,1.86,29.19,29.19,0,0,1,8.16,4.2,21.54,21.54,0,0,1,5.94,6.66,18,18,0,0,1,2.28,9.13,23.7,23.7,0,0,1-2,9.9,20.73,20.73,0,0,1-6.12,7.74A30.2,30.2,0,0,1,284,326.12,51.12,51.12,0,0,1,269.51,328q-1.68,0-3.3-.06t-3.42-.18q-1.8-.12-3.72-.18c-1.28,0-2.64-.06-4.09-.06H234Zm25.33-45h11a21,21,0,0,0,6.12-.84,10.77,10.77,0,0,0,4.75-2.94,14,14,0,0,0,3.06-5.71,32.34,32.34,0,0,0,1.08-9.12,25.82,25.82,0,0,0-1.62-10,13.65,13.65,0,0,0-4.21-5.71,13.94,13.94,0,0,0-5.76-2.52,33.92,33.92,0,0,0-6.3-.6q-2.16,0-4.38.06l-1,0a3,3,0,0,0-2.82,3Zm0,42.27a3,3,0,0,0,2.7,3l.48.05q1.74.18,5,.18a37.63,37.63,0,0,0,9.66-1.08,14,14,0,0,0,6.61-3.78,16.35,16.35,0,0,0,3.78-7.15,43.63,43.63,0,0,0,1.2-11.16q0-9.6-4.08-15.13t-12.13-5.52h-13.2Z" transform="translate(-233.98 -241.18)" />
+                <line className="a991bde2-ed78-4eed-b49b-5290dd36518e" x1="25.02" y1="41.31" x2="89.18" y2="41.21" />
+            </g>
+        </svg>);
+}
+
+export default memo(InsigniaLogo);
diff --git a/site/components/ui/Logo/Logo.tsx b/site/components/ui/Logo/Logo.tsx
@@ -1,12 +1,35 @@
-import Image from 'next/image'
+// import Image from 'next/image'
 
-const Logo = ({ className = '', ...props }) => (
-  <Image
-    src="/bhpuplogo-v2.jpeg"
-    alt='Image of logo'
-    width={347}
-    height={39}
-  />
-)
+// const Logo = ({ className = '', ...props }) => (
+//   <Image
+//     src="/bhpuplogo-v2.jpeg"
+//     alt='Image of logo'
+//     width={347}
+//     height={39}
+//   />
+// )
 
+// export default Logo
+
+import InsigniaLogo from "./InsigniaLogo";
+import LongLogo from "./LongLogo";
+
+const Logo = ({ className = '', ...props }) => {
+  return (
+    <div className={className}>
+      <LongLogo
+        color="#000"
+        width={350}
+        height={39}
+        className="hidden md:block"
+      />
+      <InsigniaLogo
+        color="#000"
+        width={39}
+        height={39}
+        className="block md:hidden"
+      />
+    </div>
+  )
+}
 export default Logo