4
0
forked from crowetic/commerce

Merge branch 'master' of https://github.com/vercel/commerce into agnostic

This commit is contained in:
cond0r 2021-02-09 08:56:19 +02:00
commit bf50965a39
15 changed files with 65 additions and 54 deletions

View File

@ -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;
} }
} }

View File

@ -1,3 +1,3 @@
.fit { .fit {
min-height: calc(100vh - 88px); min-height: calc(100vh - 88px);
} }

View File

@ -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> */}

View File

@ -7,7 +7,7 @@
} }
.input:focus { .input:focus {
@apply outline-none shadow-outline-2; @apply outline-none shadow-outline-normal;
} }
.iconContainer { .iconContainer {

View File

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

View File

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

View File

@ -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] {

View File

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

View File

@ -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]
) )

View 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,
}
}

View File

@ -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

View File

@ -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",

View File

@ -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"

View File

@ -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')],
} }

View File

@ -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==