diff --git a/assets/base.css b/assets/base.css index f854065ba..dfdaf1475 100644 --- a/assets/base.css +++ b/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; } } + diff --git a/assets/components.css b/assets/components.css index ebebcc238..8c4c5a357 100644 --- a/assets/components.css +++ b/assets/components.css @@ -1,3 +1,3 @@ .fit { min-height: calc(100vh - 88px); -} +} \ No newline at end of file diff --git a/components/common/Avatar/Avatar.tsx b/components/common/Avatar/Avatar.tsx index 351a117ec..f78aa1d01 100644 --- a/components/common/Avatar/Avatar.tsx +++ b/components/common/Avatar/Avatar.tsx @@ -1,5 +1,5 @@ -import { FC, useState, useMemo, useRef, useEffect } from 'react' -import { getRandomPairOfColors } from '@lib/colors' +import { FC, useRef, useEffect } from 'react' +import { useUserAvatar } from '@lib/hooks/useUserAvatar' interface Props { className?: string @@ -7,18 +7,13 @@ interface Props { } const Avatar: FC = ({}) => { - const [bg] = useState(useMemo(() => getRandomPairOfColors, [])) let ref = useRef() as React.MutableRefObject - - useEffect(() => { - if (ref && ref.current) { - ref.current.style.backgroundImage = `linear-gradient(140deg, ${bg[0]}, ${bg[1]} 100%)` - } - }, [bg]) + let { userAvatar } = useUserAvatar() return (
{/* Add an image - We're generating a gradient as placeholder */} diff --git a/components/common/Searchbar/Searchbar.module.css b/components/common/Searchbar/Searchbar.module.css index 500483195..071a14ef0 100644 --- a/components/common/Searchbar/Searchbar.module.css +++ b/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 { diff --git a/components/common/UserNav/UserNav.module.css b/components/common/UserNav/UserNav.module.css index a319e3dac..cd1a6ce1f 100644 --- a/components/common/UserNav/UserNav.module.css +++ b/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 { diff --git a/components/product/ProductSlider/ProductSlider.module.css b/components/product/ProductSlider/ProductSlider.module.css index 5ad48cc3d..259d15801 100644 --- a/components/product/ProductSlider/ProductSlider.module.css +++ b/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 { diff --git a/components/ui/Button/Button.module.css b/components/ui/Button/Button.module.css index df2be8802..5b563f496 100644 --- a/components/ui/Button/Button.module.css +++ b/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] { diff --git a/components/ui/Input/Input.module.css b/components/ui/Input/Input.module.css index 9ace85277..9daee1418 100644 --- a/components/ui/Input/Input.module.css +++ b/components/ui/Input/Input.module.css @@ -3,5 +3,5 @@ } .root:focus { - @apply outline-none shadow-outline-gray; + @apply outline-none shadow-outline-normal; } diff --git a/components/ui/context.tsx b/components/ui/context.tsx index 206573858..5746d1ca0 100644 --- a/components/ui/context.tsx +++ b/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] ) diff --git a/lib/hooks/useUserAvatar.ts b/lib/hooks/useUserAvatar.ts new file mode 100644 index 000000000..840daae6d --- /dev/null +++ b/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, + } +} diff --git a/lib/logger.ts b/lib/logger.ts deleted file mode 100644 index eeda2c325..000000000 --- a/lib/logger.ts +++ /dev/null @@ -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 diff --git a/package.json b/package.json index b90bf4cf8..8db481e69 100644 --- a/package.json +++ b/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-dom": "^16.14.0", + "react": "^17.0.1", + "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", diff --git a/pages/search.tsx b/pages/search.tsx index 88a6354cd..06d29d1b1 100644 --- a/pages/search.tsx +++ b/pages/search.tsx @@ -91,7 +91,7 @@ export default function Search({