Merge branch 'master' into arzafran/ui-tweaks

components/core/Featurebar/Featurebar.module.css

@@ -1,3 +1,7 @@
 .root {
-  @apply text-center p-6 bg-primary text-base text-sm md:flex md:text-left flex-row justify-center items-center font-medium fixed bottom-0 w-full z-30;
+  @apply text-center p-6 bg-primary text-sm flex-row justify-center items-center font-medium fixed bottom-0 w-full z-30;
+
+  @screen md {
+    @apply flex text-left;
+  }
 }

components/core/I18nWidget/I18nWidget.module.css

@@ -3,7 +3,11 @@
 }
 
 .button {
-  @apply h-10 px-2 rounded-md border border-accents-2 flex items-center space-x-2 justify-center outline-none focus:outline-none;
+  @apply h-10 px-2 rounded-md border border-accents-2 flex items-center justify-center;
+}
+
+.button:focus {
+  @apply outline-none;
 }
 
 .dropdownMenu {
@@ -15,9 +19,10 @@
 }
 
 .item {
-  @apply flex cursor-pointer px-6 py-3 block hover:bg-accents-1 transition ease-in-out duration-150 text-base leading-6 font-medium text-gray-900 items-center;
+  @apply flex cursor-pointer px-6 py-3 block transition ease-in-out duration-150 text-primary leading-6 font-medium text-gray-900 items-center;
   text-transform: capitalize;
 }
 
