From c7207c8e1a39f733c2a5b5494643b9eb62f954c0 Mon Sep 17 00:00:00 2001 From: Bel Curcio Date: Tue, 25 May 2021 17:53:57 -0300 Subject: [PATCH] Changes --- assets/base.css | 47 +++++++----- components/auth/ForgotPassword.tsx | 2 +- components/auth/LoginView.tsx | 2 +- components/auth/SignUpView.tsx | 4 +- components/cart/CartItem/CartItem.module.css | 8 +- components/cart/CartItem/CartItem.tsx | 76 ++++++++++--------- .../CartSidebarView.module.css | 3 +- .../cart/CartSidebarView/CartSidebarView.tsx | 12 +-- .../CheckoutSidebarView.module.css | 15 +--- .../CheckoutSidebarView.tsx | 47 +++++++----- .../PaymentMethodView.module.css | 19 +++++ .../PaymentMethodView/PaymentMethodView.tsx | 70 ++++++++++++++++- .../ShippingView/ShippingView.module.css | 23 ++++++ .../checkout/ShippingView/ShippingView.tsx | 62 ++++++++++++++- components/common/Footer/Footer.tsx | 12 +-- .../HomeAllProductsGrid.tsx | 4 +- .../common/I18nWidget/I18nWidget.module.css | 8 +- components/common/Navbar/Navbar.module.css | 6 +- components/common/Searchbar/Searchbar.tsx | 2 +- .../common/UserNav/DropdownMenu.module.css | 6 +- components/common/UserNav/DropdownMenu.tsx | 2 +- components/common/UserNav/UserNav.module.css | 4 +- components/icons/ChevronRight.tsx | 20 +++++ components/icons/CreditCard.tsx | 1 + components/icons/index.ts | 1 + .../ProductCard/ProductCard.module.css | 2 +- .../product/ProductView/ProductView.tsx | 2 +- components/product/Swatch/Swatch.module.css | 2 +- components/ui/Button/Button.module.css | 10 +-- components/ui/Input/Input.module.css | 2 +- .../ui/LoadingDots/LoadingDots.module.css | 2 +- components/ui/Modal/Modal.module.css | 2 +- components/ui/Sidebar/Sidebar.tsx | 2 +- components/ui/Skeleton/Skeleton.module.css | 16 ++-- components/ui/Text/Text.module.css | 2 +- .../WishlistCard/WishlistCard.module.css | 2 +- pages/cart.tsx | 14 ++-- pages/orders.tsx | 2 +- pages/wishlist.tsx | 2 +- tailwind.config.js | 22 +++--- 40 files changed, 365 insertions(+), 175 deletions(-) create mode 100644 components/icons/ChevronRight.tsx diff --git a/assets/base.css b/assets/base.css index dfdaf1475..8182e5c80 100644 --- a/assets/base.css +++ b/assets/base.css @@ -20,16 +20,20 @@ --blue: #0070f3; --violet: #5f3dc4; --violet-light: #7048e8; - --accents-0: #f8f9fa; - --accents-1: #f1f3f5; - --accents-2: #e9ecef; - --accents-3: #dee2e6; - --accents-4: #ced4da; - --accents-5: #adb5bd; - --accents-6: #868e96; - --accents-7: #495057; - --accents-8: #343a40; - --accents-9: #212529; + + --accent-0: #fff; + --accent-05: #f8f9fa; + --accent-1: #f1f3f5; + --accent-2: #e9ecef; + --accent-3: #dee2e6; + --accent-4: #ced4da; + --accent-5: #adb5bd; + --accent-6: #868e96; + --accent-7: #495057; + --accent-8: #343a40; + --accent-9: #212529; + --accent-10: #000; + --font-sans: -apple-system, system-ui, BlinkMacSystemFont, 'Helvetica Neue', 'Helvetica', sans-serif; } @@ -48,16 +52,18 @@ --text-primary: white; --text-secondary: black; - --accents-0: #212529; - --accents-1: #343a40; - --accents-2: #495057; - --accents-3: #868e96; - --accents-4: #adb5bd; - --accents-5: #ced4da; - --accents-6: #dee2e6; - --accents-7: #e9ecef; - --accents-8: #f1f3f5; - --accents-9: #f8f9fa; + --accent-0: #000; + --accent-05: #212529; + --accent-1: #343a40; + --accent-2: #495057; + --accent-3: #868e96; + --accent-4: #adb5bd; + --accent-5: #ced4da; + --accent-6: #dee2e6; + --accent-7: #e9ecef; + --accent-8: #f1f3f5; + --accent-9: #f8f9fa; + --accent-10: #fff; } *, @@ -127,4 +133,3 @@ a { opacity: 1; } } - diff --git a/components/auth/ForgotPassword.tsx b/components/auth/ForgotPassword.tsx index 597ee328e..dbac371c7 100644 --- a/components/auth/ForgotPassword.tsx +++ b/components/auth/ForgotPassword.tsx @@ -61,7 +61,7 @@ const ForgotPassword: FC = () => { - Do you have an account? + Do you have an account? {` `} = () => { Log In
- Don't have an account? + Don't have an account? {` `} = () => { - + {' '} @@ -97,7 +97,7 @@ const SignUpView: FC = () => {
- Do you have an account? + Do you have an account? {` `} { @@ -123,18 +125,18 @@ const CartItem = ({ {options.map((option: ItemOption, i: number) => (
{option.name} {option.name === 'Color' ? ( ) : ( - + {option.value} )} @@ -148,38 +150,42 @@ const CartItem = ({ {price}
-
- - - - -
+ {!noEdit ? ( +
+ + + + +
+ ) : ( +
x{quantity}
+ )} ) } diff --git a/components/cart/CartSidebarView/CartSidebarView.module.css b/components/cart/CartSidebarView/CartSidebarView.module.css index bd55c233f..1ad1acdd7 100644 --- a/components/cart/CartSidebarView/CartSidebarView.module.css +++ b/components/cart/CartSidebarView/CartSidebarView.module.css @@ -1,6 +1,5 @@ .root { - @apply h-full flex flex-col relative w-full; - height: calc(100vh + 300px); + @apply h-full flex flex-col relative w-full relative; } .root.empty { diff --git a/components/cart/CartSidebarView/CartSidebarView.tsx b/components/cart/CartSidebarView/CartSidebarView.tsx index 56e3e4e11..7c46a95d2 100644 --- a/components/cart/CartSidebarView/CartSidebarView.tsx +++ b/components/cart/CartSidebarView/CartSidebarView.tsx @@ -47,7 +47,7 @@ const CartSidebarView: FC = () => { className="hover:text-gray-500 transition ease-in-out duration-150 flex items-center focus:outline-none" > - + Close @@ -66,7 +66,7 @@ const CartSidebarView: FC = () => {

Your cart is empty

-

+

Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.

@@ -94,13 +94,13 @@ const CartSidebarView: FC = () => {

My Cart

-
    +
      {data!.lineItems.map((item: any) => ( {
-
+
  • Subtotal @@ -126,7 +126,7 @@ const CartSidebarView: FC = () => { FREE
-
+
Total {total}
diff --git a/components/checkout/CheckoutSidebarView/CheckoutSidebarView.module.css b/components/checkout/CheckoutSidebarView/CheckoutSidebarView.module.css index bd55c233f..3f66cb0cc 100644 --- a/components/checkout/CheckoutSidebarView/CheckoutSidebarView.module.css +++ b/components/checkout/CheckoutSidebarView/CheckoutSidebarView.module.css @@ -1,16 +1,3 @@ .root { - @apply h-full flex flex-col relative w-full; - height: calc(100vh + 300px); -} - -.root.empty { - @apply bg-secondary text-secondary; -} - -.root.success { - @apply bg-green text-white; -} - -.root.error { - @apply bg-red text-white; + @apply h-full flex flex-col relative w-full relative; } diff --git a/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx b/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx index 251329a65..c8b8cdf2e 100644 --- a/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx +++ b/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx @@ -13,6 +13,7 @@ import { MapPin, CreditCard, ChevronLeft, + ChevronRight, } from '@components/icons' import useCart from '@framework/cart/use-cart' import usePrice from '@framework/product/use-price' @@ -53,7 +54,7 @@ const CheckoutSidebarView: FC = () => { className="hover:text-gray-500 transition ease-in-out duration-150 flex items-center focus:outline-none" > - + Back @@ -72,7 +73,7 @@ const CheckoutSidebarView: FC = () => {

Your cart is empty

-

+

Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.

@@ -99,10 +100,7 @@ const CheckoutSidebarView: FC = () => { <>
-

+

Checkout

@@ -111,47 +109,54 @@ const CheckoutSidebarView: FC = () => { {/* Only available with checkout set to true - Meaning that the provider does offer checkout functionality. */}
setSidebarView('PAYMENT_VIEW')} - className="rounded-md border border-accents-2 px-6 py-6 mb-4 text-center flex items-center justify-center cursor-pointer hover:border-accents-4" + className="border border-accent-2 px-6 py-5 mb-4 text-center flex items-center cursor-pointer hover:border-accent-4" > -
- -
-
- Add Payment Method +
+ + + Add Payment Method + {/* VISA #### #### #### 2345 */}
+
+ +
{/* Shipping Address */} {/* Only available with checkout set to true - Meaning that the provider does offer checkout functionality. */}
setSidebarView('SHIPPING_VIEW')} - className="rounded-md border border-accents-2 px-6 py-6 mb-4 text-center flex items-center justify-center cursor-pointer hover:border-accents-4" + className="border border-accent-2 px-6 py-5 mb-4 text-center flex items-center cursor-pointer hover:border-accent-4" > -
- -
-
- Add Shipping Address +
+ + + Add Shipping Address + {/* 1046 Kearny Street.
San Franssisco, California */}
+
+ +
-
    +
      {data!.lineItems.map((item: any) => ( ))}
-
+
  • Subtotal @@ -166,7 +171,7 @@ const CheckoutSidebarView: FC = () => { FREE
-
+
Total {total}
diff --git a/components/checkout/PaymentMethodView/PaymentMethodView.module.css b/components/checkout/PaymentMethodView/PaymentMethodView.module.css index c3a2af639..2e90f873d 100644 --- a/components/checkout/PaymentMethodView/PaymentMethodView.module.css +++ b/components/checkout/PaymentMethodView/PaymentMethodView.module.css @@ -1,2 +1,21 @@ .root { + @apply h-full flex flex-col relative w-full relative; +} + +.fieldset { + @apply flex flex-col my-3; +} + +.fieldset .label { + @apply text-accent-7 uppercase text-xs font-medium mb-2; +} + +.fieldset .input, +.fieldset .select { + @apply p-2 border border-accent-3 w-full text-sm font-normal; +} + +.fieldset .input:focus, +.fieldset .select:focus { + @apply outline-none shadow-outline-normal; } diff --git a/components/checkout/PaymentMethodView/PaymentMethodView.tsx b/components/checkout/PaymentMethodView/PaymentMethodView.tsx index 056a787c0..383e8f014 100644 --- a/components/checkout/PaymentMethodView/PaymentMethodView.tsx +++ b/components/checkout/PaymentMethodView/PaymentMethodView.tsx @@ -3,6 +3,8 @@ import s from './PaymentMethodView.module.css' import { ChevronLeft } from '@components/icons' import { UserNav } from '@components/common' import { useUI } from '@components/ui/context' +import Button from '@components/ui/Button' +import cn from 'classnames' const PaymentMethodView: FC = () => { const { setSidebarView } = useUI() @@ -18,7 +20,7 @@ const PaymentMethodView: FC = () => { className="hover:text-gray-500 transition ease-in-out duration-150 flex items-center focus:outline-none" > - + Back @@ -29,9 +31,73 @@ const PaymentMethodView: FC = () => {
-

+

Payment Method

+
+
+ + +
+
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+
+ + +
+
+ +
+
) diff --git a/components/checkout/ShippingView/ShippingView.module.css b/components/checkout/ShippingView/ShippingView.module.css index c3a2af639..7b8c40ef6 100644 --- a/components/checkout/ShippingView/ShippingView.module.css +++ b/components/checkout/ShippingView/ShippingView.module.css @@ -1,2 +1,25 @@ .root { + @apply h-full flex flex-col relative w-full relative; +} + +.fieldset { + @apply flex flex-col my-3; +} + +.fieldset .label { + @apply text-accent-7 uppercase text-xs font-medium mb-2; +} + +.fieldset .input, +.fieldset .select { + @apply p-2 border border-accent-3 w-full text-sm font-normal; +} + +.fieldset .input:focus, +.fieldset .select:focus { + @apply outline-none shadow-outline-normal; +} + +.radio { + @apply bg-black; } diff --git a/components/checkout/ShippingView/ShippingView.tsx b/components/checkout/ShippingView/ShippingView.tsx index f1c8d5c4b..111f11eaf 100644 --- a/components/checkout/ShippingView/ShippingView.tsx +++ b/components/checkout/ShippingView/ShippingView.tsx @@ -3,6 +3,8 @@ import s from './ShippingView.module.css' import { ChevronLeft } from '@components/icons' import { UserNav } from '@components/common' import { useUI } from '@components/ui/context' +import Button from '@components/ui/Button' +import cn from 'classnames' const PaymentMethodView: FC = () => { const { setSidebarView } = useUI() @@ -18,7 +20,7 @@ const PaymentMethodView: FC = () => { className="hover:text-gray-500 transition ease-in-out duration-150 flex items-center focus:outline-none" > - + Back @@ -29,9 +31,65 @@ const PaymentMethodView: FC = () => {
-

+

Shipping

+
+
+ + Same as billing address +
+
+ + + Use a different shipping address + +
+
+
+
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+
+ + +
+
+
+
+
) diff --git a/components/common/Footer/Footer.tsx b/components/common/Footer/Footer.tsx index 75b2806ef..8fde704ac 100644 --- a/components/common/Footer/Footer.tsx +++ b/components/common/Footer/Footer.tsx @@ -24,7 +24,7 @@ const Footer: FC = ({ className, pages }) => { return (