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({