From c9dedf8a4ef8e4d593ecf9b511943e52828e82a0 Mon Sep 17 00:00:00 2001 From: Jonatan Schultz Date: Tue, 24 Aug 2021 18:09:11 +0200 Subject: [PATCH] Header layout --- components/common/Navbar/Navbar.module.css | 31 +++++------ components/common/Navbar/Navbar.tsx | 55 ++++++++++--------- .../common/Searchbar/Searchbar.module.css | 10 ++-- components/common/Searchbar/Searchbar.tsx | 9 +-- components/common/UserNav/UserNav.module.css | 14 +---- components/common/UserNav/UserNav.tsx | 4 +- components/ui/Logo/Logo.tsx | 11 ++-- 7 files changed, 58 insertions(+), 76 deletions(-) diff --git a/components/common/Navbar/Navbar.module.css b/components/common/Navbar/Navbar.module.css index faa86d156..1149d9ceb 100644 --- a/components/common/Navbar/Navbar.module.css +++ b/components/common/Navbar/Navbar.module.css @@ -1,10 +1,18 @@ .root { - @apply sticky top-0 bg-primary z-40 transition-all duration-150; - min-height: 74px; + @apply sticky top-0 z-40 transition-all duration-150; +} + +.navContainer { + @apply bg-secondary; + height: 50px; +} +.searchContainer { + @apply bg-primary border-b border-accent-9; } .nav { - @apply relative flex flex-row justify-between py-4 md:py-4; + @apply relative flex flex-row justify-between; + padding: 10px 0; } .navMenu { @@ -12,24 +20,13 @@ } .link { - @apply inline-flex items-center leading-6 - transition ease-in-out duration-75 cursor-pointer - text-accent-5; + @apply items-center transition ease-in-out duration-75 cursor-pointer text-accent-0 border-b-2 border-opacity-0; } .link:hover { - @apply text-accent-9; -} - -.link:focus { - @apply outline-none text-accent-8; + @apply border-b-2 border-opacity-40; } .logo { - @apply cursor-pointer rounded-full border transform duration-100 ease-in-out; - - &:hover { - @apply shadow-md; - transform: scale(1.05); - } + @apply cursor-pointer; } diff --git a/components/common/Navbar/Navbar.tsx b/components/common/Navbar/Navbar.tsx index 2ce5f33b8..c3064585c 100644 --- a/components/common/Navbar/Navbar.tsx +++ b/components/common/Navbar/Navbar.tsx @@ -15,38 +15,39 @@ interface NavbarProps { const Navbar: FC = ({ links }) => ( - -
-
- - - - - - +
+
+
- )} -
-
+ +
+ {process.env.COMMERCE_SEARCH_ENABLED && ( +
+ + +
-
- -
- + )} ) diff --git a/components/common/Searchbar/Searchbar.module.css b/components/common/Searchbar/Searchbar.module.css index 7f20ed973..05732dd76 100644 --- a/components/common/Searchbar/Searchbar.module.css +++ b/components/common/Searchbar/Searchbar.module.css @@ -1,9 +1,9 @@ .root { - @apply relative text-sm bg-accent-0 text-base w-full transition-colors duration-150 border border-accent-2; + @apply relative bg-accent-0 text-3xl w-full transition-colors duration-150; } .input { - @apply bg-transparent px-3 py-2 appearance-none w-full transition duration-150 ease-in-out pr-10; + @apply bg-transparent py-3 appearance-none w-full transition duration-150 ease-in-out pr-14; } .input::placeholder { @@ -11,15 +11,15 @@ } .input:focus { - @apply outline-none shadow-outline-normal; + @apply outline-none; } .iconContainer { - @apply absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none; + @apply absolute inset-y-0 -right-4 lg:right-0 px-4 flex items-center pointer-events-none border-l border-r border-accent-9; } .icon { - @apply h-5 w-5; + @apply h-6 lg:h-8 w-6 lg:w-8; } @screen sm { diff --git a/components/common/Searchbar/Searchbar.tsx b/components/common/Searchbar/Searchbar.tsx index ee20a3ade..2385ce815 100644 --- a/components/common/Searchbar/Searchbar.tsx +++ b/components/common/Searchbar/Searchbar.tsx @@ -45,12 +45,9 @@ const Searchbar: FC = ({ className, id = 'search' }) => { onKeyUp={handleKeyUp} />
- - + + +
diff --git a/components/common/UserNav/UserNav.module.css b/components/common/UserNav/UserNav.module.css index 92f62c10d..2318f3f34 100644 --- a/components/common/UserNav/UserNav.module.css +++ b/components/common/UserNav/UserNav.module.css @@ -7,11 +7,7 @@ } .item { - @apply mr-6 cursor-pointer relative transition ease-in-out duration-100 flex items-center outline-none text-primary; - - &:hover { - @apply text-accent-6 transition scale-110 duration-100; - } + @apply mr-6 cursor-pointer relative transition ease-in-out duration-100 flex items-center outline-none text-secondary; &:last-child { @apply mr-0; @@ -23,14 +19,6 @@ } } -.bagCount { - @apply border border-accent-1 bg-secondary text-secondary absolute rounded-full right-3 top-3 flex items-center justify-center font-bold text-xs; - padding-left: 2.5px; - padding-right: 2.5px; - min-width: 1.25rem; - min-height: 1.25rem; -} - .avatarButton { @apply inline-flex justify-center rounded-full; } diff --git a/components/common/UserNav/UserNav.tsx b/components/common/UserNav/UserNav.tsx index 5d7d28df3..2df6ad990 100644 --- a/components/common/UserNav/UserNav.tsx +++ b/components/common/UserNav/UserNav.tsx @@ -27,8 +27,8 @@ const UserNav: FC = ({ className }) => {
    {process.env.COMMERCE_CART_ENABLED && (
  • - - {itemsCount > 0 && {itemsCount}} + Cart  + {itemsCount > 0 && ({itemsCount})}
    • )} {process.env.COMMERCE_WISHLIST_ENABLED && ( diff --git a/components/ui/Logo/Logo.tsx b/components/ui/Logo/Logo.tsx index f15bde40a..853dea4d3 100644 --- a/components/ui/Logo/Logo.tsx +++ b/components/ui/Logo/Logo.tsx @@ -1,19 +1,18 @@ const Logo = ({ className = '', ...props }) => ( - )