From 3e0a185f84a090702d1cdad3b63c8d3a148efaa0 Mon Sep 17 00:00:00 2001 From: Bel Curcio Date: Fri, 4 Jun 2021 11:33:36 -0300 Subject: [PATCH 1/8] latest --- .../shopify/product/get-all-product-paths.ts | 42 ------------------- framework/shopify/product/get-all-products.ts | 40 ------------------ framework/shopify/product/get-product.ts | 32 -------------- 3 files changed, 114 deletions(-) delete mode 100644 framework/shopify/product/get-all-product-paths.ts delete mode 100644 framework/shopify/product/get-all-products.ts delete mode 100644 framework/shopify/product/get-product.ts diff --git a/framework/shopify/product/get-all-product-paths.ts b/framework/shopify/product/get-all-product-paths.ts deleted file mode 100644 index 4431d1e53..000000000 --- a/framework/shopify/product/get-all-product-paths.ts +++ /dev/null @@ -1,42 +0,0 @@ -import { Product } from '@commerce/types' -import { getConfig, ShopifyConfig } from '../api' -import fetchAllProducts from '../api/utils/fetch-all-products' -import { ProductEdge } from '../schema' -import getAllProductsPathsQuery from '../utils/queries/get-all-products-paths-query' - -type ProductPath = { - path: string -} - -export type ProductPathNode = { - node: ProductPath -} - -type ReturnType = { - products: ProductPathNode[] -} - -const getAllProductPaths = async (options?: { - variables?: any - config?: ShopifyConfig - preview?: boolean -}): Promise => { - let { config, variables = { first: 250 } } = options ?? {} - config = getConfig(config) - - const products = await fetchAllProducts({ - config, - query: getAllProductsPathsQuery, - variables, - }) - - return { - products: products?.map(({ node: { handle } }: ProductEdge) => ({ - node: { - path: `/${handle}`, - }, - })), - } -} - -export default getAllProductPaths diff --git a/framework/shopify/product/get-all-products.ts b/framework/shopify/product/get-all-products.ts deleted file mode 100644 index 14e486563..000000000 --- a/framework/shopify/product/get-all-products.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { GraphQLFetcherResult } from '@commerce/api' -import { getConfig, ShopifyConfig } from '../api' -import { ProductEdge } from '../schema' -import { getAllProductsQuery } from '../utils/queries' -import { normalizeProduct } from '../utils/normalize' -import { Product } from '@commerce/types' - -type Variables = { - first?: number - field?: string -} - -type ReturnType = { - products: Product[] -} - -const getAllProducts = async (options: { - variables?: Variables - config?: ShopifyConfig - preview?: boolean -}): Promise => { - let { config, variables = { first: 250 } } = options ?? {} - config = getConfig(config) - - const { data }: GraphQLFetcherResult = await config.fetch( - getAllProductsQuery, - { variables } - ) - - const products = - data.products?.edges?.map(({ node: p }: ProductEdge) => - normalizeProduct(p) - ) ?? [] - - return { - products, - } -} - -export default getAllProducts diff --git a/framework/shopify/product/get-product.ts b/framework/shopify/product/get-product.ts deleted file mode 100644 index 047cd92f8..000000000 --- a/framework/shopify/product/get-product.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { GraphQLFetcherResult } from '@commerce/api' -import { getConfig, ShopifyConfig } from '../api' -import { normalizeProduct, getProductQuery } from '../utils' - -type Variables = { - slug: string -} - -type ReturnType = { - product: any -} - -const getProduct = async (options: { - variables: Variables - config: ShopifyConfig - preview?: boolean -}): Promise => { - let { config, variables } = options ?? {} - config = getConfig(config) - - const { data }: GraphQLFetcherResult = await config.fetch(getProductQuery, { - variables, - }) - - const { productByHandle } = data - - return { - product: productByHandle ? normalizeProduct(productByHandle) : null, - } -} - -export default getProduct From fe324696d78cdcc301264a28adb786790cfab4ab Mon Sep 17 00:00:00 2001 From: Bel Curcio Date: Fri, 4 Jun 2021 11:45:13 -0300 Subject: [PATCH 2/8] Refactor and Renaming some UI Props --- components/ui/Container/Container.tsx | 9 +++++++-- components/ui/Grid/Grid.tsx | 4 ++-- components/ui/Hero/Hero.tsx | 4 ++-- components/ui/Input/Input.tsx | 4 ++-- components/ui/Marquee/Marquee.tsx | 4 ++-- components/ui/Modal/Modal.tsx | 4 ++-- components/ui/Quantifier/Quantifier.module.css | 2 ++ components/ui/Quantifier/Quantifier.tsx | 10 ++++++++++ components/ui/Quantifier/index.ts | 2 ++ components/ui/Sidebar/Sidebar.tsx | 4 ++-- components/ui/Skeleton/Skeleton.tsx | 4 ++-- components/ui/Text/Text.tsx | 4 ++-- 12 files changed, 37 insertions(+), 18 deletions(-) create mode 100644 components/ui/Quantifier/Quantifier.module.css create mode 100644 components/ui/Quantifier/Quantifier.tsx create mode 100644 components/ui/Quantifier/index.ts diff --git a/components/ui/Container/Container.tsx b/components/ui/Container/Container.tsx index 7b281a2e4..058a75305 100644 --- a/components/ui/Container/Container.tsx +++ b/components/ui/Container/Container.tsx @@ -1,14 +1,19 @@ import cn from 'classnames' import React, { FC } from 'react' -interface Props { +interface ContainerProps { className?: string children?: any el?: HTMLElement clean?: boolean } -const Container: FC = ({ children, className, el = 'div', clean }) => { +const Container: FC = ({ + children, + className, + el = 'div', + clean, +}) => { const rootClassName = cn(className, { 'mx-auto max-w-8xl px-6': !clean, }) diff --git a/components/ui/Grid/Grid.tsx b/components/ui/Grid/Grid.tsx index 8ca247609..55ca78277 100644 --- a/components/ui/Grid/Grid.tsx +++ b/components/ui/Grid/Grid.tsx @@ -2,14 +2,14 @@ import cn from 'classnames' import { FC, ReactNode, Component } from 'react' import s from './Grid.module.css' -interface Props { +interface GridProps { className?: string children?: ReactNode[] | Component[] | any[] layout?: 'A' | 'B' | 'C' | 'D' | 'normal' variant?: 'default' | 'filled' } -const Grid: FC = ({ +const Grid: FC = ({ className, layout = 'A', children, diff --git a/components/ui/Hero/Hero.tsx b/components/ui/Hero/Hero.tsx index 2e1f124ae..95f371e97 100644 --- a/components/ui/Hero/Hero.tsx +++ b/components/ui/Hero/Hero.tsx @@ -3,13 +3,13 @@ import { Container } from '@components/ui' import { RightArrow } from '@components/icons' import s from './Hero.module.css' import Link from 'next/link' -interface Props { +interface HeroProps { className?: string headline: string description: string } -const Hero: FC = ({ headline, description }) => { +const Hero: FC = ({ headline, description }) => { return (
diff --git a/components/ui/Input/Input.tsx b/components/ui/Input/Input.tsx index dc2f04a8d..e630728b2 100644 --- a/components/ui/Input/Input.tsx +++ b/components/ui/Input/Input.tsx @@ -2,12 +2,12 @@ import cn from 'classnames' import s from './Input.module.css' import React, { InputHTMLAttributes } from 'react' -export interface Props extends InputHTMLAttributes { +export interface InputProps extends InputHTMLAttributes { className?: string onChange?: (...args: any[]) => any } -const Input: React.FC = (props) => { +const Input: React.FC = (props) => { const { className, children, onChange, ...rest } = props const rootClassName = cn(s.root, {}, className) diff --git a/components/ui/Marquee/Marquee.tsx b/components/ui/Marquee/Marquee.tsx index 163f29a34..168a72e7d 100644 --- a/components/ui/Marquee/Marquee.tsx +++ b/components/ui/Marquee/Marquee.tsx @@ -3,13 +3,13 @@ import s from './Marquee.module.css' import { FC, ReactNode, Component } from 'react' import Ticker from 'react-ticker' -interface Props { +interface MarqueeProps { className?: string children?: ReactNode[] | Component[] | any[] variant?: 'primary' | 'secondary' } -const Marquee: FC = ({ +const Marquee: FC = ({ className = '', children, variant = 'primary', diff --git a/components/ui/Modal/Modal.tsx b/components/ui/Modal/Modal.tsx index 300a99192..785b98ecd 100644 --- a/components/ui/Modal/Modal.tsx +++ b/components/ui/Modal/Modal.tsx @@ -8,7 +8,7 @@ import { clearAllBodyScrollLocks, } from 'body-scroll-lock' import FocusTrap from '@lib/focus-trap' -interface Props { +interface ModalProps { className?: string children?: any open?: boolean @@ -16,7 +16,7 @@ interface Props { onEnter?: () => void | null } -const Modal: FC = ({ children, open, onClose, onEnter = null }) => { +const Modal: FC = ({ children, open, onClose, onEnter = null }) => { const ref = useRef() as React.MutableRefObject const handleKey = useCallback( diff --git a/components/ui/Quantifier/Quantifier.module.css b/components/ui/Quantifier/Quantifier.module.css new file mode 100644 index 000000000..c3a2af639 --- /dev/null +++ b/components/ui/Quantifier/Quantifier.module.css @@ -0,0 +1,2 @@ +.root { +} diff --git a/components/ui/Quantifier/Quantifier.tsx b/components/ui/Quantifier/Quantifier.tsx new file mode 100644 index 000000000..5f1bcb62c --- /dev/null +++ b/components/ui/Quantifier/Quantifier.tsx @@ -0,0 +1,10 @@ +import React, { FC } from 'react' +import s from './Quantifier.module.css' + +export interface QuantifierProps {} + +const Quantifier: FC = ({}) => { + return
+} + +export default Quantifier diff --git a/components/ui/Quantifier/index.ts b/components/ui/Quantifier/index.ts new file mode 100644 index 000000000..c9a2fdb29 --- /dev/null +++ b/components/ui/Quantifier/index.ts @@ -0,0 +1,2 @@ +export { default } from './Quantifier' +export * from './Quantifier' diff --git a/components/ui/Sidebar/Sidebar.tsx b/components/ui/Sidebar/Sidebar.tsx index c894ac035..200d6441e 100644 --- a/components/ui/Sidebar/Sidebar.tsx +++ b/components/ui/Sidebar/Sidebar.tsx @@ -7,13 +7,13 @@ import { clearAllBodyScrollLocks, } from 'body-scroll-lock' -interface Props { +interface SidebarProps { children: any open: boolean onClose: () => void } -const Sidebar: FC = ({ children, open = false, onClose }) => { +const Sidebar: FC = ({ children, open = false, onClose }) => { const ref = useRef() as React.MutableRefObject useEffect(() => { diff --git a/components/ui/Skeleton/Skeleton.tsx b/components/ui/Skeleton/Skeleton.tsx index 153024f18..9d7e668b6 100644 --- a/components/ui/Skeleton/Skeleton.tsx +++ b/components/ui/Skeleton/Skeleton.tsx @@ -3,7 +3,7 @@ import cn from 'classnames' import px from '@lib/to-pixels' import s from './Skeleton.module.css' -interface Props { +interface SkeletonProps { width?: string | number height?: string | number boxHeight?: string | number @@ -13,7 +13,7 @@ interface Props { className?: string } -const Skeleton: React.FC = ({ +const Skeleton: React.FC = ({ style, width, height, diff --git a/components/ui/Text/Text.tsx b/components/ui/Text/Text.tsx index 0ca71da9a..6106c209a 100644 --- a/components/ui/Text/Text.tsx +++ b/components/ui/Text/Text.tsx @@ -6,7 +6,7 @@ import React, { import cn from 'classnames' import s from './Text.module.css' -interface Props { +interface TextProps { variant?: Variant className?: string style?: CSSProperties @@ -17,7 +17,7 @@ interface Props { type Variant = 'heading' | 'body' | 'pageHeading' | 'sectionHeading' -const Text: FunctionComponent = ({ +const Text: FunctionComponent = ({ style, className = '', variant = 'body', From f8f8cb349474d4411603e86e339ed8d64ef980ab Mon Sep 17 00:00:00 2001 From: Bel Curcio Date: Fri, 4 Jun 2021 14:38:26 -0300 Subject: [PATCH 3/8] Adding Quantity Component --- components/cart/CartItem/CartItem.module.css | 17 ---- components/cart/CartItem/CartItem.tsx | 83 +++++-------------- .../ui/Quantifier/Quantifier.module.css | 2 - components/ui/Quantifier/Quantifier.tsx | 10 --- components/ui/Quantifier/index.ts | 2 - components/ui/Quantity/Quantity.module.css | 22 +++++ components/ui/Quantity/Quantity.tsx | 62 ++++++++++++++ components/ui/Quantity/index.ts | 2 + components/ui/index.ts | 1 + 9 files changed, 108 insertions(+), 93 deletions(-) delete mode 100644 components/ui/Quantifier/Quantifier.module.css delete mode 100644 components/ui/Quantifier/Quantifier.tsx delete mode 100644 components/ui/Quantifier/index.ts create mode 100644 components/ui/Quantity/Quantity.module.css create mode 100644 components/ui/Quantity/Quantity.tsx create mode 100644 components/ui/Quantity/index.ts diff --git a/components/cart/CartItem/CartItem.module.css b/components/cart/CartItem/CartItem.module.css index feffa0f3a..af094ba99 100644 --- a/components/cart/CartItem/CartItem.module.css +++ b/components/cart/CartItem/CartItem.module.css @@ -6,23 +6,6 @@ padding-top: 0; } -.actions { - @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-3 text-accent-9; - transition: border-color; - z-index: 10; -} - -.actions:focus { - @apply bg-accent-2 outline-none; -} - .quantity { appearance: textfield; @apply w-8 border-accent-2 border mx-3 rounded text-center text-sm text-black; diff --git a/components/cart/CartItem/CartItem.tsx b/components/cart/CartItem/CartItem.tsx index 4f66da868..e51274e0f 100644 --- a/components/cart/CartItem/CartItem.tsx +++ b/components/cart/CartItem/CartItem.tsx @@ -1,4 +1,4 @@ -import { ChangeEvent, useEffect, useState } from 'react' +import { ChangeEvent, FocusEventHandler, useEffect, useState } from 'react' import cn from 'classnames' import Image from 'next/image' import Link from 'next/link' @@ -9,6 +9,7 @@ import type { LineItem } from '@commerce/types/cart' import usePrice from '@framework/product/use-price' import useUpdateItem from '@framework/cart/use-update-item' import useRemoveItem from '@framework/cart/use-remove-item' +import Quantity from '@components/ui/Quantity' type ItemOption = { name: string @@ -28,6 +29,10 @@ const CartItem = ({ currencyCode: string }) => { const { closeSidebarIfPresent } = useUI() + const [removing, setRemoving] = useState(false) + const [quantity, setQuantity] = useState(item.quantity) + const removeItem = useRemoveItem() + const updateItem = useUpdateItem({ item }) const { price } = usePrice({ amount: item.variant.price * item.quantity, @@ -35,43 +40,22 @@ const CartItem = ({ currencyCode, }) - const updateItem = useUpdateItem({ item }) - const removeItem = useRemoveItem() - const [quantity, setQuantity] = useState(item.quantity) - const [removing, setRemoving] = useState(false) - - const updateQuantity = async (val: number) => { - await updateItem({ quantity: val }) + const handleChange = async ({ + target: { value }, + }: ChangeEvent) => { + setQuantity(Number(value)) + await updateItem({ quantity: Number(value) }) } - const handleQuantity = (e: ChangeEvent) => { - const val = !e.target.value ? '' : Number(e.target.value) - - if (!val || (Number.isInteger(val) && val >= 0)) { - setQuantity(val) - } - } - - const handleBlur = () => { - const val = Number(quantity) - if (val !== item.quantity) { - updateQuantity(val) - } - } - - const increaseQuantity = (n = 1) => { + const increaseQuantity = async (n = 1) => { const val = Number(quantity) + n - if (Number.isInteger(val) && val >= 0) { - setQuantity(val) - updateQuantity(val) - } + setQuantity(val) + await updateItem({ quantity: val }) } const handleRemove = async () => { setRemoving(true) try { - // If this action succeeds then there's no need to do `setRemoving(true)` - // because the component will be removed from the view await removeItem(item) } catch (error) { setRemoving(false) @@ -152,38 +136,13 @@ const CartItem = ({
{variant === 'default' && ( -
- - - - -
+ increaseQuantity(1)} + decrease={() => increaseQuantity(-1)} + /> )} ) diff --git a/components/ui/Quantifier/Quantifier.module.css b/components/ui/Quantifier/Quantifier.module.css deleted file mode 100644 index c3a2af639..000000000 --- a/components/ui/Quantifier/Quantifier.module.css +++ /dev/null @@ -1,2 +0,0 @@ -.root { -} diff --git a/components/ui/Quantifier/Quantifier.tsx b/components/ui/Quantifier/Quantifier.tsx deleted file mode 100644 index 5f1bcb62c..000000000 --- a/components/ui/Quantifier/Quantifier.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import React, { FC } from 'react' -import s from './Quantifier.module.css' - -export interface QuantifierProps {} - -const Quantifier: FC = ({}) => { - return
-} - -export default Quantifier diff --git a/components/ui/Quantifier/index.ts b/components/ui/Quantifier/index.ts deleted file mode 100644 index c9a2fdb29..000000000 --- a/components/ui/Quantifier/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './Quantifier' -export * from './Quantifier' diff --git a/components/ui/Quantity/Quantity.module.css b/components/ui/Quantity/Quantity.module.css new file mode 100644 index 000000000..2ca2c5fcf --- /dev/null +++ b/components/ui/Quantity/Quantity.module.css @@ -0,0 +1,22 @@ +.actions { + @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; + user-select: none; +} + +.actions:hover { + @apply border bg-accent-1 border-accent-3 text-accent-9; + transition: border-color; + z-index: 10; +} + +.actions:focus { + @apply outline-none; +} + +.input { + @apply bg-transparent px-4 w-full h-full focus:outline-none; + user-select: none; +} diff --git a/components/ui/Quantity/Quantity.tsx b/components/ui/Quantity/Quantity.tsx new file mode 100644 index 000000000..abde145aa --- /dev/null +++ b/components/ui/Quantity/Quantity.tsx @@ -0,0 +1,62 @@ +import React, { FC } from 'react' +import s from './Quantity.module.css' +import { Cross, Plus, Minus } from '@components/icons' +import cn from 'classnames' +export interface QuantityProps { + value: number + increase: () => any + decrease: () => any + handleRemove: React.MouseEventHandler + handleChange: React.ChangeEventHandler + max?: number +} + +const Quantity: FC = ({ + value, + increase, + decrease, + handleChange, + handleRemove, + max = 6, +}) => { + return ( +
+ + + + +
+ ) +} + +export default Quantity diff --git a/components/ui/Quantity/index.ts b/components/ui/Quantity/index.ts new file mode 100644 index 000000000..5ee880cc9 --- /dev/null +++ b/components/ui/Quantity/index.ts @@ -0,0 +1,2 @@ +export { default } from './Quantity' +export * from './Quantity' diff --git a/components/ui/index.ts b/components/ui/index.ts index 37ddd0dbc..ae5ebac25 100644 --- a/components/ui/index.ts +++ b/components/ui/index.ts @@ -11,4 +11,5 @@ export { default as Modal } from './Modal' export { default as Text } from './Text' export { default as Input } from './Input' export { default as Collapse } from './Collapse' +export { default as Quantity } from './Quantity' export { useUI } from './context' From 224d4157751b2c40841fe19994a568d32391ed25 Mon Sep 17 00:00:00 2001 From: Bel Curcio Date: Fri, 4 Jun 2021 14:55:26 -0300 Subject: [PATCH 4/8] Adding Rating Component --- .../product/ProductView/ProductView.tsx | 18 +++---------- components/ui/Rating/Rating.module.css | 0 components/ui/Rating/Rating.tsx | 26 +++++++++++++++++++ components/ui/Rating/index.ts | 2 ++ components/ui/index.ts | 1 + 5 files changed, 32 insertions(+), 15 deletions(-) create mode 100644 components/ui/Rating/Rating.module.css create mode 100644 components/ui/Rating/Rating.tsx create mode 100644 components/ui/Rating/index.ts diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx index 50b84eb69..1a8b71d8f 100644 --- a/components/product/ProductView/ProductView.tsx +++ b/components/product/ProductView/ProductView.tsx @@ -9,11 +9,11 @@ import { getVariant, SelectedOptions } from '../helpers' import { Swatch, ProductSlider } from '@components/product' import { Button, Container, Text, useUI } from '@components/ui' import { useAddItem } from '@framework/cart' +import Rating from '@components/ui/Rating' import Collapse from '@components/ui/Collapse' import ProductCard from '@components/product/ProductCard' import WishlistButton from '@components/wishlist/WishlistButton' -import rangeMap from '@lib/range-map' -import { Star } from '@components/icons' + interface Props { children?: any product: Product @@ -154,19 +154,7 @@ const ProductView: FC = ({ product, relatedProducts }) => {
- {/** - * TODO make component Rate stars={} - */} -
- {rangeMap(4, (i) => ( - - - - ))} - - - -
+
36 reviews
diff --git a/components/ui/Rating/Rating.module.css b/components/ui/Rating/Rating.module.css new file mode 100644 index 000000000..e69de29bb diff --git a/components/ui/Rating/Rating.tsx b/components/ui/Rating/Rating.tsx new file mode 100644 index 000000000..c115006de --- /dev/null +++ b/components/ui/Rating/Rating.tsx @@ -0,0 +1,26 @@ +import React, { FC } from 'react' +import rangeMap from '@lib/range-map' +import { Star } from '@components/icons' +import cn from 'classnames' + +export interface RatingProps { + value: number +} + +const Quantity: FC = ({ value = 5 }) => { + return ( +
+ {rangeMap(5, (i) => ( + = Math.floor(value), + })} + > + + + ))} +
+ ) +} + +export default Quantity diff --git a/components/ui/Rating/index.ts b/components/ui/Rating/index.ts new file mode 100644 index 000000000..1354efb25 --- /dev/null +++ b/components/ui/Rating/index.ts @@ -0,0 +1,2 @@ +export { default } from './Rating' +export * from './Rating' diff --git a/components/ui/index.ts b/components/ui/index.ts index ae5ebac25..47bdbd9ff 100644 --- a/components/ui/index.ts +++ b/components/ui/index.ts @@ -12,4 +12,5 @@ export { default as Text } from './Text' export { default as Input } from './Input' export { default as Collapse } from './Collapse' export { default as Quantity } from './Quantity' +export { default as Rating } from './Rating' export { useUI } from './context' From 60c9fbca00e92baec0e5abb8867771b9f24d92cf Mon Sep 17 00:00:00 2001 From: Bel Curcio Date: Fri, 4 Jun 2021 14:56:39 -0300 Subject: [PATCH 5/8] Rating Component --- components/ui/Rating/Rating.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/components/ui/Rating/Rating.tsx b/components/ui/Rating/Rating.tsx index c115006de..e9ae65833 100644 --- a/components/ui/Rating/Rating.tsx +++ b/components/ui/Rating/Rating.tsx @@ -12,6 +12,7 @@ const Quantity: FC = ({ value = 5 }) => {
{rangeMap(5, (i) => ( = Math.floor(value), })} From f557274f62cf49a8b0ee8abd5fd5643d0352e65f Mon Sep 17 00:00:00 2001 From: Bel Curcio Date: Fri, 4 Jun 2021 17:43:27 -0300 Subject: [PATCH 6/8] More updates --- components/common/I18nWidget/I18nWidget.module.css | 8 ++++++-- components/common/I18nWidget/I18nWidget.tsx | 2 +- pages/index.tsx | 10 ++-------- 3 files changed, 9 insertions(+), 11 deletions(-) diff --git a/components/common/I18nWidget/I18nWidget.module.css b/components/common/I18nWidget/I18nWidget.module.css index bd20f14c1..269aa5f61 100644 --- a/components/common/I18nWidget/I18nWidget.module.css +++ b/components/common/I18nWidget/I18nWidget.module.css @@ -3,11 +3,11 @@ } .button { - @apply h-10 px-2 rounded-md border border-accent-2 flex items-center justify-center; + @apply h-10 px-2 rounded-md border border-accent-2 flex items-center justify-center transition-colors ease-linear; } .button:hover { - @apply border-accent-4 shadow-sm; + @apply border-accent-3 shadow-sm; } .button:focus { @@ -38,5 +38,9 @@ } .icon { + transition: transform 0.2s ease; +} + +.icon.active { transform: rotate(180deg); } diff --git a/components/common/I18nWidget/I18nWidget.tsx b/components/common/I18nWidget/I18nWidget.tsx index fbe67a4c1..58135f12a 100644 --- a/components/common/I18nWidget/I18nWidget.tsx +++ b/components/common/I18nWidget/I18nWidget.tsx @@ -59,7 +59,7 @@ const I18nWidget: FC = () => { /> {options && ( - + )} diff --git a/pages/index.tsx b/pages/index.tsx index 004c5e72a..0393b599b 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -53,14 +53,8 @@ export default function Home({ ))} {products.slice(0, 3).map((product, i) => ( From 16992542881b4f246d5aac7f4c0bb52bc76b0c1d Mon Sep 17 00:00:00 2001 From: Bel Curcio Date: Fri, 4 Jun 2021 17:54:39 -0300 Subject: [PATCH 7/8] User Select disabled, plus hidding horizontal scroll bars --- .../product/ProductSlider/ProductSlider.module.css | 11 ++++++++--- components/product/ProductView/ProductView.tsx | 4 +++- components/product/Swatch/Swatch.module.css | 2 +- 3 files changed, 12 insertions(+), 5 deletions(-) diff --git a/components/product/ProductSlider/ProductSlider.module.css b/components/product/ProductSlider/ProductSlider.module.css index 8db6561a7..f77a3738d 100644 --- a/components/product/ProductSlider/ProductSlider.module.css +++ b/components/product/ProductSlider/ProductSlider.module.css @@ -1,6 +1,6 @@ .root { - @apply relative w-full h-full; - overflow-y: hidden; + @apply relative w-full h-full select-none; + overflow: hidden; } .slider { @@ -14,7 +14,7 @@ .control { @apply bg-violet absolute bottom-10 right-10 flex flex-row - border-accent-0 border text-accent-0 z-30 shadow-xl; + border-accent-0 border text-accent-0 z-30 shadow-xl select-none; height: 48px; } @@ -59,11 +59,16 @@ } .album { + width: 100%; + height: 100%; @apply bg-violet-dark; + box-sizing: content-box; overflow-y: hidden; overflow-x: auto; white-space: nowrap; height: 125px; + padding-bottom: 10px; + margin-bottom: -10px; } @screen md { diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx index 1a8b71d8f..b34929aab 100644 --- a/components/product/ProductView/ProductView.tsx +++ b/components/product/ProductView/ProductView.tsx @@ -155,7 +155,9 @@ const ProductView: FC = ({ product, relatedProducts }) => {
-
36 reviews
+
+ 36 reviews +
-
+
  • Subtotal diff --git a/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx b/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx index d17f46b28..f9dac54f9 100644 --- a/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx +++ b/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx @@ -50,7 +50,7 @@ const CheckoutSidebarView: FC = () => {
-
+
  • Subtotal diff --git a/components/common/SidebarLayout/SidebarLayout.tsx b/components/common/SidebarLayout/SidebarLayout.tsx index db2ce13b0..6b95481b7 100644 --- a/components/common/SidebarLayout/SidebarLayout.tsx +++ b/components/common/SidebarLayout/SidebarLayout.tsx @@ -25,7 +25,7 @@ const SidebarLayout: FC = ({ className="hover:text-gray-500 transition ease-in-out duration-150 flex items-center focus:outline-none" > - + Close