Feat/theme-layout

.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
+/localStorage
+

src/components/breadcrumb.tsx

@@ -19,7 +19,7 @@ export default function Breadcrumb({ entries }: IBreadcrumb): JSX.Element {
     >
       {entries.length > 1 &&
         entries.map((entry, index, array) => (
-          <ListItem key={entry.label}>
+          <ListItem key={entry.breadcrumb}>
             {array.length === index + 1 ? (
               <Box as="span" fontWeight="bold">
                 {entry.label}

src/components/cart/Cart.tsx

@@ -26,8 +26,8 @@ export default function Cart({
 }: ICart): JSX.Element {
   return (
     <Grid
-      templateColumns={{ base: "1fr", lg: "2fr 1.5fr" }}
-      gap={{ base: 4, lg: 12 }}
+      templateColumns={{ base: "1fr", md: "3fr 1.5fr", lg: "4fr 1.5fr" }}
+      gap={{ base: 4, lg: 6 }}
     >
       <CartItemList items={items} handleRemoveItem={removeCartItem} />
       <CartOrderSummary

src/components/cart/CartItemList.tsx

@@ -1,9 +1,18 @@
 import { RefinedCartItem } from "../../context/types/cart-reducer-types";
-import { Box, Text, Grid, GridItem, IconButton } from "@chakra-ui/react";
+import {
+  Box,
+  Text,
+  Grid,
+  GridItem,
+  Button,
+  Image,
+  Center,
+} from "@chakra-ui/react";
 import QuantityHandler from "../quantity-handler/QuantityHandler";
 import { CloseIcon } from "@chakra-ui/icons";
 import { NonEmptyArray } from "../../lib/types/non-empty-array";
 import { ReadonlyNonEmptyArray } from "../../lib/types/read-only-non-empty-array";
+import NextLink from "next/link";
 import { ChakraNextImage } from "../ChakraNextImage";
 
 export function CartItemList({
@@ -18,61 +27,137 @@ export function CartItemList({
 }): JSX.Element {
   return (
     <Box>
-      {items.map((item) => (
-        <Grid
-          key={item.id}
-          gridTemplateColumns={{ base: "auto 1fr auto" }}
-          gap={6}
-          py={10}
-          borderBottom="1px solid"
-          borderColor="gray.200"
-          _last={{ border: "none" }}
-          _first={{ borderTop: "1px solid", borderColor: "gray.200" }}
-        >
-          <Box>
-            {item.image?.href && (
-              <ChakraNextImage
-                src={item.image.href}
-                alt={item.name}
-                width={192}
-                height={192}
-                w={{ base: "5rem", sm: "12rem" }}
-                h={{ base: "5rem", sm: "12rem" }}
-                overflow="hidden"
-                rounded="lg"
-              />
-            )}
-          </Box>
-
+      {items.map((item) => {
+        const {
+          display_price: { discount, without_discount, without_tax },
+        } = item.meta;
+        return (
           <Grid
-            gridTemplateRows={{ base: "auto 1fr", md: "" }}
-            gridTemplateColumns={{ base: "", md: "1fr 1fr" }}
-            gap={{ base: 4, md: 6 }}
+            key={item.id}
+            gap="10"
+            fontWeight="bold"
+            mb="5"
+            borderBottom="1px solid"
+            borderColor="gray.200"
+            borderRadius="2"
+            pb="6"
           >
-            <GridItem>
-              <Text fontWeight="medium" fontSize="sm" noOfLines={2}>
-                {item.name}
-              </Text>
-              <Text fontSize="md" fontWeight="medium" mt={2}>
-                {item.meta.display_price.without_tax.unit.formatted}
+            <Box>
+              <Text fontWeight="bold" fontSize="md" noOfLines={1}>
+                <NextLink href={`/products/${item.product_id}`} passHref>
+                  {item.name}
+                </NextLink>
               </Text>
-            </GridItem>
-            <QuantityHandler item={item} />
-          </Grid>
-          <GridItem>
-            <IconButton
-              aria-label="Remove"
-              color="gray.500"
-              icon={<CloseIcon w={{ base: 2, md: 3 }} h={{ base: 2, md: 3 }} />}
-              variant="text"
-              _hover={{ color: "gray.700" }}
-              onClick={() => {
-                handleRemoveItem(item.id);
+            </Box>
+            <Grid
+              gridTemplateRows={{ base: "repeat(auto, 1fr)" }}
+              gridTemplateColumns={{
+                base: "",
+                sm: "repeat(3, 1fr)",
+                lg: "repeat(7, 1fr)",
               }}
-            />
-          </GridItem>
-        </Grid>
-      ))}
+              gap={{ base: 4 }}
+              mt={-30}
+            >
+              <GridItem
+                colSpan={{ sm: 3, lg: 1, "2xl": 1 }}
+                rowSpan={2}
+                minWidth="100px"
+              >
+                {item.image?.href && (
+                  <ChakraNextImage
+                    src={item.image.href}
+                    alt={item.name}
+                    width={169}
+                    height={125} /*4:3 ratio*/
+                    overflow="hidden"
+                    rounded="lg"
+                  />
+                )}
+              </GridItem>
+              <GridItem colSpan={{ sm: 3, lg: 3, "2xl": 3 }}>
+                <Text
+                  fontSize="sm"
+                  fontWeight="medium"
+                  noOfLines={[1, 2, 3, 4, 5]}
+                >
+                  {item.description}
+                </Text>
+              </GridItem>
+              <GridItem colSpan={1}>
+                <Center>
+                  <Text fontSize="md" fontWeight="bold">
+                    Each
+                  </Text>
+                </Center>
+                {discount && without_discount && discount.value.amount < 0 ? (
+                  <div>
+                    <Center>
+                      <Text
+                        color="gray.500"
+                        textDecoration="line-through"
+                        fontSize="sm"
+                        fontWeight="medium"
+                      >
+                        {without_discount.unit.formatted}
+                      </Text>
+                    </Center>
+                    <Center>
+                      <Text fontSize="sm" fontWeight="medium">
+                        {without_tax.unit.formatted}
+                      </Text>
+                    </Center>
+                  </div>
+                ) : (
+                  <Center>
+                    <Text fontSize="sm" fontWeight="medium">
+                      {without_tax.unit.formatted}
+                    </Text>
+                  </Center>
+                )}
+              </GridItem>
+              <GridItem colSpan={1}>
+                <Center>
+                  <Text fontSize="md" fontWeight="bold" mb="2">
+                    Quantity
+                  </Text>
+                </Center>
+                <Center>
+                  <QuantityHandler item={item} />
+                </Center>
+                <Center>
+                  <Button
+                    size="xs"
+                    aria-label="Remove"
+                    mt={6}
+                    colorScheme="gray"
+                    variant="ghost"
+                    leftIcon={<CloseIcon />}
+                    _hover={{ color: "red" }}
+                    onClick={() => {
+                      handleRemoveItem(item.id);
+                    }}
+                  >
+                    Remove
+                  </Button>
+                </Center>
+              </GridItem>
+              <GridItem colSpan={1}>
+                <Center>
+                  <Text fontSize="md" fontWeight="bold" mt={1}>
+                    Total
+                  </Text>
+                </Center>
+                <Center>
+                  <Text fontSize="sm" fontWeight="bold">
+                    {item.meta.display_price.without_tax.value.formatted}
+                  </Text>
+                </Center>
+              </GridItem>
+            </Grid>
+          </Grid>
+        );
+      })}
     </Box>
   );
 }

src/components/cart/CartMenu.tsx

@@ -29,10 +29,14 @@ export default function CartMenu(): JSX.Element {
       onOpen={onOpen}
     >
       <PopoverTrigger>
-        <Button variant="ghost" _focus={{ border: "none" }}>
+        <Button
+          variant="ghost"
+          _hover={{ bg: "gray.500" }}
+          _focus={{ bg: "gray.500" }}
+        >
           <Icon
             viewBox="0 0 24 24"
-            stroke="currentColor"
+            stroke="brand.navigation"
             strokeWidth="2"
             fill="none"
             h={6}
@@ -85,7 +89,7 @@ function CartPopoverFooter({
           disabled={!hasCartItems}
           onClick={onClose}
           bg="brand.primary"
-          color="white"
+          color="brand.buttontext"
           w="100%"
           display="block"
           _hover={{

src/components/cart/CartOrderSummary.tsx

@@ -27,7 +27,11 @@ export function CartOrderSummary({
   handleRemoveItem: (itemId: string) => Promise<void>;
 }): JSX.Element {
   return (
-    <Box backgroundColor="gray.50" p={8} borderRadius={6}>
+    <Box
+      backgroundColor="gray.50"
+      padding={{ sm: "1rem 1rem" }}
+      borderRadius={6}
+    >
       <Text fontSize="lg" fontWeight={500}>
         Order Summary
       </Text>
@@ -44,7 +48,7 @@ export function CartOrderSummary({
               <Tr key={item.id} fontSize={14}>
                 <Td color="gray.600" pl={0}>
                   <VStack alignItems="start">
-                    <Text>Discount</Text>
+                    <Text>Coupons</Text>
                     <Text color="red.600">{item.sku}</Text>
                   </VStack>
                 </Td>
@@ -86,41 +90,22 @@ export function CartOrderSummary({
       <Box mt={5}>
         <Promotion />
       </Box>
-      <Grid
-        gridTemplateColumns={{
-          sm: "repeat(2, 1fr)",
-          lg: "auto",
-          xl: "repeat(2, 1fr)",
-        }}
-        gap={2}
-        mt={5}
-      >
-        <Link href="/" passHref>
-          <Button
-            _hover={{
-              color: "brand.highlight",
-              boxShadow: "lg",
-            }}
-            colorScheme="brand.primary"
-            variant="outline"
-          >
-            Continue Shopping
-          </Button>
-        </Link>
+      <Box mt={5}>
         <Link href={`/checkout/${cartId}`} passHref>
           <Button
             bg="brand.primary"
-            color="white"
+            color="brand.buttontext"
             _hover={{
-              backgroundColor: "blue.700",
+              backgroundColor: "brand.secondary",
               boxShadow: "m",
             }}
             variant="solid"
+            w="100%"
           >
             Checkout
           </Button>
         </Link>
-      </Grid>
+      </Box>
     </Box>
   );
 }

src/components/cart/OrderComplete.tsx

@@ -113,7 +113,7 @@ export default function OrderComplete({
         <NextLink href="/" passHref>
           <Button
             bg="brand.primary"
-            color="white"
+            color="brand.buttontext"
             _hover={{
               backgroundColor: "brand.highlight",
               boxShadow: "m",

src/components/checkout/CheckoutForm.tsx

@@ -120,7 +120,7 @@ export default function CheckoutForm({
             <Button
               justifySelf="right"
               bg="brand.primary"
-              color="white"
+              color="brand.buttontext"
               _hover={{
                 backgroundColor: "brand.highlight",
                 boxShadow: "md",