Revert "Merge branch 'master' of https://github.com/vercel/commerce into agnostic"

This reverts commit bf50965a39ef0b1b956461ebe62070809fbe1d63, reversing
changes made to 0dad4ddedbf0bff2d0b5800ca469fda0073889ea.

assets/base.css

@@ -3,6 +3,7 @@
   --primary-2: #f1f3f5;
   --secondary: #000000;
   --secondary-2: #111;
+
   --selection: var(--cyan);
 
   --text-base: #000000;
@@ -12,14 +13,18 @@
   --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;
   --pink: #e64980;
   --purple: #f81ce5;
+
   --blue: #0070f3;
-  --violet: #5f3dc4;
+
   --violet-light: #7048e8;
+  --violet: #5f3dc4;
+
   --accents-0: #f8f9fa;
   --accents-1: #f1f3f5;
   --accents-2: #e9ecef;
@@ -127,4 +132,3 @@ a {
     opacity: 1;
   }
 }
-

assets/components.css

@@ -1,3 +1,3 @@
 .fit {
   min-height: calc(100vh - 88px);
-}
+}

components/common/Avatar/Avatar.tsx

@@ -1,5 +1,5 @@
-import { FC, useRef, useEffect } from 'react'
+import { FC, useState, useMemo, useRef, useEffect } from 'react'
-import { useUserAvatar } from '@lib/hooks/useUserAvatar'
+import { getRandomPairOfColors } from '@lib/colors'
 
 interface Props {
   className?: string
@@ -7,13 +7,18 @@ interface Props {
 }
 
 const Avatar: FC<Props> = ({}) => {
+  const [bg] = useState(useMemo(() => getRandomPairOfColors, []))
   let ref = useRef() as React.MutableRefObject<HTMLInputElement>
-  let { userAvatar } = useUserAvatar()
+
+  useEffect(() => {
+    if (ref && ref.current) {
+      ref.current.style.backgroundImage = `linear-gradient(140deg, ${bg[0]}, ${bg[1]} 100%)`
+    }
+  }, [bg])
 
   return (
     <div
       ref={ref}
-      style={{ backgroundImage: userAvatar }}
       className="inline-block h-8 w-8 rounded-full border-2 border-primary hover:border-secondary focus:border-secondary transition linear-out duration-150"
     >
       {/* Add an image - We're generating a gradient as placeholder  <img></img> */}

components/common/Searchbar/Searchbar.module.css

@@ -7,7 +7,7 @@
 }
 
 .input:focus {
-  @apply outline-none shadow-outline-normal;
+  @apply outline-none shadow-outline-2;
 }
 
 .iconContainer {

components/common/UserNav/UserNav.module.css

@@ -24,11 +24,7 @@
 }
 
 .bagCount {
-  @apply border border-accents-1 bg-secondary text-secondary absolute rounded-full right-3 top-3 flex items-center justify-center font-bold text-xs;
+  @apply border border-accents-1 bg-secondary text-secondary h-4 w-4 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 {

components/product/ProductSlider/ProductSlider.module.css

@@ -15,7 +15,7 @@
 
 .leftControl:hover,
 .rightControl:hover {
-  @apply outline-none shadow-outline-normal;
+  @apply outline-none shadow-outline-blue;
 }
 
 .leftControl {
@@ -70,7 +70,7 @@
 }
 
 .positionIndicator:focus .dot {
-  @apply shadow-outline-normal;
+  @apply shadow-outline-blue;
 }
 
 .positionIndicatorActive .dot {

components/ui/Button/Button.module.css

@@ -7,7 +7,7 @@
 }
 
 .root:focus {
-  @apply shadow-outline-normal outline-none;
+  @apply shadow-outline outline-none;
 }
 
 .root[data-active] {

components/ui/Input/Input.module.css

@@ -3,5 +3,5 @@
 }
 
 .root:focus {
-  @apply outline-none shadow-outline-normal;
+  @apply outline-none shadow-outline-gray;
 }

components/ui/context.tsx

@@ -52,10 +52,6 @@ type Action =
       type: 'SET_MODAL_VIEW'
       view: MODAL_VIEWS
     }
-  | {
-      type: 'SET_USER_AVATAR'
-      value: string
-    }
 
 type MODAL_VIEWS = 'SIGNUP_VIEW' | 'LOGIN_VIEW' | 'FORGOT_VIEW'
 type ToastText = string
@@ -127,12 +123,6 @@ function uiReducer(state: State, action: Action) {
         toastText: action.text,
       }
     }
-    case 'SET_USER_AVATAR': {
-      return {
-        ...state,
-        userAvatar: action.value,
-      }
-    }
   }
 }
 
