crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-18 07:26:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

More design updates

Browse Source
This commit is contained in:
okbel 2021-06-01 09:14:51 -03:00
parent 025a89bc73
commit 3bc8adfe29
11 changed files with 40 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
assets/base.css
View File

@ -22,17 +22,15 @@
--violet-light: #7048e8;
--accent-0: #fff;
--accent-05: #f8f9fa;
--accent-1: #f1f3f5;
--accent-2: #e9ecef;
--accent-3: #dee2e6;
--accent-4: #ced4da;
--accent-5: #adb5bd;
--accent-6: #868e96;
--accent-7: #495057;
--accent-8: #343a40;
--accent-9: #212529;
--accent-10: #000;
--accent-1: #fafafa;
--accent-2: #eaeaea;
--accent-3: #999999;
--accent-4: #888888;
--accent-5: #666666;
--accent-6: #444444;
--accent-7: #333333;
--accent-8: #111111;
--accent-9: #000;
--font-sans: -apple-system, system-ui, BlinkMacSystemFont, 'Helvetica Neue',
'Helvetica', sans-serif;
@ -52,18 +50,16 @@
--text-primary: white;
--text-secondary: black;
--accent-9: #fff;
--accent-8: #fafafa;
--accent-7: #eaeaea;
--accent-6: #999999;
--accent-5: #888888;
--accent-4: #666666;
--accent-3: #444444;
--accent-2: #333333;
--accent-1: #111111;
--accent-0: #000;
--accent-05: #212529;
--accent-1: #343a40;
--accent-2: #495057;
--accent-3: #868e96;
--accent-4: #adb5bd;
--accent-5: #ced4da;
--accent-6: #dee2e6;
--accent-7: #e9ecef;
--accent-8: #f1f3f5;
--accent-9: #f8f9fa;
--accent-10: #fff;
}
*,

4
components/cart/CartItem/CartItem.module.css
View File

@ -7,14 +7,14 @@
}
.actions {
@apply flex p-1 border-accent-3 border items-center justify-center w-12 text-accent-7;
@apply flex p-1 border-accent-2 border items-center justify-center w-12 text-accent-7;
transition-property: border-color, background, color, transform, box-shadow;
transition-duration: 0.15s;
transition-timing-function: ease;
}
.actions:hover {
@apply bg-accent-1 border-accent-4 text-accent-9;
@apply bg-accent-1 border-accent-3 text-accent-9;
transition: border-color;
z-index: 10;
}

2
components/cart/CartItem/CartItem.tsx
View File

