From 04d79f1f7f4542e984f84f943d7d99b3a57605f5 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Wed, 14 Oct 2020 17:21:29 -0300 Subject: [PATCH 1/8] Loading State for Button --- .../product/ProductView/ProductView.tsx | 40 ++++++++++++++----- components/ui/Button/Button.module.css | 6 +-- components/ui/Button/Button.tsx | 11 ++++- .../ui/LoadingDots/LoadingDots.module.css | 32 +++++++++++++++ components/ui/LoadingDots/LoadingDots.tsx | 13 ++++++ components/ui/LoadingDots/index.ts | 1 + components/ui/Logo/index.ts | 1 - components/ui/index.ts | 13 +++--- tailwind.config.js | 7 +++- 9 files changed, 100 insertions(+), 24 deletions(-) create mode 100644 components/ui/LoadingDots/LoadingDots.module.css create mode 100644 components/ui/LoadingDots/LoadingDots.tsx create mode 100644 components/ui/LoadingDots/index.ts delete mode 100644 components/ui/Logo/index.ts diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx index 2eb132355..2348258df 100644 --- a/components/product/ProductView/ProductView.tsx +++ b/components/product/ProductView/ProductView.tsx @@ -4,7 +4,7 @@ import { FC, useState } from 'react' import s from './ProductView.module.css' import { Colors } from '@components/ui/types' import { useUI } from '@components/ui/context' -import { Button, Container } from '@components/ui' +import { Button, Container, LoadingDots } from '@components/ui' import { Swatch, ProductSlider } from '@components/product' import useAddItem from '@lib/bigcommerce/cart/use-add-item' import type { Product } from '@lib/bigcommerce/api/operations/get-product' @@ -25,18 +25,28 @@ const SIZES = ['s', 'm', 'l', 'xl', 'xxl'] const ProductView: FC = ({ product, className }) => { const addItem = useAddItem() const { openSidebar } = useUI() + const [choices, setChoices] = useState({ size: null, color: null, }) + const [loading, setLoading] = useState(false) + const addToCart = async () => { - // TODO: loading state by awating the promise - await addItem({ - productId: product.entityId, - variantId: product.variants.edges?.[0]?.node.entityId!, - }) - openSidebar() + setLoading(true) + + try { + await addItem({ + productId: product.entityId, + variantId: product.variants.edges?.[0]?.node.entityId!, + }) + openSidebar() + setLoading(false) + } catch (err) { + // Error err. + setLoading(false) + } } const activeSize = choices.size @@ -75,11 +85,16 @@ const ProductView: FC = ({ product, className }) => {
- {product.images.edges?.map((image) => ( - + {product.images.edges?.map((image, i) => ( + ))}
+
@@ -128,7 +143,12 @@ const ProductView: FC = ({ product, className }) => { />
-
diff --git a/components/ui/Button/Button.module.css b/components/ui/Button/Button.module.css index f60c71039..8e59fea27 100644 --- a/components/ui/Button/Button.module.css +++ b/components/ui/Button/Button.module.css @@ -2,7 +2,7 @@ @apply text-secondary cursor-pointer inline-flex px-10 rounded-sm leading-6 bg-secondary transition ease-in-out duration-150 shadow-sm font-semibold text-center justify-center uppercase py-4 uppercase text-center focus:outline-none - border border-transparent; + border border-transparent items-center; } .root:hover { @@ -17,6 +17,6 @@ @apply bg-gray-600; } -s.filled { - @apply text-white bg-black; +.loading { + @apply bg-accent-1 text-accent-3 border-accent-2 cursor-not-allowed; } diff --git a/components/ui/Button/Button.tsx b/components/ui/Button/Button.tsx index c5046a3fd..c453aaf1d 100644 --- a/components/ui/Button/Button.tsx +++ b/components/ui/Button/Button.tsx @@ -8,7 +8,7 @@ import React, { import mergeRefs from 'react-merge-refs' import { useButton } from 'react-aria' import s from './Button.module.css' - +import { LoadingDots } from '@components/ui' export interface ButtonProps extends ButtonHTMLAttributes { href?: string className?: string @@ -17,6 +17,7 @@ export interface ButtonProps extends ButtonHTMLAttributes { type?: 'submit' | 'reset' | 'button' Component?: string | JSXElementConstructor width?: string | number + loading?: boolean } const Button: React.FC = forwardRef((props, buttonRef) => { @@ -30,6 +31,7 @@ const Button: React.FC = forwardRef((props, buttonRef) => { disabled, width, Component = 'button', + loading = false, ...rest } = props const ref = useRef(null) @@ -47,7 +49,7 @@ const Button: React.FC = forwardRef((props, buttonRef) => { const rootClassName = cn( s.root, { - [s.filled]: variant === 'filled', + [s.loading]: loading, }, className ) @@ -66,6 +68,11 @@ const Button: React.FC = forwardRef((props, buttonRef) => { data-active={isPressed ? '' : undefined} > {children} + {loading && ( + + + + )} ) }) diff --git a/components/ui/LoadingDots/LoadingDots.module.css b/components/ui/LoadingDots/LoadingDots.module.css new file mode 100644 index 000000000..0a8fe5bf0 --- /dev/null +++ b/components/ui/LoadingDots/LoadingDots.module.css @@ -0,0 +1,32 @@ +@keyframes blink { + 0% { + opacity: 0.2; + } + 20% { + opacity: 1; + } + 100% { + opacity: 0.2; + } +} + +.loading { + @apply inline-flex text-center items-center leading-7; + + & span { + @apply bg-accent-6 rounded-full h-2 w-2; + animation-name: blink; + animation-duration: 1.4s; + animation-iteration-count: infinite; + animation-fill-mode: both; + margin: 0 2px; + + &:nth-of-type(2) { + animation-delay: 0.2s; + } + + &:nth-of-type(3) { + animation-delay: 0.4s; + } + } +} diff --git a/components/ui/LoadingDots/LoadingDots.tsx b/components/ui/LoadingDots/LoadingDots.tsx new file mode 100644 index 000000000..eb26c7340 --- /dev/null +++ b/components/ui/LoadingDots/LoadingDots.tsx @@ -0,0 +1,13 @@ +import s from './LoadingDots.module.css' + +const LoadingDots: React.FC = () => { + return ( + + + + + + ) +} + +export default LoadingDots diff --git a/components/ui/LoadingDots/index.ts b/components/ui/LoadingDots/index.ts new file mode 100644 index 000000000..63df282bf --- /dev/null +++ b/components/ui/LoadingDots/index.ts @@ -0,0 +1 @@ +export { default } from './LoadingDots' diff --git a/components/ui/Logo/index.ts b/components/ui/Logo/index.ts deleted file mode 100644 index 93dce23b4..000000000 --- a/components/ui/Logo/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Logo' diff --git a/components/ui/index.ts b/components/ui/index.ts index a5a097c62..db12144e4 100644 --- a/components/ui/index.ts +++ b/components/ui/index.ts @@ -1,7 +1,8 @@ -export { default as Button } from './Button' -export { default as Container } from './Container' -export { default as Sidebar } from './Sidebar' -export { default as Logo } from './Logo' -export { default as Grid } from './Grid' -export { default as Marquee } from './Marquee' export { default as Hero } from './Hero' +export { default as Logo } from './LoadingDots' +export { default as Grid } from './Grid' +export { default as Button } from './Button' +export { default as Sidebar } from './Sidebar' +export { default as Marquee } from './Marquee' +export { default as Container } from './Container' +export { default as LoadingDots } from './LoadingDots' diff --git a/tailwind.config.js b/tailwind.config.js index 8cbc245b8..8a4316ecd 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -15,9 +15,12 @@ module.exports = { }, colors: { 'accent-1': '#FAFAFA', - 'accent-2': '#F1F3F5', + 'accent-2': '#eaeaea', + 'accent-3': '#999999', 'accent-4': '#888', - 'accent-6': '#E5E5E5', + 'accent-5': '#666666', + 'accent-6': '#444444', + 'accent-7': '#333333', 'accent-8': '#111111', violet: '#7928CA', pink: '#FF0080', From 4d2d3dc6d1fe42774eeb37ca046e7fc7ec4a1b2f Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Wed, 14 Oct 2020 17:22:37 -0300 Subject: [PATCH 2/8] Loading State for Button --- components/ui/Logo/index.ts | 1 + components/ui/index.ts | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) create mode 100644 components/ui/Logo/index.ts diff --git a/components/ui/Logo/index.ts b/components/ui/Logo/index.ts new file mode 100644 index 000000000..93dce23b4 --- /dev/null +++ b/components/ui/Logo/index.ts @@ -0,0 +1 @@ +export { default } from './Logo' diff --git a/components/ui/index.ts b/components/ui/index.ts index db12144e4..f2731829f 100644 --- a/components/ui/index.ts +++ b/components/ui/index.ts @@ -1,5 +1,5 @@ export { default as Hero } from './Hero' -export { default as Logo } from './LoadingDots' +export { default as Logo } from './Logo' export { default as Grid } from './Grid' export { default as Button } from './Button' export { default as Sidebar } from './Sidebar' From 8e364c6d20c3ab64ef49a98a23c06b65241f80e8 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Wed, 14 Oct 2020 17:40:23 -0300 Subject: [PATCH 3/8] changes --- components/cart/CartItem/CartItem.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/components/cart/CartItem/CartItem.tsx b/components/cart/CartItem/CartItem.tsx index 77f3d719e..3ccd62834 100644 --- a/components/cart/CartItem/CartItem.tsx +++ b/components/cart/CartItem/CartItem.tsx @@ -53,9 +53,16 @@ const CartItem = ({ } }, [item.quantity]) + console.log(item) + return ( -
  • -
    +
  • +
    + +
    {item.name}
    From e6ba938f382ed36ab336bce441c2c92e532591a6 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Wed, 14 Oct 2020 17:50:36 -0300 Subject: [PATCH 4/8] changes --- components/cart/CartItem/CartItem.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/cart/CartItem/CartItem.tsx b/components/cart/CartItem/CartItem.tsx index 3ccd62834..758fec2d5 100644 --- a/components/cart/CartItem/CartItem.tsx +++ b/components/cart/CartItem/CartItem.tsx @@ -56,10 +56,10 @@ const CartItem = ({ console.log(item) return ( -
  • -
    +
  • +
    From 0c8100ddcb4ca48637dd0958c5e3abc30744738c Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Wed, 14 Oct 2020 17:56:50 -0300 Subject: [PATCH 5/8] changes --- components/cart/CartItem/CartItem.module.css | 8 ++++++++ components/cart/CartItem/CartItem.tsx | 9 +++------ 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/components/cart/CartItem/CartItem.module.css b/components/cart/CartItem/CartItem.module.css index 6165b05ed..c0830b924 100644 --- a/components/cart/CartItem/CartItem.module.css +++ b/components/cart/CartItem/CartItem.module.css @@ -7,3 +7,11 @@ .quantity::-webkit-inner-spin-button { @apply appearance-none m-0; } + +.productImage { + position: absolute; + top: 0; + left: -10px; + top: 15px; + transform: scale(1.9); +} diff --git a/components/cart/CartItem/CartItem.tsx b/components/cart/CartItem/CartItem.tsx index 758fec2d5..7d092f6aa 100644 --- a/components/cart/CartItem/CartItem.tsx +++ b/components/cart/CartItem/CartItem.tsx @@ -3,7 +3,7 @@ import usePrice from '@lib/bigcommerce/use-price' import useUpdateItem from '@lib/bigcommerce/cart/use-update-item' import useRemoveItem from '@lib/bigcommerce/cart/use-remove-item' import { ChangeEvent, useEffect, useState } from 'react' -import styles from './CartItem.module.css' +import s from './CartItem.module.css' const CartItem = ({ item, @@ -58,10 +58,7 @@ const CartItem = ({ return (
  • - +
    {item.name} @@ -73,7 +70,7 @@ const CartItem = ({ type="number" max={99} min={0} - className={styles.quantity} + className={s.quantity} value={quantity} onChange={handleQuantity} onBlur={handleBlur} From 7b3de99805a3a66c0178091f9b2a6f9ebf8e9d2a Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Wed, 14 Oct 2020 19:26:14 -0300 Subject: [PATCH 6/8] Changes --- components/cart/CartSidebarView/CartSidebarView.tsx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/components/cart/CartSidebarView/CartSidebarView.tsx b/components/cart/CartSidebarView/CartSidebarView.tsx index 0212209d2..92fd2685b 100644 --- a/components/cart/CartSidebarView/CartSidebarView.tsx +++ b/components/cart/CartSidebarView/CartSidebarView.tsx @@ -61,13 +61,16 @@ const CartSidebarView: FC = () => { {isEmpty ? ( -
    - - +
    + + -

    - Your cart is empty. +

    + Your cart is empty

    +

    + Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake. +

    ) : error ? (
    From 74b14ef2a4c9147f1a09b05ff12dcedc93c7036a Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Wed, 14 Oct 2020 19:29:38 -0300 Subject: [PATCH 7/8] Changes --- components/core/Avatar/Avatar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/core/Avatar/Avatar.tsx b/components/core/Avatar/Avatar.tsx index 20ec7454c..7c7f224c7 100644 --- a/components/core/Avatar/Avatar.tsx +++ b/components/core/Avatar/Avatar.tsx @@ -8,7 +8,7 @@ interface Props { } function getRandomPairOfColors() { - const colors = ['#f33', '#7928ca', '#50e3c2', '#7928ca', '#7928CA'] + const colors = ['#37B679', '#DA3C3C', '#3291FF', '#7928CA', '#79FFE1'] const getRandomIdx = () => random(0, colors.length - 1) let idx = getRandomIdx() let idx2 = getRandomIdx() From 8f90757edaf249d270334900b9d5a32e6490cf9e Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Wed, 14 Oct 2020 19:36:59 -0300 Subject: [PATCH 8/8] Changes --- assets/global.css | 31 ++++++++++++++++--- .../cart/CartSidebarView/CartSidebarView.tsx | 2 +- components/core/Avatar/Avatar.tsx | 2 +- .../core/Searchbar/Searchbar.module.css | 2 +- components/ui/Button/Button.module.css | 2 +- .../ui/LoadingDots/LoadingDots.module.css | 2 +- tailwind.config.js | 16 +++++----- 7 files changed, 40 insertions(+), 17 deletions(-) diff --git a/assets/global.css b/assets/global.css index eccfd84e7..625d5bf65 100644 --- a/assets/global.css +++ b/assets/global.css @@ -5,11 +5,24 @@ --bg-primary-hover: rgba(0, 0, 0, 0.075); --bg-primary-accent: #f1f3f5; --bg-secondary: black; - --text-primary: black; --text-secondary: white; - --text-default: #252f3f; + + --cyan: #50e3c2; + --purple: #f81ce5; + + --foreground: #000; + --background: #fff; + --selection: var(--cyan); + --accents-1: #fafafa; + --accents-2: #eaeaea; + --accents-3: #999999; + --accents-4: #888888; + --accents-5: #666666; + --accents-6: #444444; + --accents-7: #333333; + --accents-8: #111111; } [data-theme='dark'] { @@ -17,11 +30,21 @@ --bg-secondary: white; --bg-primary-hover: rgba(255, 255, 255, 0.075); --bg-primary-accent: #111; - --text-primary: white; --text-secondary: black; - --text-default: white; + + --foreground: #fff; + --background: #000; + --selection: var(--purple); + --accents-8: #fafafa; + --accents-7: #eaeaea; + --accents-6: #999999; + --accents-5: #888888; + --accents-4: #666666; + --accents-3: #444444; + --accents-2: #333333; + --accents-1: #111111; } .fit { diff --git a/components/cart/CartSidebarView/CartSidebarView.tsx b/components/cart/CartSidebarView/CartSidebarView.tsx index 92fd2685b..b63471c38 100644 --- a/components/cart/CartSidebarView/CartSidebarView.tsx +++ b/components/cart/CartSidebarView/CartSidebarView.tsx @@ -68,7 +68,7 @@ const CartSidebarView: FC = () => {

    Your cart is empty

    -

    +

    Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.

    diff --git a/components/core/Avatar/Avatar.tsx b/components/core/Avatar/Avatar.tsx index 7c7f224c7..9dca68e46 100644 --- a/components/core/Avatar/Avatar.tsx +++ b/components/core/Avatar/Avatar.tsx @@ -27,7 +27,7 @@ const Avatar: FC = ({}) => { return (