Updates (#192)

* userAvatar

* Avatar background

* Changes

* Removing unused dependencies

* Count Bag small and for bigger numbers

* decresed bundle size

assets/base.css

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

components/common/Avatar/Avatar.tsx

@@ -1,5 +1,5 @@
-import { FC, useState, useMemo, useRef, useEffect } from 'react'
+import { FC, useRef, useEffect } from 'react'
-import { getRandomPairOfColors } from '@lib/colors'
+import { useUserAvatar } from '@lib/hooks/useUserAvatar'
 
 interface Props {
   className?: string
@@ -7,18 +7,13 @@ 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-2;
+  @apply outline-none shadow-outline-normal;
 }
 
 .iconContainer {

components/common/UserNav/UserNav.module.css

@@ -24,7 +24,11 @@
 }
 
 .bagCount {
-  @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;
+  @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;
+  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-blue;
+  @apply outline-none shadow-outline-normal;
 }
 
 .leftControl {
@@ -70,7 +70,7 @@
 }
 
 .positionIndicator:focus .dot {
-  @apply shadow-outline-blue;
+  @apply shadow-outline-normal;
 }
 
 .positionIndicatorActive .dot {

components/ui/Button/Button.module.css

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

components/ui/Input/Input.module.css

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

components/ui/context.tsx

@@ -52,6 +52,10 @@ 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
@@ -123,6 +127,12 @@ function uiReducer(state: State, action: Action) {
         toastText: action.text,
       }
     }
+    case 'SET_USER_AVATAR': {
+      return {
+        ...state,
+        userAvatar: action.value,
+      }
+    }
   }
 }
 
@@ -147,6 +157,8 @@ 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 })
 
@@ -164,6 +176,7 @@ export const UIProvider: FC = (props) => {
       setModalView,
       openToast,
       closeToast,
+      setUserAvatar
     }),
     [state]
   )

lib/hooks/useUserAvatar.ts

@@ -0,0 +1,26 @@
+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

@@ -1,18 +0,0 @@
-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

package.json

@@ -45,7 +45,6 @@
   },
   "dependencies": {
     "@reach/portal": "^0.11.2",
-    "@tailwindcss/ui": "^0.6.2",
     "@vercel/fetch": "^6.1.0",
     "body-scroll-lock": "^3.1.5",
     "bowser": "^2.11.0",
@@ -57,17 +56,18 @@
     "lodash.debounce": "^4.0.8",
     "lodash.random": "^3.2.0",
     "lodash.throttle": "^4.1.1",
-    "next": "^10.0.5-canary.11",
+    "next": "^10.0.7-canary.3",
     "next-seo": "^4.11.0",
     "next-themes": "^0.0.4",
+    "postcss": "^8.2.4",
     "postcss-nesting": "^7.0.1",
-    "react": "^16.14.0",
+    "react": "^17.0.1",
-    "react-dom": "^16.14.0",
+    "react-dom": "^17.0.1",
     "react-merge-refs": "^1.1.0",
     "react-ticker": "^1.2.2",
     "swr": "^0.4.0",
     "tabbable": "^5.1.5",
-    "tailwindcss": "^1.9"
+    "tailwindcss": "^2.0.2"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "^1.20.0",
@@ -77,8 +77,6 @@
     "@manifoldco/swagger-to-ts": "^2.1.0",
     "@next/bundle-analyzer": "^10.0.1",
     "@types/body-scroll-lock": "^2.6.1",
-    "@types/bunyan": "^1.8.6",
-    "@types/bunyan-prettystream": "^0.1.31",
     "@types/classnames": "^2.2.10",
     "@types/cookie": "^0.4.0",
     "@types/js-cookie": "^2.2.6",
@@ -87,8 +85,6 @@
     "@types/lodash.throttle": "^4.1.6",
     "@types/node": "^14.14.16",
     "@types/react": "^17.0.0",
-    "bunyan": "^1.8.14",
-    "bunyan-prettystream": "^0.1.3",
     "graphql": "^15.4.0",
     "next-unused": "^0.0.3",
     "postcss-flexbugs-fixes": "^4.2.1",

pages/search.tsx

@@ -91,7 +91,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-blue 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-normal active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150"
                   id="options-menu"
                   aria-haspopup="true"
                   aria-expanded="true"
@@ -190,7 +190,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-blue 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-normal active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150"
                   id="options-menu"
                   aria-haspopup="true"
                   aria-expanded="true"
@@ -365,7 +365,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-blue 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-normal 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-2': '0 0 0 2px var(--accents-2)',
+        'outline-normal': '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,5 +63,4 @@ module.exports = {
       },
     },
   },
-  plugins: [require('@tailwindcss/ui')],
 }