@@ -157,9 +147,6 @@ export const UIProvider: FC = (props) => {
   const openToast = () => dispatch({ type: 'OPEN_TOAST' })
   const closeToast = () => dispatch({ type: 'CLOSE_TOAST' })
 
-  const setUserAvatar = (value: string) =>
-    dispatch({ type: 'SET_USER_AVATAR', value })
-
   const setModalView = (view: MODAL_VIEWS) =>
     dispatch({ type: 'SET_MODAL_VIEW', view })
 
@@ -177,7 +164,6 @@ export const UIProvider: FC = (props) => {
       setModalView,
       openToast,
       closeToast,
-      setUserAvatar,
     }),
     [state]
   )

lib/hooks/useUserAvatar.ts

@@ -1,26 +0,0 @@
-import { useEffect } from 'react'
-import { useUI } from '@components/ui/context'
-import { getRandomPairOfColors } from '@lib/colors'
-
-export const useUserAvatar = (name = 'userAvatar') => {
-  const { userAvatar, setUserAvatar } = useUI()
-
-  useEffect(() => {
-    if (!userAvatar && localStorage.getItem(name)) {
-      // Get bg from localStorage and push it to the context.
-      setUserAvatar(localStorage.getItem(name))
-    }
-    if (!localStorage.getItem(name)) {
-      // bg not set locally, generating one, setting localStorage and context to persist.
-      const bg = getRandomPairOfColors()
-      const value = `linear-gradient(140deg, ${bg[0]}, ${bg[1]} 100%)`
-      localStorage.setItem(name, value)
-      setUserAvatar(value)
-    }
-  }, [])
-
-  return {
-    userAvatar,
-    setUserAvatar,
-  }
-}

lib/logger.ts

@@ -0,0 +1,18 @@
+import bunyan from 'bunyan'
+import PrettyStream from 'bunyan-prettystream'
+
+const prettyStdOut = new PrettyStream()
+
+const log = bunyan.createLogger({
+  name: 'Next.js - Commerce',
+  level: 'debug',
+  streams: [
+    {
+      level: 'debug',
+      type: 'raw',
+      stream: prettyStdOut,
+    },
+  ],
+})
+
+export default log

pages/search.tsx

@@ -96,7 +96,7 @@ export default function Search({
                 <button
                   type="button"
                   onClick={(e) => handleClick(e, 'categories')}
-                  className="flex justify-between w-full rounded-sm border border-gray-300 px-4 py-3 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-normal active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150"
+                  className="flex justify-between w-full rounded-sm border border-gray-300 px-4 py-3 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150"
                   id="options-menu"
                   aria-haspopup="true"
                   aria-expanded="true"
@@ -195,7 +195,7 @@ export default function Search({
                 <button
                   type="button"
                   onClick={(e) => handleClick(e, 'brands')}
-                  className="flex justify-between w-full rounded-sm border border-gray-300 px-4 py-3 bg-white text-sm leading-5 font-medium text-gray-900 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-normal active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150"
+                  className="flex justify-between w-full rounded-sm border border-gray-300 px-4 py-3 bg-white text-sm leading-5 font-medium text-gray-900 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150"
                   id="options-menu"
                   aria-haspopup="true"
                   aria-expanded="true"
@@ -372,7 +372,7 @@ export default function Search({
                 <button
                   type="button"
                   onClick={(e) => handleClick(e, 'sort')}
-                  className="flex justify-between w-full rounded-sm border border-gray-300 px-4 py-3 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-normal active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150"
+                  className="flex justify-between w-full rounded-sm border border-gray-300 px-4 py-3 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150"
                   id="options-menu"
                   aria-haspopup="true"
                   aria-expanded="true"

tailwind.config.js

@@ -51,7 +51,7 @@ module.exports = {
         secondary: 'var(--text-secondary)',
       },
       boxShadow: {
-        'outline-normal': '0 0 0 2px var(--accents-2)',
+        'outline-2': '0 0 0 2px var(--accents-2)',
         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',
       },
@@ -63,4 +63,5 @@ module.exports = {
       },
     },
   },
+  plugins: [require('@tailwindcss/ui')],
 }