From feebd5f3c869ee1395f299958e118b835e4c4f59 Mon Sep 17 00:00:00 2001
From: David Qing <davidqing6432@gmail.com>
Date: Wed, 3 Apr 2024 15:15:55 -0700
Subject: [PATCH] cart fixed with more responsiveness, still need to adjust the
 width to be responsive

---
 src/app/cart/Buttons.tsx  | 20 ++++++++---------
 src/app/cart/cartItem.tsx | 46 ++++++++++++++++++++-------------------
 src/app/cart/styles.tsx   | 25 +++++++++++++--------
 3 files changed, 49 insertions(+), 42 deletions(-)

diff --git a/src/app/cart/Buttons.tsx b/src/app/cart/Buttons.tsx
index 4961350d..5a1c682c 100644
--- a/src/app/cart/Buttons.tsx
+++ b/src/app/cart/Buttons.tsx
@@ -53,16 +53,14 @@ export default function Buttons(props: {
   // used hyphen instead of dash for display
 
   return (
-    <ButtonsWrapper>
-      <QuantityButton>
-        <PlusMinusButton type="button" onClick={decreaseQuantity}>
-          –
-        </PlusMinusButton>
-        <span>{count}</span>
-        <PlusMinusButton type="button" onClick={increaseQuantity}>
-          +
-        </PlusMinusButton>
-      </QuantityButton>
-    </ButtonsWrapper>
+    <QuantityButton>
+      <PlusMinusButton type="button" onClick={decreaseQuantity}>
+        –
+      </PlusMinusButton>
+      <span>{count}</span>
+      <PlusMinusButton type="button" onClick={increaseQuantity}>
+        +
+      </PlusMinusButton>
+    </QuantityButton>
   );
 }
diff --git a/src/app/cart/cartItem.tsx b/src/app/cart/cartItem.tsx
index aa9c2a9f..90a0163c 100644
--- a/src/app/cart/cartItem.tsx
+++ b/src/app/cart/cartItem.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useState } from 'react';
+import { Body2, Body2Light, Heading4Bold } from '@/styles/fonts';
 import { removeCartItem } from '../../api/supabase/queries/cart_queries';
 
 import {
@@ -9,6 +10,7 @@ import {
   TransparentButton,
   Label,
   LabelBox,
+  ImageBackground,
 } from './styles';
 
 import Buttons from './Buttons';
@@ -36,31 +38,31 @@ export default function CartItem(props: {
   }
 
   return (
-    <div>
-      <FavoriteDiv key={cartItemProduct.id}>
+    <FavoriteDiv key={cartItemProduct.id}>
+      <ImageBackground>
         <img
           src={cartItemProduct.photo}
           alt={cartItemProduct.name}
-          style={{ width: '150px', height: '150px' }}
+          style={{ width: '150px', height: '150px', objectFit: 'cover' }}
         />
-        <LabelBox>
-          <Label>{cartItemProduct.name}</Label>
-          <p>Category: {cartItemProduct.category}</p>
-        </LabelBox>
-        <Buttons
-          productNumber={cartItemProduct.id}
-          quantity={cartItemProduct.quantity}
-          setNumberOfItems={setNumberOfItems}
-          numberOfItems={numberOfItems}
-          count={count}
-          setCount={setCount}
-          setCart={setCart}
-          cart={cart}
-        />
-        <TransparentButton onClick={() => removeProduct()}>
-          <TrashIcon />
-        </TransparentButton>
-      </FavoriteDiv>
-    </div>
+      </ImageBackground>
+      <LabelBox>
+        <Heading4Bold>{cartItemProduct.name}</Heading4Bold>
+        <Body2>Category: {cartItemProduct.category}</Body2>
+      </LabelBox>
+      <Buttons
+        productNumber={cartItemProduct.id}
+        quantity={cartItemProduct.quantity}
+        setNumberOfItems={setNumberOfItems}
+        numberOfItems={numberOfItems}
+        count={count}
+        setCount={setCount}
+        setCart={setCart}
+        cart={cart}
+      />
+      <TransparentButton onClick={() => removeProduct()}>
+        <TrashIcon />
+      </TransparentButton>
+    </FavoriteDiv>
   );
 }
diff --git a/src/app/cart/styles.tsx b/src/app/cart/styles.tsx
index c8945fb6..164b2ea4 100644
--- a/src/app/cart/styles.tsx
+++ b/src/app/cart/styles.tsx
@@ -10,11 +10,19 @@ import Footer from '../../components/FooterFolder/Footer';
 export const FavoriteDiv = styled.div`
   display: flex;
   flex-direction: row;
-  align-items: start;
-  justify-content: space-around;
-  width: 1000px;
-  margin-bottom: 50px;
-  margin-top: 30px;
+  align-items: center;
+  justify-content: space-between;
+  max-width: 750px;
+  width: 100%;
+`;
+
+export const ImageBackground = styled.div`
+  width: 200px;
+  height: 200px;
+  background-color: ${COLORS.lightGrey};
+  display: flex;
+  justify-content: center;
+  align-items: center;
 `;
 
 export const CartItemsDiv = styled.div`
@@ -24,6 +32,7 @@ export const CartItemsDiv = styled.div`
   border-radius: 10px;
   width: 750px;
   overflow: auto;
+  gap: 32px;
 `;
 
 export const BackDiv = styled.button`
@@ -50,8 +59,6 @@ export const TrashIcon = styled(Trash2)`
   width: 30px;
   height: 30px;
   color: black;
-  margin-right: 30px;
-  margin-top: 28px;
 `;
 
 export const NavBarZeroIndex = styled(NavBar)`
@@ -79,7 +86,6 @@ export const ButtonsWrapper = styled.div`
   align-items: center;
   width: 200px;
   height: 50px;
-  margin-top: 20px;
 `;
 
 export const QuantityButton = styled.div`
@@ -103,6 +109,7 @@ export const PlusMinusButton = styled.button`
   border-color: transparent;
   font-size: 20px;
   color: ${COLORS.navy};
+  cursor: pointer;
 `;
 
 export const Label = styled.p`
@@ -111,7 +118,6 @@ export const Label = styled.p`
 
 export const LabelBox = styled.div`
   width: 150px;
-  height: 100%;
 `;
 
 export const PageDiv = styled.div`
@@ -120,6 +126,7 @@ export const PageDiv = styled.div`
   flex-direction: column;
   padding: 32px;
   gap: 32px;
+  background-color: ${COLORS.offWhite};
 `;
 
 export const ContentDiv = styled.div`