normalize transition durations

components/core/Avatar/Avatar.tsx

@@ -12,7 +12,7 @@ const Avatar: FC<Props> = ({}) => {
 
   return (
     <div
-      className="inline-block h-8 w-8 rounded-full border-2 border-accents-2"
+      className="inline-block h-8 w-8 rounded-full border-2 border-accents-2 transition-colors duration-150"
       style={{
         backgroundImage: `linear-gradient(140deg, ${bg[0]}, ${bg[1]} 100%)`,
       }}

components/core/Featurebar/Featurebar.tsx

@@ -18,7 +18,7 @@ const Featurebar: FC<Props> = ({
   hide,
 }) => {
   const rootClassName = cn(
-    'transition-transform transform duration-500 ease-out p-6 bg-primary text-base text-sm md:flex flex-row justify-center items-center font-medium fixed bottom-0 w-full z-10',
+    'transition-all transform duration-150 ease-out p-6 bg-primary text-base text-sm md:flex flex-row justify-center items-center font-medium fixed bottom-0 w-full z-10',
     { 'translate-y-full': hide },
     className
   )

components/core/Footer/Footer.module.css

@@ -0,0 +1,3 @@
+.copyright {
+  font-size: 16px;
+}

components/core/Footer/Footer.tsx

@@ -4,6 +4,7 @@ import Link from 'next/link'
 import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
 import getSlug from '@utils/get-slug'
 import { Logo } from '@components/ui'
+import s from './Footer.module.css'
 
 interface Props {
   className?: string
@@ -36,7 +37,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
           {sitePages.map((page) => (
             <li key={page.url} className="py-3 md:py-0 md:pb-4">
               <Link href={page.url!}>
-                <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
+                <a className="text-gray-400 hover:text-white transition ease-in-out duration-150">
                   {page.name}
                 </a>
               </Link>
@@ -48,7 +49,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
           {legalPages.map((page) => (
             <li key={page.url} className="py-3 md:py-0 md:pb-4">
               <Link href={page.url!}>
-                <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
+                <a className="text-gray-400 hover:text-white transition ease-in-out duration-150">
                   {page.name}
                 </a>
               </Link>
@@ -56,7 +57,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
           ))}
         </ul>
 
-        <small className="text-base">
+        <small className={cn('text-white', s.copyright)}>
           &copy; 2020 ACME, Inc. All rights reserved.
         </small>
       </footer>

components/core/Layout/Layout.tsx

@@ -39,10 +39,8 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
       <div className={cn(s.root)}>
         <header
           className={cn(
-            'sticky top-0 bg-primary z-40 transition-shadow duration-200',
+            'sticky top-0 bg-primary z-40 transition-all duration-150',
-            {
+            { 'shadow-magical': hasScrolled }
-              'shadow-magical': hasScrolled,
-            }
           )}
         >
           <Container>

components/core/Navbar/Navbar.module.css

@@ -1,3 +1,3 @@
 .link {
-  @apply group text-base 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-100 cursor-pointer;
+  @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;
 }

components/core/Searchbar/Searchbar.tsx

@@ -17,7 +17,7 @@ const Searchbar: FC<Props> = ({ className }) => {
   return (
     <div
       className={cn(
-        'relative text-sm bg-accents-1 text-base w-full',
+        'relative text-sm bg-accents-1 text-base w-full transition-colors duration-150',
         className
       )}
     >

components/core/Toggle/Toggle.tsx

@@ -9,7 +9,11 @@ interface Props {
 
 const Toggle: FC<Props> = ({ className, checked, onChange }) => {
   return (
-    <Switch checked={checked} onChange={onChange}>
+    <Switch
+      checked={checked}
+      onChange={onChange}
+      className="focus:outline-none"
+    >
       <span
         role="checkbox"
         aria-checked="false"

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;
+  @apply mr-6 cursor-pointer relative transition ease-in-out duration-150 text-base flex items-center;
   &:hover {
     @apply text-accents-8;
   }

components/product/ProductCard/ProductCard.module.css

@@ -58,7 +58,7 @@
 .productTitle > span,
 .productPrice,
 .wishlistButton {
-  @apply transition ease-in-out duration-300;
+  @apply transition ease-in-out duration-150;
 }
 
 .squareBg {

components/product/Swatch/Swatch.module.css

@@ -1,6 +1,6 @@
 .root {
   @apply h-12 w-12 bg-primary text-primary rounded-full mr-3 inline-flex
-  items-center justify-center cursor-pointer transition duration-100 ease-in-out
+  items-center justify-center cursor-pointer transition duration-150 ease-in-out
   p-0 shadow-none border-gray-200 border box-border;
 
   & > span {
@@ -13,7 +13,7 @@
 }
 
 .color {
-  @apply text-black transition duration-100 ease-in-out;
+  @apply text-black transition duration-150 ease-in-out;
 
   &:hover {
     @apply text-black;

pages/index.tsx

@@ -63,7 +63,7 @@ export default function Home({
   }, [])
 
   return (
-    <div className="mt-3">
+    <div>
       <Grid>
         {featured.slice(0, 3).map(({ node }) => (
           <ProductCard key={node.path} product={node} />
@@ -96,7 +96,7 @@ export default function Home({
       </Marquee>
       <div className="py-12 flex flex-row w-full px-12">
         <div className="pr-3 w-48 relative">
-          <div className="sticky top-2">
+          <div className="sticky top-32">
             <ul className="mb-10">
               <li className="py-1 text-base font-bold tracking-wide">
                 All Categories