crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-03-14 22:42:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
This reverts commit bf50965a39ef0b1b956461ebe62070809fbe1d63, reversing
changes made to 0dad4ddedbf0bff2d0b5800ca469fda0073889ea.
This commit is contained in:
cond0r 2021-02-09 09:15:38 +02:00
parent 65af7d55d1
commit 954760865b
13 changed files with 45 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
assets/base.css
View File

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

2
assets/components.css
View File

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

13
components/common/Avatar/Avatar.tsx
View File

@ -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<Props> = ({}) => {
const [bg] = useState(useMemo(() => getRandomPairOfColors, []))
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 (
<div
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"
>
{/* Add an image - We're generating a gradient as placeholder <img></img> */}

2
components/common/Searchbar/Searchbar.module.css
View File

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

6
components/common/UserNav/UserNav.module.css
View File

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

4
components/product/ProductSlider/ProductSlider.module.css
View File

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

2
components/ui/Button/Button.module.css
View File

@ -7,7 +7,7 @@
}
.root:focus {
@apply shadow-outline-normal outline-none;
@apply shadow-outline outline-none;
}
.root[data-active] {

2
components/ui/Input/Input.module.css
View File

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

14
components/ui/context.tsx
View File

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

26
lib/hooks/useUserAvatar.ts
View File

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

18
lib/logger.ts Normal file
View File

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

6
pages/search.tsx
View File

@ -96,7 +96,7 @@ export default function Search({
<button
type="button"
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-normal 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-blue active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150"
id="options-menu"
aria-haspopup="true"
aria-expanded="true"
@ -195,7 +195,7 @@ export default function Search({
<button
type="button"
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-normal 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-blue active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150"
id="options-menu"
aria-haspopup="true"
aria-expanded="true"
@ -372,7 +372,7 @@ export default function Search({
<button
type="button"
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-normal 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-blue active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150"
id="options-menu"
aria-haspopup="true"
aria-expanded="true"

3
tailwind.config.js
View File

@ -51,7 +51,7 @@ module.exports = {
secondary: 'var(--text-secondary)',
},
boxShadow: {
'outline-normal': '0 0 0 2px var(--accents-2)',
'outline-2': '0 0 0 2px var(--accents-2)',
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',
},
@ -63,4 +63,5 @@ module.exports = {
},
},
},
plugins: [require('@tailwindcss/ui')],
}