From 954760865b58f2883e193118e4b28d52866646e6 Mon Sep 17 00:00:00 2001 From: cond0r Date: Tue, 9 Feb 2021 09:15:38 +0200 Subject: [PATCH] Revert "Merge branch 'master' of https://github.com/vercel/commerce into agnostic" This reverts commit bf50965a39ef0b1b956461ebe62070809fbe1d63, reversing changes made to 0dad4ddedbf0bff2d0b5800ca469fda0073889ea. --- assets/base.css | 8 ++++-- assets/components.css | 2 +- components/common/Avatar/Avatar.tsx | 13 +++++++--- .../common/Searchbar/Searchbar.module.css | 2 +- components/common/UserNav/UserNav.module.css | 6 +---- .../ProductSlider/ProductSlider.module.css | 4 +-- components/ui/Button/Button.module.css | 2 +- components/ui/Input/Input.module.css | 2 +- components/ui/context.tsx | 14 ---------- lib/hooks/useUserAvatar.ts | 26 ------------------- lib/logger.ts | 18 +++++++++++++ pages/search.tsx | 6 ++--- tailwind.config.js | 3 ++- 13 files changed, 45 insertions(+), 61 deletions(-) delete mode 100644 lib/hooks/useUserAvatar.ts create mode 100644 lib/logger.ts diff --git a/assets/base.css b/assets/base.css index dfdaf1475..f854065ba 100644 --- a/assets/base.css +++ b/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; } } - diff --git a/assets/components.css b/assets/components.css index 8c4c5a357..ebebcc238 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 f78aa1d01..351a117ec 100644 --- a/components/common/Avatar/Avatar.tsx +++ b/components/common/Avatar/Avatar.tsx @@ -1,5 +1,5 @@ -import { FC, useRef, useEffect } from 'react' -import { useUserAvatar } from '@lib/hooks/useUserAvatar' +import { FC, useState, useMemo, useRef, useEffect } from 'react' +import { getRandomPairOfColors } from '@lib/colors' interface Props { className?: string @@ -7,13 +7,18 @@ interface Props { } const Avatar: FC = ({}) => { + const [bg] = useState(useMemo(() => getRandomPairOfColors, [])) let ref = useRef() as React.MutableRefObject - let { userAvatar } = useUserAvatar() + + useEffect(() => { + if (ref && ref.current) { + ref.current.style.backgroundImage = `linear-gradient(140deg, ${bg[0]}, ${bg[1]} 100%)` + } + }, [bg]) 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 071a14ef0..500483195 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-normal; + @apply outline-none shadow-outline-2; } .iconContainer { diff --git a/components/common/UserNav/UserNav.module.css b/components/common/UserNav/UserNav.module.css index cd1a6ce1f..a319e3dac 100644 --- a/components/common/UserNav/UserNav.module.css +++ b/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; - padding-left: 2.5px; - padding-right: 2.5px; - min-width: 1.25rem; - min-height: 1.25rem; + @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; } .avatarButton { diff --git a/components/product/ProductSlider/ProductSlider.module.css b/components/product/ProductSlider/ProductSlider.module.css index 259d15801..5ad48cc3d 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-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 { diff --git a/components/ui/Button/Button.module.css b/components/ui/Button/Button.module.css index 5b563f496..df2be8802 100644 --- a/components/ui/Button/Button.module.css +++ b/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] { diff --git a/components/ui/Input/Input.module.css b/components/ui/Input/Input.module.css index 9daee1418..9ace85277 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-normal; + @apply outline-none shadow-outline-gray; } diff --git a/components/ui/context.tsx b/components/ui/context.tsx index 013589941..206573858 100644 --- a/components/ui/context.tsx +++ b/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] ) diff --git a/lib/hooks/useUserAvatar.ts b/lib/hooks/useUserAvatar.ts deleted file mode 100644 index 840daae6d..000000000 --- a/lib/hooks/useUserAvatar.ts +++ /dev/null @@ -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, - } -} diff --git a/lib/logger.ts b/lib/logger.ts new file mode 100644 index 000000000..eeda2c325 --- /dev/null +++ b/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 diff --git a/pages/search.tsx b/pages/search.tsx index 6357232f0..64fea5600 100644 --- a/pages/search.tsx +++ b/pages/search.tsx @@ -96,7 +96,7 @@ export default function Search({