forked from crowetic/commerce
Merge branch 'master' of https://github.com/vercel/commerce into agnostic
This commit is contained in:
commit
bf50965a39
@ -3,7 +3,6 @@
|
|||||||
--primary-2: #f1f3f5;
|
--primary-2: #f1f3f5;
|
||||||
--secondary: #000000;
|
--secondary: #000000;
|
||||||
--secondary-2: #111;
|
--secondary-2: #111;
|
||||||
|
|
||||||
--selection: var(--cyan);
|
--selection: var(--cyan);
|
||||||
|
|
||||||
--text-base: #000000;
|
--text-base: #000000;
|
||||||
@ -13,18 +12,14 @@
|
|||||||
--hover: rgba(0, 0, 0, 0.075);
|
--hover: rgba(0, 0, 0, 0.075);
|
||||||
--hover-1: rgba(0, 0, 0, 0.15);
|
--hover-1: rgba(0, 0, 0, 0.15);
|
||||||
--hover-2: rgba(0, 0, 0, 0.25);
|
--hover-2: rgba(0, 0, 0, 0.25);
|
||||||
|
|
||||||
--cyan: #22b8cf;
|
--cyan: #22b8cf;
|
||||||
--green: #37b679;
|
--green: #37b679;
|
||||||
--red: #da3c3c;
|
--red: #da3c3c;
|
||||||
--pink: #e64980;
|
--pink: #e64980;
|
||||||
--purple: #f81ce5;
|
--purple: #f81ce5;
|
||||||
|
|
||||||
--blue: #0070f3;
|
--blue: #0070f3;
|
||||||
|
|
||||||
--violet-light: #7048e8;
|
|
||||||
--violet: #5f3dc4;
|
--violet: #5f3dc4;
|
||||||
|
--violet-light: #7048e8;
|
||||||
--accents-0: #f8f9fa;
|
--accents-0: #f8f9fa;
|
||||||
--accents-1: #f1f3f5;
|
--accents-1: #f1f3f5;
|
||||||
--accents-2: #e9ecef;
|
--accents-2: #e9ecef;
|
||||||
@ -132,3 +127,4 @@ a {
|
|||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,3 +1,3 @@
|
|||||||
.fit {
|
.fit {
|
||||||
min-height: calc(100vh - 88px);
|
min-height: calc(100vh - 88px);
|
||||||
}
|
}
|
@ -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 {
|
interface Props {
|
||||||
className?: string
|
className?: string
|
||||||
@ -7,18 +7,13 @@ interface Props {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const Avatar: FC<Props> = ({}) => {
|
const Avatar: FC<Props> = ({}) => {
|
||||||
const [bg] = useState(useMemo(() => getRandomPairOfColors, []))
|
|
||||||
let ref = useRef() as React.MutableRefObject<HTMLInputElement>
|
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 (
|
return (
|
||||||
<div
|
<div
|
||||||
ref={ref}
|
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"
|
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> */}
|
{/* Add an image - We're generating a gradient as placeholder <img></img> */}
|
||||||
|
@ -7,7 +7,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.input:focus {
|
.input:focus {
|
||||||
@apply outline-none shadow-outline-2;
|
@apply outline-none shadow-outline-normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.iconContainer {
|
.iconContainer {
|
||||||
|
@ -24,7 +24,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.bagCount {
|
.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 {
|
.avatarButton {
|
||||||
|
@ -15,7 +15,7 @@
|
|||||||
|
|
||||||
.leftControl:hover,
|
.leftControl:hover,
|
||||||
.rightControl:hover {
|
.rightControl:hover {
|
||||||
@apply outline-none shadow-outline-blue;
|
@apply outline-none shadow-outline-normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.leftControl {
|
.leftControl {
|
||||||
@ -70,7 +70,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.positionIndicator:focus .dot {
|
.positionIndicator:focus .dot {
|
||||||
@apply shadow-outline-blue;
|
@apply shadow-outline-normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.positionIndicatorActive .dot {
|
.positionIndicatorActive .dot {
|
||||||
|
@ -7,7 +7,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.root:focus {
|
.root:focus {
|
||||||
@apply shadow-outline outline-none;
|
@apply shadow-outline-normal outline-none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.root[data-active] {
|
.root[data-active] {
|
||||||
|
@ -3,5 +3,5 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.root:focus {
|
.root:focus {
|
||||||
@apply outline-none shadow-outline-gray;
|
@apply outline-none shadow-outline-normal;
|
||||||
}
|
}
|
||||||
|
@ -52,6 +52,10 @@ type Action =
|
|||||||
type: 'SET_MODAL_VIEW'
|
type: 'SET_MODAL_VIEW'
|
||||||
view: MODAL_VIEWS
|
view: MODAL_VIEWS
|
||||||
}
|
}
|
||||||
|
| {
|
||||||
|
type: 'SET_USER_AVATAR'
|
||||||
|
value: string
|
||||||
|
}
|
||||||
|
|
||||||
type MODAL_VIEWS = 'SIGNUP_VIEW' | 'LOGIN_VIEW' | 'FORGOT_VIEW'
|
type MODAL_VIEWS = 'SIGNUP_VIEW' | 'LOGIN_VIEW' | 'FORGOT_VIEW'
|
||||||
type ToastText = string
|
type ToastText = string
|
||||||
@ -123,6 +127,12 @@ function uiReducer(state: State, action: Action) {
|
|||||||
toastText: action.text,
|
toastText: action.text,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
case 'SET_USER_AVATAR': {
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
userAvatar: action.value,
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -147,6 +157,9 @@ export const UIProvider: FC = (props) => {
|
|||||||
const openToast = () => dispatch({ type: 'OPEN_TOAST' })
|
const openToast = () => dispatch({ type: 'OPEN_TOAST' })
|
||||||
const closeToast = () => dispatch({ type: 'CLOSE_TOAST' })
|
const closeToast = () => dispatch({ type: 'CLOSE_TOAST' })
|
||||||
|
|
||||||
|
const setUserAvatar = (value: string) =>
|
||||||
|
dispatch({ type: 'SET_USER_AVATAR', value })
|
||||||
|
|
||||||
const setModalView = (view: MODAL_VIEWS) =>
|
const setModalView = (view: MODAL_VIEWS) =>
|
||||||
dispatch({ type: 'SET_MODAL_VIEW', view })
|
dispatch({ type: 'SET_MODAL_VIEW', view })
|
||||||
|
|
||||||
@ -164,6 +177,7 @@ export const UIProvider: FC = (props) => {
|
|||||||
setModalView,
|
setModalView,
|
||||||
openToast,
|
openToast,
|
||||||
closeToast,
|
closeToast,
|
||||||
|
setUserAvatar,
|
||||||
}),
|
}),
|
||||||
[state]
|
[state]
|
||||||
)
|
)
|
||||||
|
26
lib/hooks/useUserAvatar.ts
Normal file
26
lib/hooks/useUserAvatar.ts
Normal file
@ -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,
|
||||||
|
}
|
||||||
|
}
|
@ -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
|
|
11
package.json
11
package.json
@ -21,7 +21,6 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@reach/portal": "^0.11.2",
|
"@reach/portal": "^0.11.2",
|
||||||
"@tailwindcss/ui": "^0.6.2",
|
|
||||||
"@vercel/fetch": "^6.1.0",
|
"@vercel/fetch": "^6.1.0",
|
||||||
"body-scroll-lock": "^3.1.5",
|
"body-scroll-lock": "^3.1.5",
|
||||||
"bowser": "^2.11.0",
|
"bowser": "^2.11.0",
|
||||||
@ -40,13 +39,13 @@
|
|||||||
"next-themes": "^0.0.4",
|
"next-themes": "^0.0.4",
|
||||||
"normalizr": "^3.6.1",
|
"normalizr": "^3.6.1",
|
||||||
"postcss-nesting": "^7.0.1",
|
"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-merge-refs": "^1.1.0",
|
||||||
"react-ticker": "^1.2.2",
|
"react-ticker": "^1.2.2",
|
||||||
"swr": "^0.4.0",
|
"swr": "^0.4.0",
|
||||||
"tabbable": "^5.1.5",
|
"tabbable": "^5.1.5",
|
||||||
"tailwindcss": "^1.9"
|
"tailwindcss": "^2.0.2"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@graphql-codegen/cli": "^1.20.0",
|
"@graphql-codegen/cli": "^1.20.0",
|
||||||
@ -56,8 +55,6 @@
|
|||||||
"@manifoldco/swagger-to-ts": "^2.1.0",
|
"@manifoldco/swagger-to-ts": "^2.1.0",
|
||||||
"@next/bundle-analyzer": "^10.0.1",
|
"@next/bundle-analyzer": "^10.0.1",
|
||||||
"@types/body-scroll-lock": "^2.6.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/classnames": "^2.2.10",
|
||||||
"@types/cookie": "^0.4.0",
|
"@types/cookie": "^0.4.0",
|
||||||
"@types/js-cookie": "^2.2.6",
|
"@types/js-cookie": "^2.2.6",
|
||||||
@ -66,8 +63,6 @@
|
|||||||
"@types/lodash.throttle": "^4.1.6",
|
"@types/lodash.throttle": "^4.1.6",
|
||||||
"@types/node": "^14.14.16",
|
"@types/node": "^14.14.16",
|
||||||
"@types/react": "^17.0.0",
|
"@types/react": "^17.0.0",
|
||||||
"bunyan": "^1.8.14",
|
|
||||||
"bunyan-prettystream": "^0.1.3",
|
|
||||||
"graphql": "^15.4.0",
|
"graphql": "^15.4.0",
|
||||||
"husky": "^4.3.8",
|
"husky": "^4.3.8",
|
||||||
"lint-staged": "^10.5.3",
|
"lint-staged": "^10.5.3",
|
||||||
|
@ -96,7 +96,7 @@ export default function Search({
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={(e) => handleClick(e, 'categories')}
|
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"
|
id="options-menu"
|
||||||
aria-haspopup="true"
|
aria-haspopup="true"
|
||||||
aria-expanded="true"
|
aria-expanded="true"
|
||||||
@ -195,7 +195,7 @@ export default function Search({
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={(e) => handleClick(e, 'brands')}
|
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"
|
id="options-menu"
|
||||||
aria-haspopup="true"
|
aria-haspopup="true"
|
||||||
aria-expanded="true"
|
aria-expanded="true"
|
||||||
@ -372,7 +372,7 @@ export default function Search({
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={(e) => handleClick(e, 'sort')}
|
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"
|
id="options-menu"
|
||||||
aria-haspopup="true"
|
aria-haspopup="true"
|
||||||
aria-expanded="true"
|
aria-expanded="true"
|
||||||
|
@ -51,7 +51,7 @@ module.exports = {
|
|||||||
secondary: 'var(--text-secondary)',
|
secondary: 'var(--text-secondary)',
|
||||||
},
|
},
|
||||||
boxShadow: {
|
boxShadow: {
|
||||||
'outline-2': '0 0 0 2px var(--accents-2)',
|
'outline-normal': '0 0 0 2px var(--accents-2)',
|
||||||
magical:
|
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',
|
'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')],
|
|
||||||
}
|
}
|
||||||
|
@ -7997,4 +7997,4 @@ yn@3.1.1:
|
|||||||
yocto-queue@^0.1.0:
|
yocto-queue@^0.1.0:
|
||||||
version "0.1.0"
|
version "0.1.0"
|
||||||
resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
|
resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
|
||||||
integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
|
integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
|
Loading…
x
Reference in New Issue
Block a user