@ -155,7 +155,7 @@ const CartItem = ({
<button className={s.actions} onClick={handleRemove}>
<Cross width={20} height={20} />
</button>
<label className="w-full border-accent-3 border ml-2">
<label className="w-full border-accent-2 border ml-2">
<input
type="number"
max={99}

11
components/cart/CartSidebarView/CartSidebarView.tsx
View File

@ -100,7 +100,7 @@ const CartSidebarView: FC = () => {
My Cart
</h2>
</Link>
<ul className="py-4 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accent-3 border-accent-3">
<ul className="py-4 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accent-2 border-accent-2">
{data!.lineItems.map((item: any) => (
<CartItem
key={item.id}
@ -132,13 +132,8 @@ const CartSidebarView: FC = () => {
</div>
<div>
{process.env.COMMERCE_CUSTOMCHECKOUT_ENABLED ? (
<Button
Component="a"
width="100%"
variant="ghost"
onClick={goToCheckout}
>
Continue to Checkout
<Button Component="a" width="100%" onClick={goToCheckout}>
Proceed to Checkout ({total})
</Button>
) : (
<Button href="/checkout" Component="a" width="100%">

4
components/product/ProductView/ProductView.tsx
View File

@ -117,7 +117,9 @@ const ProductView: FC<Props> = ({ product, relatedProducts }) => {
<section>
{product.options?.map((opt) => (
<div className="pb-4" key={opt.displayName}>
<h2 className="uppercase font-medium">{opt.displayName}</h2>
<h2 className="uppercase font-medium text-sm tracking-wide">
{opt.displayName}
</h2>
<div className="flex flex-row py-4">
{opt.values.map((v, i: number) => {
const active = (choices as any)[

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

@ -1,11 +1,13 @@
.swatch {
box-sizing: border-box;
composes: root from 'components/ui/Button/Button.module.css';
@apply h-12 w-12 bg-primary text-primary rounded-full mr-3 inline-flex
@apply h-10 w-10 bg-primary text-primary rounded-full mr-3 inline-flex
items-center justify-center cursor-pointer transition duration-150 ease-in-out
p-0 shadow-none border-gray-200 border box-border;
margin-right: calc(0.75rem - 1px);
overflow: hidden;
width: 48px;
height: 48px;
}
.swatch::before,

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

@ -1,13 +1,13 @@
.root {
@apply bg-secondary text-accent-1 cursor-pointer inline-flex
px-10 rounded-sm leading-6 transition ease-in-out duration-150
@apply bg-accent-9 text-accent-0 cursor-pointer inline-flex
px-10 py-4 rounded-sm leading-6 transition ease-in-out duration-150
shadow-sm text-center justify-center uppercase
py-4 border border-transparent items-center text-sm font-semibold
border border-transparent items-center text-sm font-semibold
tracking-wide;
}
.root:hover {
@apply bg-accent-0 text-primary border border-secondary;
@apply border-accent-9 bg-accent-6;
}
.root:focus {

5
components/ui/Collapse/Collapse.module.css
View File

@ -1,5 +1,5 @@
.root {
@apply border-b border-accent-2 py-4 px-2 flex flex-col;
@apply border-b border-accent-2 py-4 flex flex-col;
}
.header {
@ -11,11 +11,12 @@
}
.content {
@apply pt-3 overflow-hidden pl-9;
@apply pt-3 overflow-hidden pl-8;
}
.icon {
@apply mr-3 text-accent-6;
margin-left: -6px;
transition: transform 0.2s ease;
}

1
package.json
View File

@ -42,7 +42,6 @@
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-merge-refs": "^1.1.0",
"react-spring": "^9.2.1",
"react-ticker": "^1.2.2",
"react-use-measure": "^2.0.4",
"shopify-buy": "^2.11.0",

4
tsconfig.json
View File

@ -22,8 +22,8 @@
"@components/*": ["components/*"],
"@commerce": ["framework/commerce"],
"@commerce/*": ["framework/commerce/*"],
"@framework": ["framework/bigcommerce"],
"@framework/*": ["framework/bigcommerce/*"]
"@framework": ["framework/shopify"],
"@framework/*": ["framework/shopify/*"]
}
},
"include": ["next-env.d.ts", "**/*.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"],

54
yarn.lock
View File

@ -980,26 +980,6 @@
"@react-spring/shared" "~9.2.0"
"@react-spring/types" "~9.2.0"
"@react-spring/konva@~9.2.0":
version "9.2.1"
resolved "https://registry.yarnpkg.com/@react-spring/konva/-/konva-9.2.1.tgz#7ba9ad5d615961a7bfc60761333ee666c00b2ce5"
integrity sha512-GnvEXElYerpD7313hwqIEbsHXz18HgHAUGWe4XV6Sf+KHhCQvw/z97PJLD5KD6XU5MawaQTYkwvqvJ6eTLV0Nw==
dependencies:
"@react-spring/animated" "~9.2.0"
"@react-spring/core" "~9.2.0"
"@react-spring/shared" "~9.2.0"
"@react-spring/types" "~9.2.0"
"@react-spring/native@~9.2.0":
version "9.2.1"
resolved "https://registry.yarnpkg.com/@react-spring/native/-/native-9.2.1.tgz#be1aa591c90d25dac6b68a678b50d1cbb0e4e70a"
integrity sha512-sWum3JgFpmnpdVZKThpihl1X15oQF/zBiVTQ+csOJDBnB9jhW42WYu9r6ib9M2yxAelS17u7FnDCIfLZf7V1bg==
dependencies:
"@react-spring/animated" "~9.2.0"
"@react-spring/core" "~9.2.0"
"@react-spring/shared" "~9.2.0"
"@react-spring/types" "~9.2.0"
"@react-spring/shared@~9.2.0":
version "9.2.1"
resolved "https://registry.yarnpkg.com/@react-spring/shared/-/shared-9.2.1.tgz#90ccd02b8d0ad126e0614a3cddff90664f255192"
@ -1008,22 +988,12 @@
"@react-spring/types" "~9.2.0"
rafz "^0.1.13"
"@react-spring/three@~9.2.0":
version "9.2.1"
resolved "https://registry.yarnpkg.com/@react-spring/three/-/three-9.2.1.tgz#d8df125de9e8325b51ff308c58561a8683523c80"
integrity sha512-0gRz2y8G5szbtywvTDbaT3B+1Xseq5Yu2X02Ey8k18IksAncMZ/KFcRJIYFQn+7OlLVaoxPzXibSUNT4notWMg==
dependencies:
"@react-spring/animated" "~9.2.0"
"@react-spring/core" "~9.2.0"
"@react-spring/shared" "~9.2.0"
"@react-spring/types" "~9.2.0"
"@react-spring/types@~9.2.0":
version "9.2.1"
resolved "https://registry.yarnpkg.com/@react-spring/types/-/types-9.2.1.tgz#734bbc12b4db57ca55680fd4cb197bd6e0f6a8a9"
integrity sha512-UMXLNW1l/iJCRRAsTpeqgQYjims9j8QSSMbkgi1mFZytDuaQ6r6f9ngfLgx9uDW2VSdvoNdEqGM9abVDGc4E1g==
"@react-spring/web@^9.2.1", "@react-spring/web@~9.2.0":
"@react-spring/web@^9.2.1":
version "9.2.1"
resolved "https://registry.yarnpkg.com/@react-spring/web/-/web-9.2.1.tgz#aeb2427545e631e29d70f3ad38afa35da560f1c5"
integrity sha512-7YimWKLuHhUZhuDchfn4Yo631KqULWCgrDLOZBu0o4AZwVMFvguVY1g0Tpm5K+68Z7kJaS0n5pf8wlwtGIOs+w==
@ -1033,16 +1003,6 @@
"@react-spring/shared" "~9.2.0"
"@react-spring/types" "~9.2.0"
"@react-spring/zdog@~9.2.0":
version "9.2.1"
resolved "https://registry.yarnpkg.com/@react-spring/zdog/-/zdog-9.2.1.tgz#93a7c7ba15d215608cf7d222c7e50352a2a66b17"
integrity sha512-OjXoSo3/Lp8OKK0V3spyB8FWw0ttfwEdMlJyS1Ed8edLwbVv+60G6EqQT4S7M433R8W1M6Ck5f9fw0EedWsmhQ==
dependencies:
"@react-spring/animated" "~9.2.0"
"@react-spring/core" "~9.2.0"
"@react-spring/shared" "~9.2.0"
"@react-spring/types" "~9.2.0"
"@samverschueren/stream-to-observable@^0.3.0":
version "0.3.1"
resolved "https://registry.yarnpkg.com/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.1.tgz#a21117b19ee9be70c379ec1877537ef2e1c63301"
@ -5666,18 +5626,6 @@ react-refresh@0.8.3:
resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
react-spring@^9.2.1:
version "9.2.1"
resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-9.2.1.tgz#999ff52142fbf85180b79b3b7b9266e0d3539f8d"
integrity sha512-HLkEbuRvRtvAwkeqqwZXIEaKPPc17ViI5DYPtYTpgu2H9jmndm/kp1BfxRwpu5+m4ecGzUUX7RRNWEfwWY6oWA==
dependencies:
"@react-spring/core" "~9.2.0"
"@react-spring/konva" "~9.2.0"
"@react-spring/native" "~9.2.0"
"@react-spring/three" "~9.2.0"
"@react-spring/web" "~9.2.0"
"@react-spring/zdog" "~9.2.0"
react-ticker@^1.2.2:
version "1.2.2"
resolved "https://registry.yarnpkg.com/react-ticker/-/react-ticker-1.2.2.tgz#12cda5ff8266c6fe90ffcd8c58e12ba1596ddf24"