From fa502e6d72a9bef56dd3e619357417bafc56d2f8 Mon Sep 17 00:00:00 2001
From: Amritanshu <git@tanshu.com>
Date: Sat, 26 Oct 2024 16:14:44 +0530
Subject: [PATCH] Made background white cart page updated

---
 src/app/(storefront)/cart/page.tsx     | 110 +++++++++++--------------
 src/app/(storefront)/products/page.tsx |   2 +-
 src/app/globals.css                    |   8 +-
 3 files changed, 55 insertions(+), 65 deletions(-)

diff --git a/src/app/(storefront)/cart/page.tsx b/src/app/(storefront)/cart/page.tsx
index a11e923..444f873 100644
--- a/src/app/(storefront)/cart/page.tsx
+++ b/src/app/(storefront)/cart/page.tsx
@@ -3,7 +3,6 @@
 import { Minus, Plus, Trash2 } from 'lucide-react';
 
 import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
 import { Separator } from '@/components/ui/separator';
 import { useCart } from '@/providers/cart';
 
@@ -11,69 +10,56 @@ export default function MyCartComponent() {
   const { cart, updateQuantity, removeItem } = useCart();
 
   return (
-    <div className='container mx-auto px-4 py-8'>
-      <h1 className='text-3xl font-bold mb-8'>My Cart</h1>
-      <div className='grid gap-8 md:grid-cols-3'>
-        <div className='md:col-span-2'>
-          {cart?.items?.map((item) => (
-            <Card key={item.id} className='mb-4'>
-              <CardContent className='p-4'>
-                <div className='flex items-center'>
-                  {/* <img
-                    src={item.image}
-                    alt={item.name}
-                    className="w-20 h-20 object-cover rounded mr-4"
-                  /> */}
-                  <div className='flex-grow'>
-                    <h3 className='font-semibold'>
-                      {item.product_title} ({item.variant_title})
-                    </h3>
-                    <p className='text-sm text-gray-600'>₹{item.unit_price}</p>
-                  </div>
-                  <div className='flex items-center'>
-                    <Button variant='outline' size='icon' onClick={() => updateQuantity(item.id, item.quantity - 1)}>
-                      <Minus className='h-4 w-4' />
-                    </Button>
-                    <span className='mx-2 min-w-[2ch] text-center'>{item.quantity}</span>
-                    <Button variant='outline' size='icon' onClick={() => updateQuantity(item.id, item.quantity + 1)}>
-                      <Plus className='h-4 w-4' />
-                    </Button>
-                  </div>
-                  <Button variant='ghost' size='icon' className='ml-4' onClick={() => removeItem(item.id)}>
-                    <Trash2 className='h-4 w-4' />
-                  </Button>
-                </div>
-              </CardContent>
-            </Card>
-          ))}
+    <div className='pb-12 pt-28 flex flex-wrap flex-col md:flex-row'>
+      <h1 className='text-3xl font-bold mb-8 basis-full'>My Cart</h1>
+      <div className='gap-8 basis-3/4 divide-y divide-slate-200 border-y border-slate-200'>
+        {cart?.items?.map((item) => (
+          <div key={item.id} className='p-4 flex items-center'>
+            {item.thumbnail && (
+              <img src={item.thumbnail} alt={item.title} className='w-20 h-20 object-cover rounded mr-4' />
+            )}
+            <div className='flex-grow'>
+              <h3 className='font-semibold'>
+                {item.product_title} ({item.variant_title})
+              </h3>
+              <p className='text-sm text-gray-600'>₹{item.unit_price}</p>
+            </div>
+            <div className='flex items-center'>
+              <Button variant='outline' size='icon' onClick={() => updateQuantity(item.id, item.quantity - 1)}>
+                <Minus className='h-4 w-4' />
+              </Button>
+              <span className='mx-2 min-w-[2ch] text-center'>{item.quantity}</span>
+              <Button variant='outline' size='icon' onClick={() => updateQuantity(item.id, item.quantity + 1)}>
+                <Plus className='h-4 w-4' />
+              </Button>
+            </div>
+            <Button variant='ghost' size='icon' className='ml-4' onClick={() => removeItem(item.id)}>
+              <Trash2 className='h-4 w-4' />
+            </Button>
+          </div>
+        ))}
+      </div>
+      <div className='basis-1/4 p-4 bg-[#f5f5f5]'>
+        <h3 className='font-semibold leading-none tracking-tight'>Summary</h3>
+        <div className='space-y-1'>
+          <div className='flex justify-between'>
+            <span>Subtotal</span>
+            <span>₹{cart?.subtotal?.toFixed(2)}</span>
+          </div>
+          <div className='flex justify-between'>
+            <span>Tax</span>
+            <span>₹{cart?.tax_total?.toFixed(2)}</span>
+          </div>
         </div>
-        <div>
-          <Card>
-            <CardHeader>
-              <CardTitle>Order Summary</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <div className='space-y-1'>
-                <div className='flex justify-between'>
-                  <span>Subtotal</span>
-                  <span>₹{cart?.subtotal?.toFixed(2)}</span>
-                </div>
-                <div className='flex justify-between'>
-                  <span>Tax</span>
-                  <span>₹{cart?.tax_total?.toFixed(2)}</span>
-                </div>
-              </div>
-            </CardContent>
-            <Separator />
-            <CardFooter className='justify-between'>
-              <span className='font-semibold'>Total</span>
-              <span className='font-semibold'>₹{cart?.total?.toFixed(2)}</span>
-            </CardFooter>
-          </Card>
-          <Button className='w-full mt-4' size='lg'>
-            Proceed to Checkout
-          </Button>
+        <Separator />
+        <div className='flex justify-between'>
+          <span className='font-semibold'>Total</span>
+          <span className='font-semibold'>₹{cart?.total?.toFixed(2)}</span>
         </div>
+        <Button className='w-full mt-4 bg-white' size='lg'>
+          Proceed to Checkout
+        </Button>
+        Need Help? Call us at 9915020200
       </div>
     </div>
   );
diff --git a/src/app/(storefront)/products/page.tsx b/src/app/(storefront)/products/page.tsx
index 57fb88d..684b32e 100644
--- a/src/app/(storefront)/products/page.tsx
+++ b/src/app/(storefront)/products/page.tsx
@@ -32,7 +32,7 @@ async function fetchProducts() {
 export default async function ProductsPage() {
   const products: HttpTypes.StoreProduct[] = await fetchProducts();
   return (
-    <div className='py-12 pt-28'>
+    <div className='pb-12 pt-28'>
       {/* Products Grid */}
       <div
         className='grid gap-8 mb-8'
diff --git a/src/app/globals.css b/src/app/globals.css
index ebffe3c..8eac878 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -3,7 +3,9 @@
 @tailwind utilities;
 
 :root {
-  --background: 20, 18%, 97%;
+  /* --background: 20, 18%, 97%; */
+  --background: 0, 0%, 100%;
+  /* --foreground: 358, 39%, 32%; */
   --foreground: 358, 39%, 32%;
   --normal-font: 1.25rem;
   --title-font: 3rem;
@@ -13,7 +15,9 @@
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --background: 20, 18%, 97%;
+    /* --background: 20, 18%, 97%; */
+    --background: 0, 0%, 100%;
+    /* --foreground: 358, 39%, 32%; */
     --foreground: 358, 39%, 32%;
   }
 }