From 60da0bf0ba0df3fc9b0f5fa08e146b63d0c8fbb1 Mon Sep 17 00:00:00 2001 From: Jonatan Schultz Date: Tue, 24 Aug 2021 18:08:35 +0200 Subject: [PATCH 1/3] Base layout --- assets/base.css | 66 ++++++++-------------- components/common/Layout/Layout.module.css | 1 - components/ui/Container/Container.tsx | 2 +- pages/_document.tsx | 7 ++- tailwind.config.js | 11 +++- 5 files changed, 37 insertions(+), 50 deletions(-) diff --git a/assets/base.css b/assets/base.css index 05a234a73..eb303268d 100644 --- a/assets/base.css +++ b/assets/base.css @@ -1,35 +1,25 @@ :root { --primary: #ffffff; - --primary-2: #f1f3f5; + --primary-2: #f4f4f4; --secondary: #000000; --secondary-2: #111; - --selection: var(--cyan); + --selection: var(--red); --text-base: #000000; --text-primary: #000000; - --text-secondary: white; + --text-secondary: #ffffff; --hover: rgba(0, 0, 0, 0.075); --hover-1: rgba(0, 0, 0, 0.15); --hover-2: rgba(0, 0, 0, 0.25); - --cyan: #22b8cf; - --green: #37b679; - --red: #da3c3c; - --purple: #f81ce5; - --blue: #0070f3; - - --pink: #ff0080; - --pink-light: #ff379c; - - --magenta: #eb367f; - - --violet: #7928ca; - --violet-dark: #4c2889; + --red: #fc3f1d; + --blue: #4628f0; + --yellow: #fab413; --accent-0: #fff; --accent-1: #fafafa; --accent-2: #eaeaea; - --accent-3: #999999; + --accent-3: #b4afaf; --accent-4: #888888; --accent-5: #666666; --accent-6: #444444; @@ -37,34 +27,16 @@ --accent-8: #111111; --accent-9: #000; - --font-sans: -apple-system, system-ui, BlinkMacSystemFont, 'Helvetica Neue', - 'Helvetica', sans-serif; -} + --font-sans: 'Inter', sans-serif; -[data-theme='dark'] { - --primary: #000000; - --primary-2: #111; - --secondary: #ffffff; - --secondary-2: #f1f3f5; - --hover: rgba(255, 255, 255, 0.075); - --hover-1: rgba(255, 255, 255, 0.15); - --hover-2: rgba(255, 255, 255, 0.25); - --selection: var(--purple); - - --text-base: white; - --text-primary: white; - --text-secondary: black; - - --accent-9: #fff; - --accent-8: #fafafa; - --accent-7: #eaeaea; - --accent-6: #999999; - --accent-5: #888888; - --accent-4: #666666; - --accent-3: #444444; - --accent-2: #333333; - --accent-1: #111111; - --accent-0: #000; + --cyan: #22b8cf; + --green: #37b679; + --purple: #f81ce5; + --pink: #ff0080; + --pink-light: #ff379c; + --magenta: #eb367f; + --violet: #7928ca; + --violet-dark: #4c2889; } *, @@ -80,6 +52,12 @@ html { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + @apply text-html; +} +@screen lg { + html { + @apply text-html-lg; + } } html, diff --git a/components/common/Layout/Layout.module.css b/components/common/Layout/Layout.module.css index bb90675a6..f5ee03482 100644 --- a/components/common/Layout/Layout.module.css +++ b/components/common/Layout/Layout.module.css @@ -1,4 +1,3 @@ .root { @apply h-full bg-primary mx-auto transition-colors duration-150; - max-width: 2460px; } diff --git a/components/ui/Container/Container.tsx b/components/ui/Container/Container.tsx index 538b1cac7..5c38e1a3e 100644 --- a/components/ui/Container/Container.tsx +++ b/components/ui/Container/Container.tsx @@ -15,7 +15,7 @@ const Container: FC = ({ clean, }) => { const rootClassName = cn(className, { - 'mx-auto max-w-8xl px-6': !clean, + 'mx-auto max-w-8xl px-4 lg:px-6': !clean, }) let Component: React.ComponentType> = diff --git a/pages/_document.tsx b/pages/_document.tsx index dcd214e4f..65d197499 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -4,7 +4,12 @@ class MyDocument extends Document { render() { return ( - + + +
diff --git a/tailwind.config.js b/tailwind.config.js index 25f9d8e38..5467f9270 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -17,7 +17,7 @@ module.exports = { theme: { extend: { maxWidth: { - '8xl': '1920px', + '8xl': '2560px', }, colors: { primary: 'var(--primary)', @@ -37,15 +37,16 @@ module.exports = { 'accent-7': 'var(--accent-7)', 'accent-8': 'var(--accent-8)', 'accent-9': 'var(--accent-9)', + blue: 'var(--blue)', + red: 'var(--red)', + yellow: 'var(--yellow)', violet: 'var(--violet)', 'violet-light': 'var(--violet-light)', 'violet-dark': 'var(--violet-dark)', pink: 'var(--pink)', 'pink-light': 'var(--pink-light)', cyan: 'var(--cyan)', - blue: 'var(--blue)', green: 'var(--green)', - red: 'var(--red)', }, textColor: { base: 'var(--text-base)', @@ -57,6 +58,10 @@ module.exports = { magical: 'rgba(0, 0, 0, 0.02) 0px 30px 30px, rgba(0, 0, 0, 0.03) 0px 0px 8px, rgba(0, 0, 0, 0.05) 0px 1px 0px', }, + fontSize: { + html: '15px', + 'html-lg': '18px', + }, lineHeight: { 'extra-loose': '2.2', }, From c9dedf8a4ef8e4d593ecf9b511943e52828e82a0 Mon Sep 17 00:00:00 2001 From: Jonatan Schultz Date: Tue, 24 Aug 2021 18:09:11 +0200 Subject: [PATCH 2/3] 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 }) => ( - ) From 8494ae73fb8780ecf672733aa4f1f6fa24095d92 Mon Sep 17 00:00:00 2001 From: Jonatan Schultz Date: Tue, 24 Aug 2021 18:09:24 +0200 Subject: [PATCH 3/3] Footer layout --- components/common/Footer/Footer.module.css | 12 +--- components/common/Footer/Footer.tsx | 65 ++++------------------ 2 files changed, 12 insertions(+), 65 deletions(-) diff --git a/components/common/Footer/Footer.module.css b/components/common/Footer/Footer.module.css index 2ba492086..dc4f09666 100644 --- a/components/common/Footer/Footer.module.css +++ b/components/common/Footer/Footer.module.css @@ -1,13 +1,3 @@ .root { - @apply border-t border-accent-2; -} - -.link { - & > svg { - @apply transform duration-75 ease-linear; - } - - &:hover > svg { - @apply scale-110; - } + @apply py-10 mt-5; } diff --git a/components/common/Footer/Footer.tsx b/components/common/Footer/Footer.tsx index 73370087f..0fa511d7b 100644 --- a/components/common/Footer/Footer.tsx +++ b/components/common/Footer/Footer.tsx @@ -29,62 +29,19 @@ const Footer: FC = ({ className, pages }) => { return (