From 052fdd2b3984a09c95f25906300b2b41b3ac7284 Mon Sep 17 00:00:00 2001 From: David Stover Date: Mon, 7 Nov 2022 13:49:04 -0500 Subject: [PATCH 1/4] Update layout width, footer, add theme colors, add header colors --- .gitignore | 4 +- src/components/cart/Cart.tsx | 4 +- src/components/cart/CartItemList.tsx | 189 +++++++++++++----- src/components/cart/CartMenu.tsx | 10 +- src/components/cart/CartOrderSummary.tsx | 37 +--- src/components/cart/OrderComplete.tsx | 2 +- src/components/checkout/CheckoutForm.tsx | 2 +- .../featured-products/FeaturedProducts.tsx | 2 +- src/components/footer/Footer.tsx | 48 ++++- src/components/header/Header.tsx | 35 +++- .../header/navigation/MobileNavBar.tsx | 12 +- src/components/header/navigation/NavItem.tsx | 5 +- .../header/navigation/NavItemContent.tsx | 7 +- src/components/product/CartActions.tsx | 2 +- src/components/product/ProductContainer.tsx | 6 +- src/components/product/ProductDetails.tsx | 2 +- src/components/product/ProductSummary.tsx | 2 +- .../product/carousel/ProductCarousel.tsx | 19 +- .../carousel/ProductShowcaseCarousel.tsx | 2 +- .../promotion-banner/PromotionBanner.tsx | 2 +- src/components/search/SearchModal.tsx | 5 +- src/components/search/SearchPage.tsx | 6 +- src/components/search/SearchResults.tsx | 11 +- src/pages/cart.tsx | 3 +- src/pages/checkout/[cartId].tsx | 3 +- src/pages/products/[productId].tsx | 4 +- src/styles/theme.ts | 10 +- 27 files changed, 309 insertions(+), 125 deletions(-) diff --git a/.gitignore b/.gitignore index 7003ab1c..d30e9d5b 100644 --- a/.gitignore +++ b/.gitignore @@ -31,6 +31,7 @@ yarn-error.log* .env.development.local .env.test.local .env.production.local +yarn.lock # vercel .vercel @@ -39,4 +40,5 @@ yarn-error.log* *.tsbuildinfo # TODO ignoring for now but unsure of what's generating it. -/localStorage \ No newline at end of file +/localStorage + diff --git a/src/components/cart/Cart.tsx b/src/components/cart/Cart.tsx index 3b648eda..ac79b385 100644 --- a/src/components/cart/Cart.tsx +++ b/src/components/cart/Cart.tsx @@ -26,8 +26,8 @@ export default function Cart({ }: ICart): JSX.Element { return ( - {items.map((item) => ( - - - {item.image?.href && ( - - )} - - + {items.map((item) => { + const { + display_price: { discount, without_discount, without_tax }, + } = item.meta; + return ( - - - {item.name} - - - {item.meta.display_price.without_tax.unit.formatted} + + + + {item.name} + - - - - - } - variant="text" - _hover={{ color: "gray.700" }} - onClick={() => { - handleRemoveItem(item.id); + + - - - ))} + gap={{ base: 4 }} + mt={-30} + > + + {item.image?.href && ( + + )} + + + + {item.description} + + + +
+ + Each + +
+ {discount && without_discount && discount.value.amount < 0 ? ( +
+
+ + {without_discount.unit.formatted} + +
+
+ + {without_tax.unit.formatted} + +
+
+ ) : ( +
+ + {without_tax.unit.formatted} + +
+ )} + + +
+ + Quantity + +
+
+ +
+
+ +
+ + +
+ + Total + +
+
+ + {item.meta.display_price.without_tax.value.formatted} + +
+ + + + ); + })} ); } diff --git a/src/components/cart/CartMenu.tsx b/src/components/cart/CartMenu.tsx index 1a2791a7..e93ca766 100644 --- a/src/components/cart/CartMenu.tsx +++ b/src/components/cart/CartMenu.tsx @@ -29,10 +29,14 @@ export default function CartMenu(): JSX.Element { onOpen={onOpen} > - - + - + ); } diff --git a/src/components/cart/OrderComplete.tsx b/src/components/cart/OrderComplete.tsx index 33b05183..01d3d2a4 100644 --- a/src/components/cart/OrderComplete.tsx +++ b/src/components/cart/OrderComplete.tsx @@ -113,7 +113,7 @@ export default function OrderComplete({ @@ -78,8 +84,8 @@ const MobileNavBar = ({ nav }: IMobileNavBar): JSX.Element => {

diff --git a/src/components/header/navigation/NavItem.tsx b/src/components/header/navigation/NavItem.tsx index b7e8184b..c7cd9772 100644 --- a/src/components/header/navigation/NavItem.tsx +++ b/src/components/header/navigation/NavItem.tsx @@ -31,8 +31,11 @@ const NavItem = ({ item, headerPadding }: INavItem): JSX.Element => { {item.name} diff --git a/src/components/header/navigation/NavItemContent.tsx b/src/components/header/navigation/NavItemContent.tsx index b35ca435..874c7670 100644 --- a/src/components/header/navigation/NavItemContent.tsx +++ b/src/components/header/navigation/NavItemContent.tsx @@ -17,14 +17,14 @@ interface INavItemContent { const menuItemInteractionStyle = { bg: "none", - color: "brand.primary", + color: "brand.secondary", }; const menuItemStyleProps = { _hover: menuItemInteractionStyle, _active: menuItemInteractionStyle, _focus: menuItemInteractionStyle, - color: "gray.500", + color: "gray.600", margin: "1", }; @@ -51,6 +51,7 @@ const NavItemContent = ({ item, triggered }: INavItemContent): JSX.Element => { fontWeight="semibold" {...menuItemStyleProps} onClick={triggered} + _hover={{ color: "brand.primary" }} > Browse All @@ -65,7 +66,7 @@ const NavItemContent = ({ item, triggered }: INavItemContent): JSX.Element => { columns={{ base: 1, sm: 2, md: 4 }} spacing={10} borderBottom="1px solid" - borderColor="gray.100" + borderColor="gray.300" paddingBottom={2} > {item.children.map((parent: NavigationNode, index: number) => { diff --git a/src/components/product/CartActions.tsx b/src/components/product/CartActions.tsx index e37d9602..d39728d4 100644 --- a/src/components/product/CartActions.tsx +++ b/src/components/product/CartActions.tsx @@ -19,7 +19,7 @@ const CartActions = ({ productId }: ICartActions): JSX.Element => { mt={4} py="7" bg="brand.primary" - color="white" + color="brand.buttontext" textTransform="uppercase" _hover={{ transform: "translateY(-2px)", diff --git a/src/components/product/ProductContainer.tsx b/src/components/product/ProductContainer.tsx index c6b7d771..995b8714 100644 --- a/src/components/product/ProductContainer.tsx +++ b/src/components/product/ProductContainer.tsx @@ -18,7 +18,11 @@ export default function ProductContainer({ }: IProductContainer): JSX.Element { const { extensions } = product.attributes; return ( - + {main_image && ( )} diff --git a/src/components/product/ProductDetails.tsx b/src/components/product/ProductDetails.tsx index afbbd226..807823c9 100644 --- a/src/components/product/ProductDetails.tsx +++ b/src/components/product/ProductDetails.tsx @@ -27,7 +27,7 @@ const ProductDetails = ({ product }: IProductDetails): JSX.Element => { > { {attributes.name} diff --git a/src/components/product/carousel/ProductCarousel.tsx b/src/components/product/carousel/ProductCarousel.tsx index e6d39b52..00447ff9 100644 --- a/src/components/product/carousel/ProductCarousel.tsx +++ b/src/components/product/carousel/ProductCarousel.tsx @@ -4,6 +4,7 @@ import "pure-react-carousel/dist/react-carousel.es.css"; import { useState } from "react"; import HorizontalCarousel from "./HorizontalCarousel"; import ProductHighlightCarousel from "./ProductHighlightCarousel"; +import VerticalCarousel from "./VerticalCarousel"; interface IProductCarousel { images: File[]; @@ -20,8 +21,22 @@ const ProductCarousel = ({ completeImages[0] ); + const desiredVisibleSlides = 4; + const numberVisibleSlides = + completeImages.length >= desiredVisibleSlides + ? desiredVisibleSlides + : completeImages.length; + return ( - + + + + - + ({ src: item.link.href, diff --git a/src/components/product/carousel/ProductShowcaseCarousel.tsx b/src/components/product/carousel/ProductShowcaseCarousel.tsx index 646d7cd2..97d75ad8 100644 --- a/src/components/product/carousel/ProductShowcaseCarousel.tsx +++ b/src/components/product/carousel/ProductShowcaseCarousel.tsx @@ -107,7 +107,7 @@ const ProductShowcaseCarousel = ({ diff --git a/src/components/search/SearchPage.tsx b/src/components/search/SearchPage.tsx index 59f9b4cf..40a7ff16 100644 --- a/src/components/search/SearchPage.tsx +++ b/src/components/search/SearchPage.tsx @@ -39,7 +39,11 @@ export const Search = ({ {/* Breadcrumb */} {breadcrumbEntries && ( - + )} diff --git a/src/components/search/SearchResults.tsx b/src/components/search/SearchResults.tsx index e89a882d..355c3371 100644 --- a/src/components/search/SearchResults.tsx +++ b/src/components/search/SearchResults.tsx @@ -23,6 +23,7 @@ import { BreadcrumbLookup } from "../../lib/types/breadcrumb-lookup"; import SearchBox from "./SearchBox"; import MobileFilters from "./MobileFilters"; import { hierarchicalAttributes } from "../../lib/hierarchical-attributes"; +import { globalBaseWidth } from "../../styles/theme"; interface ISearchResults { lookup?: BreadcrumbLookup; @@ -62,8 +63,14 @@ export default function SearchResults({ const title = slugArray ? resolveTitle(slugArray, lookup) : "All Categories"; return ( - - + + {title} {query && Search results for "{query}"} diff --git a/src/pages/cart.tsx b/src/pages/cart.tsx index 5ada9a4d..82632952 100644 --- a/src/pages/cart.tsx +++ b/src/pages/cart.tsx @@ -13,8 +13,7 @@ export const CartPage: NextPage = () => { return ( = () => { maxW={globalBaseWidth} m="0 auto" w="full" - px={{ base: 8, "2xl": 0 }} - py={10} + padding={{ sm: "0 1rem", lg: "0 2rem", "2xl": "0 5rem" }} > {orderCompleteState ? ( diff --git a/src/pages/products/[productId].tsx b/src/pages/products/[productId].tsx index 2d572613..1977b576 100644 --- a/src/pages/products/[productId].tsx +++ b/src/pages/products/[productId].tsx @@ -27,8 +27,8 @@ export const Product: NextPage = (props: IProduct) => { return ( Date: Mon, 7 Nov 2022 17:49:34 -0500 Subject: [PATCH 2/4] Fix description and column wrapping --- src/components/cart/CartItemList.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/cart/CartItemList.tsx b/src/components/cart/CartItemList.tsx index b4904486..8a86975b 100644 --- a/src/components/cart/CartItemList.tsx +++ b/src/components/cart/CartItemList.tsx @@ -60,7 +60,7 @@ export function CartItemList({ mt={-30} > @@ -75,7 +75,7 @@ export function CartItemList({ /> )} - + Date: Wed, 16 Nov 2022 11:12:58 -0500 Subject: [PATCH 3/4] Robert's commit + change theme to white header --- src/components/breadcrumb.tsx | 2 +- src/components/product/Price.tsx | 11 ++++++++-- src/components/product/StrikePrice.tsx | 6 ++++-- src/components/search/Hit.tsx | 29 +++++++++++++------------- src/styles/theme.ts | 6 +++--- 5 files changed, 31 insertions(+), 23 deletions(-) diff --git a/src/components/breadcrumb.tsx b/src/components/breadcrumb.tsx index 9ff395c5..c17606f9 100644 --- a/src/components/breadcrumb.tsx +++ b/src/components/breadcrumb.tsx @@ -19,7 +19,7 @@ export default function Breadcrumb({ entries }: IBreadcrumb): JSX.Element { > {entries.length > 1 && entries.map((entry, index, array) => ( - + {array.length === index + 1 ? ( {entry.label} diff --git a/src/components/product/Price.tsx b/src/components/product/Price.tsx index 024c1fb8..2b57fe27 100644 --- a/src/components/product/Price.tsx +++ b/src/components/product/Price.tsx @@ -1,18 +1,25 @@ import { useColorModeValue, Text } from "@chakra-ui/react"; +import { TextProps } from "@chakra-ui/layout"; -interface IPriceProps { +interface IPriceProps extends TextProps { price: string; currency: string; size?: string; } -const Price = ({ price, currency, size = "2xl" }: IPriceProps): JSX.Element => { +const Price = ({ + price, + currency, + size = "2xl", + ...props +}: IPriceProps): JSX.Element => { return ( {price} {currency} diff --git a/src/components/product/StrikePrice.tsx b/src/components/product/StrikePrice.tsx index 75aab5f9..c583c4fe 100644 --- a/src/components/product/StrikePrice.tsx +++ b/src/components/product/StrikePrice.tsx @@ -1,11 +1,12 @@ import { useColorModeValue, Text } from "@chakra-ui/react"; +import { TextProps } from "@chakra-ui/layout"; -interface IPrice { +interface IPrice extends TextProps { price: string; currency: string; } -const StrikePrice = ({ price, currency }: IPrice): JSX.Element => { +const StrikePrice = ({ price, currency, ...props }: IPrice): JSX.Element => { return ( { fontSize="lg" textDecoration="line-through" ml={3} + {...props} > {price} {currency} diff --git a/src/components/search/Hit.tsx b/src/components/search/Hit.tsx index 2740e3dd..e8dd3018 100644 --- a/src/components/search/Hit.tsx +++ b/src/components/search/Hit.tsx @@ -64,21 +64,20 @@ export default function HitComponent({ hit }: { hit: SearchHit }): JSX.Element { > {ep_description} - - {ep_price && ( - - - {ep_price["USD"].sale_prices && ( - - )} - - )} - + {ep_price && ( + + + {ep_price["USD"].sale_prices && ( + + )} + + )}