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

UI Changes

Browse Source
This commit is contained in:
Belen Curcio 2020-10-20 10:31:40 -03:00
parent e2dd854f10
commit 8de36f7301
5 changed files with 11902 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
components/product/Swatch/Swatch.module.css
View File

@ -1,13 +1,32 @@
.root {
@apply h-12 w-12 bg-primary text-primary rounded-full mr-3 inline-flex
items-center justify-center cursor-pointer transition duration-100 ease-in-out
p-0 shadow-none border-gray-200 border box-border text-black;
p-0 shadow-none border-gray-200 border box-border;
& > span {
@apply absolute;
}
&:hover {
@apply transform scale-110 bg-hover;
}
}
.active.size {
@apply border-accents-9 border-2;
.color {
@apply text-black transition duration-100 ease-in-out;
&:hover {
@apply text-black;
}
&.dark,
&.dark:hover {
color: white !important;
}
}
.root:hover {
@apply transform scale-110 bg-hover;
.active {
&.size {
@apply border-accents-9 border-2;
}
}

11
components/product/Swatch/Swatch.tsx
View File

@ -15,7 +15,7 @@ interface Props {
const Swatch: FC<Props & ButtonProps> = ({
className,
color,
color = '',
label,
variant = 'size',
active,
@ -23,13 +23,14 @@ const Swatch: FC<Props & ButtonProps> = ({
}) => {
variant = variant?.toLowerCase()
label = label?.toLowerCase()
const isDarkBg = isDark(color)
const rootClassName = cn(
s.root,
{
[s.active]: active,
[s.size]: variant === 'size',
[s.color]: color,
[s.dark]: color ? isDark(color) : false,
},
className
)
@ -41,11 +42,7 @@ const Swatch: FC<Props & ButtonProps> = ({
{...props}
>
{variant === 'color' && active && (
<span
className={cn('absolute', {
'text-white': isDarkBg,
})}
>
<span>
<Check />
</span>
)}

11839
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

6
package.json
View File

@ -32,14 +32,14 @@
"cookie": "^0.4.1",
"js-cookie": "^2.2.1",
"lodash.debounce": "^4.0.8",
"next": "^9.5.6-canary.4",
"next": "^9.5.5",
"next-seo": "^4.11.0",
"next-themes": "^0.0.4",
"nextjs-progressbar": "^0.0.6",
"postcss-nesting": "^7.0.1",
"react": "^16.13.1",
"react": "^16.14.0",
"react-aria": "^3.0.0",
"react-dom": "^16.13.1",
"react-dom": "^16.14.0",
"react-icons": "^3.11.0",
"react-merge-refs": "^1.1.0",
"react-swipeable-views": "^0.13.9",

64
yarn.lock
View File

@ -1432,20 +1432,20 @@
meow "^7.0.0"
prettier "^2.0.5"
"@next/env@9.5.6-canary.4":
version "9.5.6-canary.4"
resolved "https://registry.yarnpkg.com/@next/env/-/env-9.5.6-canary.4.tgz#785956d1e2d26e25377a2dcafbd3fe785cd88c35"
integrity sha512-c+JrotEtdgcaF6m4xSZ6D7eY4NWSDBsqcaLwkKAXh+pSEHfH2eKnZv7cRIaR3s7Ll37gE/RNfXGVC2l43vCcuw==
"@next/env@9.5.5":
version "9.5.5"
resolved "https://registry.yarnpkg.com/@next/env/-/env-9.5.5.tgz#db993649ec6e619e34a36de90dc2baa52fc5280f"
integrity sha512-N9wdjU6XoqLqNQWtrGiWtp1SUuJsYK1cNrZ24A6YD+4w5CNV5SkZX6aewKZCCLP5Y8UNfTij2FkJiSYUfBjX8g==
"@next/polyfill-module@9.5.6-canary.4":
version "9.5.6-canary.4"
resolved "https://registry.yarnpkg.com/@next/polyfill-module/-/polyfill-module-9.5.6-canary.4.tgz#6144ee81ae42aa44905f6c2b864ff5be19c67c38"
integrity sha512-r+kAXpF8AjVZGanJBwveCR5GCqnNIjA0WBsotat4MP+KKQwrptocRYsP+eZZo7gyhHEwSMdMag2NWahqjW+Vlg==
"@next/polyfill-module@9.5.5":
version "9.5.5"
resolved "https://registry.yarnpkg.com/@next/polyfill-module/-/polyfill-module-9.5.5.tgz#d9c65679a66664ab4859078f58997113c9d01f10"
integrity sha512-itqYFeHo3yN4ccpHq2uNFC2UVQm12K6DxUVwYdui9MJiiueT0pSGb2laYEjf/G5+vVq7M2vb+DkjkOkPMBVfeg==
"@next/react-dev-overlay@9.5.6-canary.4":
version "9.5.6-canary.4"
resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-9.5.6-canary.4.tgz#2218f9a9d5874e838d24178f657ec6dd8e1aa961"
integrity sha512-zYKkkdWi2rSyWYnOn7BEAQeZwOP2O6wHC4A/nB2YdRBDvD9p3qLawmribuiQ7vspPmAIgv2JgQ8DauC5YQU7DA==
"@next/react-dev-overlay@9.5.5":
version "9.5.5"
resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-9.5.5.tgz#11b36813d75c43b7bd9d5e478bded1ed5391d03a"
integrity sha512-B1nDANxjXr2oyohv+tX0OXZTmJtO5qEWmisNPGnqQ2Z32IixfaAgyNYVuCVf20ap6EUz5elhgNUwRIFh/e26mQ==
dependencies:
"@babel/code-frame" "7.10.4"
ally.js "1.4.1"
@ -1458,10 +1458,10 @@
stacktrace-parser "0.1.10"
strip-ansi "6.0.0"
"@next/react-refresh-utils@9.5.6-canary.4":
version "9.5.6-canary.4"
resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-9.5.6-canary.4.tgz#098a55714d906248ef46e9a1c077a1dc6e231331"
integrity sha512-hxSF3/lWX/a+6vPLViklLK6DNDzRzd8T/EUJpkUgLdwdHnABKFB6p9m1qvdGuqBQug2RNDcLQy7oKucy42tpVQ==
"@next/react-refresh-utils@9.5.5":
version "9.5.5"
resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-9.5.5.tgz#fe559b5ca51c038cb7840e0d669a6d7ef01fe4eb"
integrity sha512-Gz5z0+ID+KAGto6Tkgv1a340damEw3HG6ANLKwNi5/QSHqQ3JUAVxMuhz3qnL54505I777evpzL89ofWEMIWKw==
"@nodelib/fs.scandir@2.1.3":
version "2.1.3"
@ -5919,10 +5919,10 @@ next-tick@~1.0.0:
resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
integrity sha1-yobR/ogoFpsBICCOPchCS524NCw=
next@^9.5.6-canary.4:
version "9.5.6-canary.4"
resolved "https://registry.yarnpkg.com/next/-/next-9.5.6-canary.4.tgz#af3ed55845f6005ac155f7c5d9d21b7493be7141"
integrity sha512-sd29wpQer1Ha9EWpvrBvN6XXmLtJnR5JWAyYnlBmrA835BolN0cQw6++sOGcdTJZV5+ZWbhTEzBVOUTKsSLd5w==
next@^9.5.5:
version "9.5.5"
resolved "https://registry.yarnpkg.com/next/-/next-9.5.5.tgz#37a37095e7c877ed6c94ba82e34ab9ed02b4eb33"
integrity sha512-KF4MIdTYeI6YIGODNw27w9HGzCll4CXbUpkP6MNvyoHlpsunx8ybkQHm/hYa7lWMozmsn58LwaXJOhe4bSrI0g==
dependencies:
"@ampproject/toolbox-optimizer" "2.6.0"
"@babel/code-frame" "7.10.4"
@ -5943,10 +5943,10 @@ next@^9.5.6-canary.4:
"@babel/runtime" "7.11.2"
"@babel/types" "7.11.5"
"@hapi/accept" "5.0.1"
"@next/env" "9.5.6-canary.4"
"@next/polyfill-module" "9.5.6-canary.4"
"@next/react-dev-overlay" "9.5.6-canary.4"
"@next/react-refresh-utils" "9.5.6-canary.4"
"@next/env" "9.5.5"
"@next/polyfill-module" "9.5.5"
"@next/react-dev-overlay" "9.5.5"
"@next/react-refresh-utils" "9.5.5"
ast-types "0.13.2"
babel-plugin-transform-define "2.0.0"
babel-plugin-transform-react-remove-prop-types "0.4.24"
@ -6966,10 +6966,10 @@ react-aria@^3.0.0:
"@react-aria/utils" "^3.3.0"
"@react-aria/visually-hidden" "^3.2.1"
react-dom@^16.13.1:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f"
integrity sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==
react-dom@^16.14.0:
version "16.14.0"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.14.0.tgz#7ad838ec29a777fb3c75c3a190f661cf92ab8b89"
integrity sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"
@ -7063,10 +7063,10 @@ react-ticker@^1.2.2:
resolved "https://registry.yarnpkg.com/react-ticker/-/react-ticker-1.2.2.tgz#12cda5ff8266c6fe90ffcd8c58e12ba1596ddf24"
integrity sha512-PXUujoPJvajxwOfosuuujlrBUrjgGp4FB4haWFOI25ujhMppW4SuLkiOdQ9AylrWN3yTHWdk2kbQWe3n9SjFGA==
react@^16.13.1:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==
react@^16.14.0:
version "16.14.0"
resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"