Merge pull request #6 from sesamyab/jonatanschulz/ch190/create-basic-styling

Basic layout changes

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,

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;
 }

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;
 }

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;
 }

components/common/Navbar/Navbar.tsx

@@ -15,38 +15,39 @@ interface NavbarProps {
 
 const Navbar: FC<NavbarProps> = ({ links }) => (
   <NavbarRoot>
-    <Container>
-      <div className={s.nav}>
-        <div className="flex items-center flex-1">
-          <Link href="/">
-            <a className={s.logo} aria-label="Logo">
-              <Logo />
-            </a>
-          </Link>
-          <nav className={s.navMenu}>
-            <Link href="/search">
-              <a className={s.link}>All</a>
+    <div className={s.navContainer}>
+      <Container>
+        <div className={s.nav}>
+          <div className="flex items-center flex-1">
+            <Link href="/">
+              <a className={s.logo} aria-label="Logo">
+                <Logo />
+              </a>
             </Link>
-            {links?.map((l) => (
-              <Link href={l.href} key={l.href}>
-                <a className={s.link}>{l.label}</a>
+            <nav className={s.navMenu}>
+              <Link href="/search">
+                <a className={s.link}>All</a>
               </Link>
-            ))}
-          </nav>
-        </div>
-        {process.env.COMMERCE_SEARCH_ENABLED && (
-          <div className="justify-center flex-1 hidden lg:flex">
-            <Searchbar />
+              {links?.map((l) => (
+                <Link href={l.href} key={l.href}>
+                  <a className={s.link}>{l.label}</a>
+                </Link>
+              ))}
+            </nav>
+          </div>
+          <div className="flex items-center justify-end flex-1 space-x-8">
+            <UserNav />
           </div>
-        )}
-        <div className="flex items-center justify-end flex-1 space-x-8">
-          <UserNav />
         </div>
+      </Container>
+    </div>
+    {process.env.COMMERCE_SEARCH_ENABLED && (
+      <div className={s.searchContainer}>
+        <Container>
+          <Searchbar />
+        </Container>
       </div>
-      <div className="flex pb-4 lg:px-6 lg:hidden">
-        <Searchbar id="mobile-search" />
-      </div>
-    </Container>
+    )}
   </NavbarRoot>
 )
 

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 {

components/common/Searchbar/Searchbar.tsx

@@ -45,12 +45,9 @@ const Searchbar: FC<Props> = ({ className, id = 'search' }) => {
         onKeyUp={handleKeyUp}
       />
       <div className={s.iconContainer}>
-        <svg className={s.icon} fill="currentColor" viewBox="0 0 20 20">
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
-          />
+        <svg className={s.icon} width="21" height="21" viewBox="0 0 21 21" fill="currentColor">
+          <path fillRule="evenodd" clipRule="evenodd" d="M16.75 8.5C16.75 13.0563 13.0563 16.75 8.5 16.75C3.94365 16.75 0.25 13.0563 0.25 8.5C0.25 3.94365 3.94365 0.25 8.5 0.25C13.0563 0.25 16.75 3.94365 16.75 8.5ZM15.25 8.5C15.25 12.2279 12.2279 15.25 8.5 15.25C4.77208 15.25 1.75 12.2279 1.75 8.5C1.75 4.77208 4.77208 1.75 8.5 1.75C12.2279 1.75 15.25 4.77208 15.25 8.5Z" fill="black"></path>
+          <path d="M16.5303 15.4697C16.2374 15.1768 15.7626 15.1768 15.4697 15.4697C15.1768 15.7626 15.1768 16.2374 15.4697 16.5303L19.2197 20.2803C19.5126 20.5732 19.9874 20.5732 20.2803 20.2803C20.5732 19.9874 20.5732 19.5126 20.2803 19.2197L16.5303 15.4697Z" fill="black"></path>
         </svg>
       </div>
     </div>

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;
 }

components/common/UserNav/UserNav.tsx

@@ -27,8 +27,8 @@ const UserNav: FC<Props> = ({ className }) => {
       <ul className={s.list}>
         {process.env.COMMERCE_CART_ENABLED && (
           <li className={s.item} onClick={toggleSidebar}>
-            <Bag />
-            {itemsCount > 0 && <span className={s.bagCount}>{itemsCount}</span>}
+            Cart&nbsp;
+            {itemsCount > 0 && <span>({itemsCount})</span>}
           </li>
         )}
         {process.env.COMMERCE_WISHLIST_ENABLED && (

components/ui/Container/Container.tsx

@@ -15,7 +15,7 @@ const Container: FC<ContainerProps> = ({
   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<React.HTMLAttributes<HTMLDivElement>> =

components/ui/Logo/Logo.tsx

@@ -1,19 +1,18 @@
 const Logo = ({ className = '', ...props }) => (
   <svg
-    width="32"
-    height="32"
-    viewBox="0 0 32 32"
+    width="36"
+    height="30"
+    viewBox="0 0 36 30"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     className={className}
     {...props}
   >
-    <rect width="100%" height="100%" rx="16" fill="var(--secondary)" />
     <path
       fillRule="evenodd"
       clipRule="evenodd"
-      d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
-      fill="var(--primary)"
+      d="M6.18623 1.37869H29.5792C29.9552 1.37869 30.2686 1.07431 30.2686 0.689346C30.2686 0.304387 29.9642 0 29.5882 0H6.18623C5.81022 0 5.49688 0.304387 5.49688 0.689346C5.49688 1.07431 5.81022 1.37869 6.18623 1.37869ZM3.37512 3.57207L26.6786 5.61325C27.0546 5.64906 27.3948 5.36258 27.4217 4.98657C27.4575 4.61056 27.171 4.27037 26.795 4.24351L3.50046 2.20233C3.12445 2.16652 2.78426 2.453 2.7574 2.82901C2.72159 3.20501 2.99912 3.54521 3.37512 3.57207ZM23.8496 8.09311C24.2167 8.15578 24.4673 8.51388 24.4047 8.88988C24.342 9.26589 23.9839 9.51656 23.6079 9.4539L0.564024 5.38944C0.19697 5.32677 -0.0537017 4.96867 0.00896618 4.59266C0.071634 4.2256 0.429736 3.97493 0.805743 4.0376L23.8496 8.09311ZM21.3877 12.3814C21.4861 12.0143 21.2713 11.6383 20.9042 11.5398L3.62579 6.91137C3.25874 6.81289 2.88273 7.02775 2.78425 7.39481C2.68578 7.76186 2.90064 8.13787 3.26769 8.23635L20.5461 12.8648C20.9042 12.9633 21.2892 12.7484 21.3877 12.3814ZM27.4217 18.9525C27.5649 18.6034 27.4038 18.2005 27.0457 18.0573L9.24799 10.6804C8.89885 10.5372 8.49598 10.6983 8.35274 11.0564C8.2095 11.4055 8.37064 11.8084 8.72875 11.9517L26.5264 19.3286C26.8756 19.4718 27.2784 19.3017 27.4217 18.9525ZM14.8792 18.5497C14.5121 18.4512 14.2972 18.0752 14.3957 17.7081C14.4942 17.3411 14.8702 17.1262 15.2373 17.2247L32.5157 21.8532C32.8827 21.9517 33.0976 22.3277 32.9991 22.6947C32.9006 23.0618 32.5246 23.2766 32.1576 23.1782L14.8792 18.5497ZM35.2104 24.7001L12.1665 20.6356C11.7905 20.573 11.4324 20.8236 11.3698 21.1907C11.3071 21.5667 11.5578 21.9248 11.9248 21.9875L34.9687 26.0519C35.3447 26.1146 35.7028 25.8639 35.7654 25.4969C35.8281 25.1209 35.5774 24.7628 35.2104 24.7001ZM9.0958 24.4673L32.3993 26.5085C32.7753 26.5443 33.0528 26.8756 33.026 27.2516C32.9991 27.6276 32.6589 27.9141 32.2829 27.8782L8.97942 25.8371C8.60341 25.8102 8.31693 25.47 8.35274 25.094C8.3796 24.718 8.7198 24.4315 9.0958 24.4673ZM6.18623 28.6213H29.5882C29.9642 28.6213 30.2775 28.9346 30.2686 29.3106C30.2686 29.6956 29.9552 30 29.5792 30H6.18623C5.80127 30 5.49688 29.6867 5.49688 29.3106C5.49688 28.9257 5.81022 28.6213 6.18623 28.6213Z"
+      fill="var(--primary-2)"
     />
   </svg>
 )

pages/_document.tsx

@@ -4,7 +4,12 @@ class MyDocument extends Document {
   render() {
     return (
       <Html>
-        <Head />
+        <Head>
+          <link
+            href="https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;700&display=swap"
+            rel="stylesheet"
+          />
+        </Head>
         <body className="loading">
           <Main />
           <NextScript />

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',
       },