-.item.active {
+.item:hover {
+  @apply bg-accents-1;
 }

components/core/I18nWidget/I18nWidget.tsx

@@ -19,10 +19,10 @@ const I18nWidget: FC = () => {
     <nav className={s.root}>
       <Menu>
         <Menu.Button className={s.button} aria-label="Language selector">
-          <img className="" src="/flag-us.png" alt="US Flag" />
-          <span>{LOCALES_MAP[locale || defaultLocale]}</span>
+          <img className="mr-2" src="/flag-us.png" alt="US Flag" />
+          <span className="mr-2">{LOCALES_MAP[locale || defaultLocale]}</span>
           {options && (
-            <span className="">
+            <span>
               <DoubleChevron />
             </span>
           )}

components/core/Navbar/Navbar.module.css

@@ -1,3 +1,11 @@
 .link {
-  @apply group inline-flex items-center text-base leading-6 font-medium hover:text-accents-8 focus:outline-none focus:text-accents-8 transition ease-in-out duration-150 cursor-pointer;
+  @apply inline-flex items-center text-primary leading-6 font-medium transition ease-in-out duration-150 cursor-pointer;
+}
+
+.link:hover {
+  @apply text-accents-8;
+}
+
+.link:focus {
+  @apply outline-none text-accents-8;
 }

components/core/Navbar/Navbar.tsx

@@ -1,6 +1,6 @@
-import s from './Navbar.module.css'
 import { FC } from 'react'
 import Link from 'next/link'
+import s from './Navbar.module.css'
 import { Logo } from '@components/ui'
 import { Searchbar, UserNav } from '@components/core'
 interface Props {

components/core/Searchbar/Searchbar.module.css

@@ -1,8 +1,12 @@
 .input {
-  @apply bg-transparent px-3 py-2 appearance-none w-full transition duration-150 ease-in-out placeholder-accents-5 pr-10;
+  @apply bg-transparent px-3 py-2 appearance-none w-full transition duration-150 ease-in-out pr-10;
   min-width: 300px;
 }
 
+.input:focus {
+  @apply outline-none shadow-outline-2;
+}
+
 .iconContainer {
   @apply absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none;
 }

components/core/UserNav/DropdownMenu.module.css

@@ -4,13 +4,17 @@
   @screen lg {
     @apply absolute border border-accents-1 shadow-lg w-56 h-auto;
   }
-
-  & .link {
-    @apply flex cursor-pointer px-6 py-3 block hover:bg-accents-1 transition ease-in-out duration-150 text-base leading-6 font-medium text-gray-900 items-center;
-    text-transform: capitalize;
-  }
-
-  &.off {
-    @apply hidden;
-  }
+}
+
+.link {
+  @apply flex cursor-pointer px-6 py-3 block transition ease-in-out duration-150 text-primary leading-6 font-medium text-gray-900 items-center;
+  text-transform: capitalize;
+}
+
+.link:hover {
+  @apply bg-accents-1;
+}
+
+.off {
+  @apply hidden;
 }

components/core/UserNav/UserNav.module.css

@@ -7,7 +7,7 @@
 }
 
 .item {
-  @apply mr-6 cursor-pointer relative transition ease-in-out duration-100 text-base flex items-center outline-none;
+  @apply mr-6 cursor-pointer relative transition ease-in-out duration-100 text-primary flex items-center outline-none;
 
   &:hover {
     @apply text-accents-8 transition scale-110 duration-100;
@@ -28,5 +28,9 @@
 }
 
 .avatarButton {
-  @apply inline-flex justify-center rounded-full outline-none focus:outline-none;
+  @apply inline-flex justify-center rounded-full;
+}
+
+.avatarButton:focus {
+  @apply outline-none;
 }

components/core/UserNav/UserNav.tsx

@@ -5,7 +5,6 @@ import { FC } from 'react'
 import { Heart, Bag } from '@components/icons'
 import { Avatar } from '@components/core'
 import { useUI } from '@components/ui/context'
-import { LoginView } from '@components/auth'
 import DropdownMenu from './DropdownMenu'
 import { Menu } from '@headlessui/react'
 import useCart from '@lib/bigcommerce/cart/use-cart'

components/product/ProductCard/ProductCard.module.css

@@ -114,12 +114,12 @@
 }
 
 .productPrice {
-  @apply py-4 px-6 bg-primary text-base font-semibold inline-block text-sm leading-6;
+  @apply py-4 px-6 bg-primary text-primary font-semibold inline-block text-sm leading-6;
   letter-spacing: 0.4px;
 }
 
 .wishlistButton {
-  @apply w-10 h-10 flex ml-auto items-center justify-center bg-primary text-base font-semibold inline-block text-xs leading-6 cursor-pointer;
+  @apply w-10 h-10 flex ml-auto flex items-center justify-center bg-primary text-primary font-semibold  text-xs leading-6 cursor-pointer;
 }
 
 .imageContainer {

components/product/ProductSlider/ProductSlider.module.css

@@ -5,17 +5,35 @@
 
 .leftControl,
 .rightControl {
-  @apply absolute top-1/2 -translate-x-1/2 z-20 w-16 h-16 flex items-center justify-center bg-hover-1 rounded-full focus:outline-none focus:shadow-outline-blue hover:bg-hover-2;
+  @apply absolute top-1/2 -translate-x-1/2 z-20 w-16 h-16 flex items-center justify-center bg-hover-1 rounded-full;
+}
+
+.leftControl:hover,
+.rightControl:hover {
+  @apply bg-hover-2;
+}
+
+.leftControl:hover,
+.rightControl:hover {
+  @apply outline-none shadow-outline-blue;
 }
 
 .leftControl {
-  @apply bg-cover left-10 md:left-6;
+  @apply bg-cover left-10;
   background-image: url('public/cursor-left.png');
+
+  @screen md {
+    @apply left-6;
+  }
 }
 
 .rightControl {
-  @apply bg-cover right-10 md:right-6;
+  @apply bg-cover right-10;
   background-image: url('public/cursor-right.png');
+
+  @screen md {
+    @apply right-6;
+  }
 }
 
 .control {

components/product/ProductView/ProductView.module.css

@@ -83,7 +83,7 @@
 }
 
 .wishlistButton {
-  @apply absolute z-30 top-6 right-0 bg-primary text-base w-10 h-10 flex items-center justify-center font-semibold leading-6 cursor-pointer;
+  @apply absolute z-30 top-6 right-0 bg-primary text-primary w-10 h-10 flex items-center justify-center font-semibold leading-6 cursor-pointer;
 
   @screen lg {
     @apply right-12 text-white bg-violet;

components/ui/Button/Button.module.css

@@ -1,16 +1,13 @@
 .root {
-  @apply text-accents-1 cursor-pointer inline-flex px-10 rounded-sm leading-6
-  bg-secondary transition ease-in-out duration-150 shadow-sm font-semibold
-  text-center justify-center uppercase py-4 uppercase text-center focus:outline-none
-  border border-transparent items-center;
+  @apply text-accents-1 cursor-pointer inline-flex px-10 rounded-sm leading-6 bg-secondary transition ease-in-out duration-150 shadow-sm font-semibold text-center justify-center uppercase py-4 uppercase text-center border border-transparent items-center;
 }
 
 .root:hover {
-  @apply bg-accents-0 text-base border border-secondary;
+  @apply bg-accents-0 text-primary border border-secondary;
 }
 
 .root:focus {
-  @apply shadow-outline;
+  @apply shadow-outline outline-none;
 }
 
 .root[data-active] {

components/ui/Grid/Grid.module.css

@@ -1,13 +1,18 @@
 .root {
   --row-height: calc(100vh - 80px - 56px);
-  @apply grid grid-cols-1 lg:grid-cols-3 lg:grid-rows-2 gap-0;
+  @apply grid grid-cols-1 gap-0;
+
+  @screen lg {
+    @apply grid-cols-3 grid-rows-2;
+  }
 
   & > * {
-    @apply row-span-1 lg:col-span-1 bg-transparent box-border overflow-hidden;
+    @apply row-span-1 bg-transparent box-border overflow-hidden;
     height: 500px;
     max-height: 800px;
 
     @screen lg {
+      @apply col-span-1;
       height: inherit;
     }
   }
@@ -30,8 +35,12 @@
 .layoutA {
   & > *:nth-child(6n + 1),
   & > *:nth-child(6n + 5) {
-    @apply row-span-2 lg:col-span-2;
+    @apply row-span-2;
     height: var(--row-height);
+
+    @screen lg {
+      @apply col-span-2;
+    }
   }
 
   &.filled {
@@ -57,8 +66,12 @@
 .layoutB {
   & > *:nth-child(6n + 2),
   & > *:nth-child(6n + 4) {
-    @apply row-span-2 lg:col-span-2;
+    @apply row-span-2;
     height: var(--row-height);
+
+    @screen lg {
+      @apply col-span-2;
+    }
   }
 
   &.filled {
@@ -83,8 +96,12 @@
 .layoutC {
   & > *:nth-child(12n + 1),
   & > *:nth-child(12n + 8) {
-    @apply row-span-2 lg:col-span-2;
+    @apply row-span-2;
     height: var(--row-height);
+
+    @screen lg {
+      @apply col-span-2;
+    }
   }
 
   &.filled {
@@ -107,8 +124,12 @@
 .layoutD {
   & > *:nth-child(12n + 2),
   & > *:nth-child(12n + 7) {
-    @apply row-span-2 lg:col-span-2;
+    @apply row-span-2;
     height: var(--row-height);
+
+    @screen lg {
+      @apply col-span-2;
+    }
   }
 
   &.filled {

components/ui/Input/Input.module.css

@@ -1,5 +1,7 @@
 .root {
-  @apply focus:outline-none bg-primary focus:shadow-outline-gray py-2 
-  px-6 w-full appearance-none transition duration-150 ease-in-out 
-  placeholder-accents-5 pr-10 border border-accents-3 text-accents-6;
+  @apply bg-primary py-2 px-6 w-full appearance-none transition duration-150 ease-in-out pr-10 border border-accents-3 text-accents-6;
+}
+
+.root:focus {
+  @apply outline-none shadow-outline-gray;
 }

components/ui/Text/Text.module.css

@@ -7,9 +7,9 @@
 }
 
 .pageHeading {
-  @apply pt-1 pb-4 text-2xl leading-7 font-bold text-base tracking-wide;
+  @apply pt-1 pb-4 text-2xl leading-7 font-bold tracking-wide;
 }
 
 .sectionHeading {
-  @apply pt-1 pb-2 text-base font-semibold leading-7 text-base tracking-wider uppercase border-b border-accents-2 mb-3;
+  @apply pt-1 pb-2 font-semibold leading-7 tracking-wider uppercase border-b border-accents-2 mb-3;
 }

components/ui/context.tsx

@@ -51,11 +51,7 @@ type Action =
     }
   | {
       type: 'SET_MODAL_VIEW'
-      view: 'LOGIN_VIEW'
-    }
-  | {
-      type: 'SET_MODAL_VIEW'
-      view: 'SIGNUP_VIEW'
+      view: MODAL_VIEWS
     }
 
 type MODAL_VIEWS = 'SIGNUP_VIEW' | 'LOGIN_VIEW' | 'FORGOT_VIEW'
@@ -161,10 +157,6 @@ export const UIProvider: FC = (props) => {
     closeToast,
   }
 
-  setTimeout(() => {
-    openToast()
-  }, 200)
-
   return <UIContext.Provider value={value} {...props} />
 }