From 5e8cb6e6df28e3ce70d311db46b1a36b7ae932fa Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Sat, 24 Oct 2020 16:53:25 -0300
Subject: [PATCH 1/7] New Text Component, new pages
---
components/core/Layout/Layout.tsx | 1 -
components/core/UserNav/DropdownMenu.tsx | 72 ++++++++++++++----------
components/core/UserNav/UserNav.tsx | 5 +-
components/ui/Text/Text.module.css | 7 +++
components/ui/Text/Text.tsx | 54 ++++++++++++++++++
components/ui/Text/index.ts | 1 +
components/ui/index.ts | 1 +
components/ui/types.ts | 1 -
pages/forgot-password.tsx | 13 +++++
pages/orders.tsx | 12 ++++
pages/profile.tsx | 12 ++++
11 files changed, 144 insertions(+), 35 deletions(-)
create mode 100644 components/ui/Text/Text.module.css
create mode 100644 components/ui/Text/Text.tsx
create mode 100644 components/ui/Text/index.ts
delete mode 100644 components/ui/types.ts
create mode 100644 pages/forgot-password.tsx
create mode 100644 pages/orders.tsx
create mode 100644 pages/profile.tsx
diff --git a/components/core/Layout/Layout.tsx b/components/core/Layout/Layout.tsx
index 7a4d1fa24..90a5bca35 100644
--- a/components/core/Layout/Layout.tsx
+++ b/components/core/Layout/Layout.tsx
@@ -35,7 +35,6 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
}
}, [])
- console.log(displaySidebar, displayDropdown)
usePreventScroll({
isDisabled: !displaySidebar,
})
diff --git a/components/core/UserNav/DropdownMenu.tsx b/components/core/UserNav/DropdownMenu.tsx
index 0f45c7940..1f935657c 100644
--- a/components/core/UserNav/DropdownMenu.tsx
+++ b/components/core/UserNav/DropdownMenu.tsx
@@ -10,6 +10,21 @@ interface DropdownMenuProps {
open: boolean
}
+const LINKS = [
+ {
+ name: 'My Orders',
+ href: '/orders',
+ },
+ {
+ name: 'My Profile',
+ href: '/profile',
+ },
+ {
+ name: 'Cart',
+ href: '/cart',
+ },
+]
+
const DropdownMenu: FC<DropdownMenuProps> = ({ open = false }) => {
const { theme, setTheme } = useTheme()
@@ -24,39 +39,36 @@ const DropdownMenu: FC<DropdownMenuProps> = ({ open = false }) => {
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className={s.dropdownMenu}>
+ {LINKS.map(({ name, href }) => (
+ <Link href={href}>
+ <Menu.Item key={href}>
+ {({ active }) => (
+ <a className={cn(s.link, { [s.active]: active })}>{name}</a>
+ )}
+ </Menu.Item>
+ </Link>
+ ))}
<Menu.Item>
- {({ active }) => <a className={s.link}>My Purchases</a>}
+ <a
+ className={cn(s.link, 'justify-between')}
+ onClick={() =>
+ theme === 'dark' ? setTheme('light') : setTheme('dark')
+ }
+ >
+ <div>
+ Theme: <strong>{theme}</strong>{' '}
+ </div>
+ <div className="ml-3">
+ {theme == 'dark' ? (
+ <Moon width={20} height={20} />
+ ) : (
+ <Sun width="20" height={20} />
+ )}
+ </div>
+ </a>
</Menu.Item>
<Menu.Item>
- {({ active }) => <a className={s.link}>My Account</a>}
- </Menu.Item>
- <Menu.Item>
- {({ active }) => (
- <a
- className={cn(s.link, 'justify-between')}
- onClick={() =>
- theme === 'dark' ? setTheme('light') : setTheme('dark')
- }
- >
- <div>
- Theme: <strong>{theme}</strong>{' '}
- </div>
- <div className="ml-3">
- {theme == 'dark' ? (
- <Moon width={20} height={20} />
- ) : (
- <Sun width="20" height={20} />
- )}
- </div>
- </a>
- )}
- </Menu.Item>
- <Menu.Item>
- {({ active }) => (
- <a className={cn(s.link, 'border-t border-accents-2 mt-4')}>
- Logout
- </a>
- )}
+ <a className={cn(s.link, 'border-t border-accents-2 mt-4')}>Logout</a>
</Menu.Item>
</Menu.Items>
</Transition>
diff --git a/components/core/UserNav/UserNav.tsx b/components/core/UserNav/UserNav.tsx
index c63ba2d9d..bdf867095 100644
--- a/components/core/UserNav/UserNav.tsx
+++ b/components/core/UserNav/UserNav.tsx
@@ -1,9 +1,9 @@
import Link from 'next/link'
import cn from 'classnames'
import s from './UserNav.module.css'
-import { FC, useRef } from 'react'
-import { Avatar } from '@components/core'
+import { FC } from 'react'
import { Heart, Bag } from '@components/icon'
+import { Avatar } from '@components/core'
import { useUI } from '@components/ui/context'
import DropdownMenu from './DropdownMenu'
import { Menu } from '@headlessui/react'
@@ -22,7 +22,6 @@ const UserNav: FC<Props> = ({ className, children, ...props }) => {
const { openSidebar, closeSidebar, displaySidebar } = useUI()
const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)
- let ref = useRef() as React.MutableRefObject<HTMLInputElement>
return (
<nav className={cn(s.root, className)}>
diff --git a/components/ui/Text/Text.module.css b/components/ui/Text/Text.module.css
new file mode 100644
index 000000000..a35936b28
--- /dev/null
+++ b/components/ui/Text/Text.module.css
@@ -0,0 +1,7 @@
+.body {
+ @apply text-lg leading-7 font-medium max-w-6xl mx-auto;
+}
+
+.heading {
+ @apply text-5xl mb-12;
+}
diff --git a/components/ui/Text/Text.tsx b/components/ui/Text/Text.tsx
new file mode 100644
index 000000000..8d6d88539
--- /dev/null
+++ b/components/ui/Text/Text.tsx
@@ -0,0 +1,54 @@
+import React, {
+ FunctionComponent,
+ JSXElementConstructor,
+ CSSProperties,
+} from 'react'
+import cn from 'classnames'
+import s from './Text.module.css'
+
+interface Props {
+ variant?: Variant
+ className?: string
+ style?: CSSProperties
+ children: React.ReactNode | any
+}
+
+type Variant = 'heading' | 'body'
+
+const Text: FunctionComponent<Props> = ({
+ style,
+ className = '',
+ variant = 'body',
+ children,
+}) => {
+ const componentsMap: {
+ [P in Variant]: React.ComponentType<any> | string
+ } = {
+ body: 'p',
+ heading: 'h2',
+ }
+
+ const Component:
+ | JSXElementConstructor<any>
+ | React.ReactElement<any>
+ | React.ComponentType<any>
+ | string = componentsMap![variant!]
+
+ return (
+ <Component
+ className={cn(
+ s.root,
+ {
+ [s.body]: variant === 'body',
+ [s.heading]: variant === 'heading',
+ },
+ className
+ )}
+ style={style}
+ >
+ {children}
+ </Component>
+ )
+}
+
+export default Text
diff --git a/components/ui/Text/index.ts b/components/ui/Text/index.ts
new file mode 100644
index 000000000..e1e5fa74e
--- /dev/null
+++ b/components/ui/Text/index.ts
@@ -0,0 +1 @@
+export { default } from './Text'
diff --git a/components/ui/index.ts b/components/ui/index.ts
index 33de8eb71..a53f0b513 100644
--- a/components/ui/index.ts
+++ b/components/ui/index.ts
@@ -8,3 +8,4 @@ export { default as Container } from './Container'
export { default as LoadingDots } from './LoadingDots'
export { default as Skeleton } from './Skeleton'
export { default as Modal } from './Modal'
+export { default as Text } from './Text'
diff --git a/components/ui/types.ts b/components/ui/types.ts
deleted file mode 100644
index 8b2c535b2..000000000
--- a/components/ui/types.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type Colors = 'violet' | 'black' | 'pink' | 'white'
diff --git a/pages/forgot-password.tsx b/pages/forgot-password.tsx
new file mode 100644
index 000000000..23e18d2ba
--- /dev/null
+++ b/pages/forgot-password.tsx
@@ -0,0 +1,13 @@
+import { Layout } from '@components/core'
+import { Container } from '@components/ui'
+
+export default function ForgotPassword() {
+ return (
+ <Container>
+ <h2>Forgot Password</h2>
+ <p></p>
+ </Container>
+ )
+}
+
+ForgotPassword.Layout = Layout
diff --git a/pages/orders.tsx b/pages/orders.tsx
new file mode 100644
index 000000000..baa334194
--- /dev/null
+++ b/pages/orders.tsx
@@ -0,0 +1,12 @@
+import { Layout } from '@components/core'
+import { Container } from '@components/ui'
+
+export default function Orders() {
+ return (
+ <Container>
+ <h2>My Orders</h2>
+ </Container>
+ )
+}
+
+Orders.Layout = Layout
diff --git a/pages/profile.tsx b/pages/profile.tsx
new file mode 100644
index 000000000..665519b3c
--- /dev/null
+++ b/pages/profile.tsx
@@ -0,0 +1,12 @@
+import { Layout } from '@components/core'
+import { Container } from '@components/ui'
+
+export default function Profile() {
+ return (
+ <Container>
+ <h2>My Profile</h2>
+ </Container>
+ )
+}
+
+Profile.Layout = Layout
From 34f270a35368e8b78a0182e118732c5930adc45f Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Sat, 24 Oct 2020 16:57:10 -0300
Subject: [PATCH 2/7] Changes
---
components/product/types.ts | 1 -
pages/wishlist.tsx | 2 +-
2 files changed, 1 insertion(+), 2 deletions(-)
delete mode 100644 components/product/types.ts
diff --git a/components/product/types.ts b/components/product/types.ts
deleted file mode 100644
index ee5187f56..000000000
--- a/components/product/types.ts
+++ /dev/null
@@ -1 +0,0 @@
-import { Colors } from '@components/ui/types'
diff --git a/pages/wishlist.tsx b/pages/wishlist.tsx
index 549648097..03723fbc0 100644
--- a/pages/wishlist.tsx
+++ b/pages/wishlist.tsx
@@ -40,7 +40,7 @@ export default function Home({
</h2>
<div className="group flex flex-col">
{[1, 2, 3, 4, 5, 6].map((i) => (
- <WishlistCard />
+ <WishlistCard key={i} />
))}
</div>
</div>
From 8bb39b3a8379d96fda7abfd7fbd6344b25f82d7c Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Sat, 24 Oct 2020 17:06:20 -0300
Subject: [PATCH 3/7] Latest updates
---
.../core/I18nWidget/I18nWidget.module.css | 2 +-
components/core/UserNav/UserNav.module.css | 11 +++++---
components/core/UserNav/UserNav.tsx | 25 +++++++------------
3 files changed, 18 insertions(+), 20 deletions(-)
diff --git a/components/core/I18nWidget/I18nWidget.module.css b/components/core/I18nWidget/I18nWidget.module.css
index e9986cd32..afb5026f4 100644
--- a/components/core/I18nWidget/I18nWidget.module.css
+++ b/components/core/I18nWidget/I18nWidget.module.css
@@ -3,7 +3,7 @@
}
.button {
- @apply h-10 px-2 rounded-md border border-accents-2 flex items-center space-x-2 justify-center;
+ @apply h-10 px-2 rounded-md border border-accents-2 flex items-center space-x-2 justify-center outline-none focus:outline-none;
}
.dropdownMenu {
diff --git a/components/core/UserNav/UserNav.module.css b/components/core/UserNav/UserNav.module.css
index a22a1868c..f96b44935 100644
--- a/components/core/UserNav/UserNav.module.css
+++ b/components/core/UserNav/UserNav.module.css
@@ -2,9 +2,6 @@
@apply relative;
}
-.mainContainer {
-}
-
.list {
@apply flex flex-row items-center justify-items-end h-full;
}
@@ -25,3 +22,11 @@
@apply outline-none;
}
}
+
+.bagCount {
+ @apply border border-accents-1 bg-secondary text-secondary h-4 w-4 absolute rounded-full right-3 top-3 flex items-center justify-center font-bold text-xs;
+}
+
+.avatarButton {
+ @apply inline-flex justify-center rounded-full outline-none focus:outline-none;
+}
diff --git a/components/core/UserNav/UserNav.tsx b/components/core/UserNav/UserNav.tsx
index bdf867095..20b59e24a 100644
--- a/components/core/UserNav/UserNav.tsx
+++ b/components/core/UserNav/UserNav.tsx
@@ -20,7 +20,6 @@ const countItems = (count: number, items: any[]) =>
const UserNav: FC<Props> = ({ className, children, ...props }) => {
const { data } = useCart()
const { openSidebar, closeSidebar, displaySidebar } = useUI()
-
const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)
return (
@@ -32,11 +31,7 @@ const UserNav: FC<Props> = ({ className, children, ...props }) => {
onClick={() => (displaySidebar ? closeSidebar() : openSidebar())}
>
<Bag />
- {itemsCount > 0 && (
- <span className="border border-accent-1 bg-secondary text-secondary h-4 w-4 absolute rounded-full right-3 top-3 flex items-center justify-center font-bold text-xs">
- {itemsCount}
- </span>
- )}
+ {itemsCount > 0 && <span className={s.bagCount}>{itemsCount}</span>}
</li>
<Link href="/wishlist">
<li className={s.item}>
@@ -45,16 +40,14 @@ const UserNav: FC<Props> = ({ className, children, ...props }) => {
</Link>
<li className={s.item}>
<Menu>
- {({ open }) => {
- return (
- <>
- <Menu.Button className="inline-flex justify-center rounded-full">
- <Avatar />
- </Menu.Button>
- <DropdownMenu open={open} />
- </>
- )
- }}
+ {({ open }) => (
+ <>
+ <Menu.Button className={s.avatarButton}>
+ <Avatar />
+ </Menu.Button>
+ <DropdownMenu open={open} />
+ </>
+ )}
</Menu>
</li>
</ul>
From 6f19fee35042929164d51023669c72bb269de249 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Sat, 24 Oct 2020 17:10:54 -0300
Subject: [PATCH 4/7] Forgot Password
---
components/ui/Modal/Modal.module.css | 4 ++++
pages/forgot-password.tsx | 32 ++++++++++++++++++++++------
2 files changed, 30 insertions(+), 6 deletions(-)
diff --git a/components/ui/Modal/Modal.module.css b/components/ui/Modal/Modal.module.css
index 38f20261e..fa6b95e81 100644
--- a/components/ui/Modal/Modal.module.css
+++ b/components/ui/Modal/Modal.module.css
@@ -6,3 +6,7 @@
.modal {
@apply bg-primary p-12 border border-accents-2;
}
+
+.modal:focus {
+ @apply outline-none;
+}
diff --git a/pages/forgot-password.tsx b/pages/forgot-password.tsx
index 23e18d2ba..d5139b273 100644
--- a/pages/forgot-password.tsx
+++ b/pages/forgot-password.tsx
@@ -1,12 +1,32 @@
import { Layout } from '@components/core'
-import { Container } from '@components/ui'
-
+import { Logo, Modal, Button } from '@components/ui'
export default function ForgotPassword() {
return (
- <Container>
- <h2>Forgot Password</h2>
- <p></p>
- </Container>
+ <div className="pb-20">
+ <Modal close={() => {}}>
+ <div className="h-80 w-80 flex flex-col justify-between py-3 px-3">
+ <div className="flex justify-center pb-12 ">
+ <Logo width="64px" height="64px" />
+ </div>
+ <div className="flex flex-col space-y-3">
+ <div className="border border-accents-3 text-accents-6">
+ <input
+ placeholder="Email"
+ className="focus:outline-none bg-primary focus:shadow-outline-gray border-none py-2 px-6 w-full appearance-none transition duration-150 ease-in-out placeholder-accents-5 pr-10"
+ />
+ </div>
+ <Button variant="slim">Recover Password</Button>
+ <span className="pt-3 text-center text-sm">
+ <span className="text-accents-7">Don't have an account?</span>
+ {` `}
+ <a className="text-accent-9 font-bold hover:underline cursor-pointer">
+ Sign Up
+ </a>
+ </span>
+ </div>
+ </div>
+ </Modal>
+ </div>
)
}
From 4990dd0cf5a7c41ded2a1f717be3a6ff3ae144d9 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Sat, 24 Oct 2020 17:55:30 -0300
Subject: [PATCH 5/7] Polish and Cart view
---
components/cart/index.ts | 1 +
.../core/Searchbar/Searchbar.module.css | 4 -
components/ui/Text/Text.module.css | 4 +
components/ui/Text/Text.tsx | 6 +-
pages/cart.tsx | 126 ++++++++++++++++--
pages/orders.tsx | 4 +-
pages/profile.tsx | 4 +-
pages/wishlist.tsx | 6 +-
8 files changed, 133 insertions(+), 22 deletions(-)
diff --git a/components/cart/index.ts b/components/cart/index.ts
index 0aff7cdfb..3e53fa34a 100644
--- a/components/cart/index.ts
+++ b/components/cart/index.ts
@@ -1 +1,2 @@
export { default as CartSidebarView } from './CartSidebarView'
+export { default as CartItem } from './CartItem'
diff --git a/components/core/Searchbar/Searchbar.module.css b/components/core/Searchbar/Searchbar.module.css
index 0d2265650..2c3ca27f7 100644
--- a/components/core/Searchbar/Searchbar.module.css
+++ b/components/core/Searchbar/Searchbar.module.css
@@ -3,10 +3,6 @@
min-width: 300px;
}
-.input:focus {
- @apply outline-none shadow-outline-gray;
-}
-
.iconContainer {
@apply absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none;
}
diff --git a/components/ui/Text/Text.module.css b/components/ui/Text/Text.module.css
index a35936b28..00c6fcd40 100644
--- a/components/ui/Text/Text.module.css
+++ b/components/ui/Text/Text.module.css
@@ -5,3 +5,7 @@
.heading {
@apply text-5xl mb-12;
}
+
+.pageHeading {
+ @apply pt-1 pb-4 text-2xl leading-7 font-bold text-base tracking-wide;
+}
diff --git a/components/ui/Text/Text.tsx b/components/ui/Text/Text.tsx
index 8d6d88539..546396526 100644
--- a/components/ui/Text/Text.tsx
+++ b/components/ui/Text/Text.tsx
@@ -13,7 +13,7 @@ interface Props {
children: React.ReactNode | any
}
-type Variant = 'heading' | 'body'
+type Variant = 'heading' | 'body' | 'pageHeading'
const Text: FunctionComponent<Props> = ({
style,
@@ -25,7 +25,8 @@ const Text: FunctionComponent<Props> = ({
[P in Variant]: React.ComponentType<any> | string
} = {
body: 'p',
- heading: 'h2',
+ heading: 'h1',
+ pageHeading: 'h1',
}
const Component:
@@ -41,6 +42,7 @@ const Text: FunctionComponent<Props> = ({
{
[s.body]: variant === 'body',
[s.heading]: variant === 'heading',
+ [s.pageHeading]: variant === 'pageHeading',
},
className
)}
diff --git a/pages/cart.tsx b/pages/cart.tsx
index 59f278ee0..9550c8669 100644
--- a/pages/cart.tsx
+++ b/pages/cart.tsx
@@ -1,7 +1,12 @@
import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
import getAllPages from '@lib/bigcommerce/api/operations/get-all-pages'
import { Layout } from '@components/core'
-import { Container } from '@components/ui'
+import { Button } from '@components/ui'
+import { Bag, Cross, Check } from '@components/icon'
+import useCart from '@lib/bigcommerce/cart/use-cart'
+import usePrice from '@lib/bigcommerce/use-price'
+import { CartItem } from '@components/cart'
+import { Text } from '@components/ui'
export async function getStaticProps({ preview }: GetStaticPropsContext) {
const { pages } = await getAllPages()
@@ -10,16 +15,121 @@ export async function getStaticProps({ preview }: GetStaticPropsContext) {
}
}
-export default function Home({}: InferGetStaticPropsType<
+export default function Cart({}: InferGetStaticPropsType<
typeof getStaticProps
>) {
+ const { data, isEmpty } = useCart()
+ const { price: subTotal } = usePrice(
+ data && {
+ amount: data.base_amount,
+ currencyCode: data.currency.code,
+ }
+ )
+ const { price: total } = usePrice(
+ data && {
+ amount: data.cart_amount,
+ currencyCode: data.currency.code,
+ }
+ )
+
+ const items = data?.line_items.physical_items ?? []
+
+ const error = null
+ const success = null
return (
- <Container>
- <h2 className="pt-1 pb-4 text-2xl leading-7 font-bold text-base tracking-wide">
- My Cart
- </h2>
- </Container>
+ <div className="grid lg:grid-cols-12">
+ <div className="lg:col-span-8">
+ {isEmpty ? (
+ <div className="flex-1 px-4 flex flex-col justify-center items-center ">
+ <span className="border border-dashed border-white rounded-full flex items-center justify-center w-16 h-16 bg-black p-12 rounded-lg text-white">
+ <Bag className="absolute" />
+ </span>
+ <h2 className="pt-6 text-2xl font-bold tracking-wide text-center">
+ Your cart is empty
+ </h2>
+ <p className="text-accents-2 px-10 text-center pt-2">
+ Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.
+ </p>
+ </div>
+ ) : error ? (
+ <div className="flex-1 px-4 flex flex-col justify-center items-center">
+ <span className="border border-white rounded-full flex items-center justify-center w-16 h-16">
+ <Cross width={24} height={24} />
+ </span>
+ <h2 className="pt-6 text-xl font-light text-center">
+ We couldn’t process the purchase. Please check your card
+ information and try again.
+ </h2>
+ </div>
+ ) : success ? (
+ <div className="flex-1 px-4 flex flex-col justify-center items-center">
+ <span className="border border-white rounded-full flex items-center justify-center w-16 h-16">
+ <Check />
+ </span>
+ <h2 className="pt-6 text-xl font-light text-center">
+ Thank you for your order.
+ </h2>
+ </div>
+ ) : (
+ <div className="px-4 sm:px-6 flex-1">
+ <h2 className="pt-1 pb-4 text-2xl leading-7 font-bold text-base tracking-wide">
+ My Cart
+ </h2>
+ <ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accents-2 border-t border-accents-2">
+ {items.map((item) => (
+ <CartItem
+ key={item.id}
+ item={item}
+ currencyCode={data?.currency.code!}
+ />
+ ))}
+ </ul>
+ <hr className="mb-6" />
+ <Text>
+ Before you leave, take a look at these items. We picked them just
+ for you
+ </Text>
+ <div className="flex py-6 space-x-2">
+ {[1, 2, 3, 4, 5, 6].map((x) => (
+ <div className="border border-accents-3 w-full h-24 bg-accents-2 bg-opacity-50" />
+ ))}
+ </div>
+ </div>
+ )}
+ </div>
+ <div className="lg:col-span-4">
+ <div className="flex-shrink-0 px-4 py-12 sm:px-6">
+ <div className="border-t border-accents-2">
+ <ul className="py-3">
+ <li className="flex justify-between py-1">
+ <span>Subtotal</span>
+ <span>{subTotal}</span>
+ </li>
+ <li className="flex justify-between py-1">
+ <span>Taxes</span>
+ <span>Calculated at checkout</span>
+ </li>
+ <li className="flex justify-between py-1">
+ <span>Estimated Shipping</span>
+ <span className="font-bold tracking-wide">FREE</span>
+ </li>
+ </ul>
+ <div className="flex justify-between border-t border-accents-2 py-3 font-bold mb-10">
+ <span>Total</span>
+ <span>{total}</span>
+ </div>
+ </div>
+ <div className="flex flex-row justify-end">
+ <div className="w-full lg:w-72">
+ <Button href="/checkout" Component="a" width="100%">
+ Proceed to Checkout
+ </Button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
)
}
-Home.Layout = Layout
+Cart.Layout = Layout
diff --git a/pages/orders.tsx b/pages/orders.tsx
index baa334194..87c74ac8e 100644
--- a/pages/orders.tsx
+++ b/pages/orders.tsx
@@ -1,10 +1,10 @@
import { Layout } from '@components/core'
-import { Container } from '@components/ui'
+import { Container, Text } from '@components/ui'
export default function Orders() {
return (
<Container>
- <h2>My Orders</h2>
+ <Text variant="pageHeading">My Orders</Text>
</Container>
)
}
diff --git a/pages/profile.tsx b/pages/profile.tsx
index 665519b3c..a24161221 100644
--- a/pages/profile.tsx
+++ b/pages/profile.tsx
@@ -1,10 +1,10 @@
import { Layout } from '@components/core'
-import { Container } from '@components/ui'
+import { Container, Text } from '@components/ui'
export default function Profile() {
return (
<Container>
- <h2>My Profile</h2>
+ <Text variant="pageHeading">My Profile</Text>
</Container>
)
}
diff --git a/pages/wishlist.tsx b/pages/wishlist.tsx
index 03723fbc0..b169fc776 100644
--- a/pages/wishlist.tsx
+++ b/pages/wishlist.tsx
@@ -1,7 +1,7 @@
import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
import getAllPages from '@lib/bigcommerce/api/operations/get-all-pages'
import { Layout } from '@components/core'
-import { Container } from '@components/ui'
+import { Container, Text } from '@components/ui'
import { WishlistCard } from '@components/wishlist'
import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info'
@@ -35,9 +35,7 @@ export default function Home({
</ul>
</div>
<div className="col-span-8">
- <h2 className="pt-1 px-3 pb-4 text-2xl leading-7 font-bold text-base tracking-wide">
- My Wishlist
- </h2>
+ <Text variant="pageHeading">My Wishlist</Text>
<div className="group flex flex-col">
{[1, 2, 3, 4, 5, 6].map((i) => (
<WishlistCard key={i} />
From 1ee44acf59f072b5e103d98fda5f5b5d687e4275 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Sat, 24 Oct 2020 18:02:23 -0300
Subject: [PATCH 6/7] Testing new TailwindConfig
---
tailwind.config.js | 8 +++++++-
1 file changed, 7 insertions(+), 1 deletion(-)
diff --git a/tailwind.config.js b/tailwind.config.js
index b1d46ff6b..367b143de 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,7 +3,13 @@ module.exports = {
removeDeprecatedGapUtilities: true,
purgeLayersByDefault: true,
},
- purge: ['./components/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}'],
+ purge: {
+ mode: 'all',
+ content: [
+ './pages/**/*.{js,ts,jsx,tsx}',
+ './components/**/*.{js,ts,jsx,tsx}',
+ ],
+ },
theme: {
extend: {
maxWidth: {
From 3398d2811aa277a1bbdc570fcb1555cc7f39851f Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Sat, 24 Oct 2020 18:09:48 -0300
Subject: [PATCH 7/7] Testing new TailwindConfig
---
tailwind.config.js | 8 +-------
1 file changed, 1 insertion(+), 7 deletions(-)
diff --git a/tailwind.config.js b/tailwind.config.js
index 367b143de..6aca71432 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,13 +3,7 @@ module.exports = {
removeDeprecatedGapUtilities: true,
purgeLayersByDefault: true,
},
- purge: {
- mode: 'all',
- content: [
- './pages/**/*.{js,ts,jsx,tsx}',
- './components/**/*.{js,ts,jsx,tsx}',
- ],
- },
+ purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {
maxWidth: {