From 1ba0967500844e0f56400162327fc394391535ef Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Sat, 24 Oct 2020 19:00:57 -0300
Subject: [PATCH] Stiling

---
 components/cart/CartItem/CartItem.module.css |  7 ++++---
 components/cart/CartItem/CartItem.tsx        | 13 +++++++------
 components/ui/Text/Text.module.css           |  4 ++++
 components/ui/Text/Text.tsx                  |  4 +++-
 pages/cart.tsx                               | 11 +++++------
 5 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/components/cart/CartItem/CartItem.module.css b/components/cart/CartItem/CartItem.module.css
index 618788020..70d29fc03 100644
--- a/components/cart/CartItem/CartItem.module.css
+++ b/components/cart/CartItem/CartItem.module.css
@@ -10,8 +10,9 @@
 
 .productImage {
   position: absolute;
-  top: 0;
-  left: -10px;
-  top: 15px;
   transform: scale(1.9);
+  width: 100%;
+  height: 100%;
+  left: 30% !important;
+  top: 30% !important;
 }
diff --git a/components/cart/CartItem/CartItem.tsx b/components/cart/CartItem/CartItem.tsx
index f769a4fe1..cb3010d0f 100644
--- a/components/cart/CartItem/CartItem.tsx
+++ b/components/cart/CartItem/CartItem.tsx
@@ -55,18 +55,19 @@ const CartItem = ({
   }, [item.quantity])
 
   return (
-    <li className="flex flex-row space-x-8 py-6">
-      <div className="w-12 h-12 bg-violet relative overflow-hidden">
+    <li className="flex flex-row space-x-8 py-8">
+      <div className="w-16 h-16 bg-violet relative overflow-hidden">
         <Image
+          className={s.productImage}
           src={item.image_url}
-          width={60}
-          height={60}
+          width={150}
+          height={150}
           // The cart item image is already optimized and very small in size
           unoptimized
         />
       </div>
-      <div className="flex-1 flex flex-col justify-between text-base">
-        <span className="font-bold mb-3">{item.name}</span>
+      <div className="flex-1 flex flex-col text-base">
+        <span className="font-bold mb-5">{item.name}</span>
         <div className="flex items-center">
           <button type="button" onClick={() => increaseQuantity(-1)}>
             <Minus width={18} height={18} />
diff --git a/components/ui/Text/Text.module.css b/components/ui/Text/Text.module.css
index 00c6fcd40..6ccd57a37 100644
--- a/components/ui/Text/Text.module.css
+++ b/components/ui/Text/Text.module.css
@@ -9,3 +9,7 @@
 .pageHeading {
   @apply pt-1 pb-4 text-2xl leading-7 font-bold text-base tracking-wide;
 }
+
+.sectionHeading {
+  @apply pt-1 pb-4 text-base leading-7 text-base tracking-wide uppercase border-b border-accents-2;
+}
diff --git a/components/ui/Text/Text.tsx b/components/ui/Text/Text.tsx
index 546396526..962e3543e 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' | 'pageHeading'
+type Variant = 'heading' | 'body' | 'pageHeading' | 'sectionHeading'
 
 const Text: FunctionComponent<Props> = ({
   style,
@@ -27,6 +27,7 @@ const Text: FunctionComponent<Props> = ({
     body: 'p',
     heading: 'h1',
     pageHeading: 'h1',
+    sectionHeading: 'h2',
   }
 
   const Component:
@@ -43,6 +44,7 @@ const Text: FunctionComponent<Props> = ({
           [s.body]: variant === 'body',
           [s.heading]: variant === 'heading',
           [s.pageHeading]: variant === 'pageHeading',
+          [s.sectionHeading]: variant === 'sectionHeading',
         },
         className
       )}
diff --git a/pages/cart.tsx b/pages/cart.tsx
index 9550c8669..422b32a1d 100644
--- a/pages/cart.tsx
+++ b/pages/cart.tsx
@@ -72,9 +72,8 @@ export default function Cart({}: InferGetStaticPropsType<
           </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>
+            <Text variant="pageHeading">My Cart</Text>
+            <Text variant="sectionHeading">Review your Order</Text>
             <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
@@ -84,7 +83,7 @@ export default function Cart({}: InferGetStaticPropsType<
                 />
               ))}
             </ul>
-            <hr className="mb-6" />
+            <hr className="my-6" />
             <Text>
               Before you leave, take a look at these items. We picked them just
               for you
@@ -98,7 +97,7 @@ export default function Cart({}: InferGetStaticPropsType<
         )}
       </div>
       <div className="lg:col-span-4">
-        <div className="flex-shrink-0 px-4 py-12 sm:px-6">
+        <div className="flex-shrink-0 px-4 py-24 sm:px-6">
           <div className="border-t border-accents-2">
             <ul className="py-3">
               <li className="flex justify-between py-1">
@@ -122,7 +121,7 @@ export default function Cart({}: InferGetStaticPropsType<
           <div className="flex flex-row justify-end">
             <div className="w-full lg:w-72">
               <Button href="/checkout" Component="a" width="100%">
-                Proceed to Checkout
+                Confirm Purchase
               </Button>
             </div>
           </div>