diff --git a/src/app/[productId]/Buttons.tsx b/src/app/[productId]/Buttons.tsx index 80bea55a..3cfe8355 100644 --- a/src/app/[productId]/Buttons.tsx +++ b/src/app/[productId]/Buttons.tsx @@ -26,7 +26,11 @@ export default function Buttons(props: { productNumber: number }) { // used hyphen instead of dash for display const changeCart = () => { addToCart(productNumber, quantity); - toast(`you have added ${quantity} items to the cart!`); + if (quantity <= 1) { + toast(`you have added ${quantity} item to the cart!`); + } else { + toast(`you have added ${quantity} items to the cart!`); + } }; return ( diff --git a/src/app/cart/cartItem.tsx b/src/app/cart/cartItem.tsx index 375d5f11..8d461e89 100644 --- a/src/app/cart/cartItem.tsx +++ b/src/app/cart/cartItem.tsx @@ -9,6 +9,7 @@ import { TransparentButton, LabelBox, ImageBackground, + CategorySpacing, } from './styles'; import Buttons from './Buttons'; @@ -46,7 +47,9 @@ export default function CartItem(props: { {cartItemProduct.name} - Category: {cartItemProduct.category} + + Category: {cartItemProduct.category} + - - checkDelivery()} - disabled={numberOfItems === 0} - > - Check Out - + + + checkDelivery()} + disabled={numberOfItems === 0} + > + Check Out + + diff --git a/src/app/cart/styles.tsx b/src/app/cart/styles.tsx index b9cee91a..b8359c23 100644 --- a/src/app/cart/styles.tsx +++ b/src/app/cart/styles.tsx @@ -65,8 +65,9 @@ export const Backtext = styled.p` export const TrashIcon = styled(Trash2)` width: 30px; height: 30px; - color: black; + color: navy; margin-right: 30px; + margin-left: 50px; margin-top: 28px; `; @@ -102,6 +103,8 @@ export const QuantityButton = styled.div` width: 165px; height: 50px; border-radius: 8px; + font-size: 18px; + font-weight: bold; background-color: ${COLORS.white}; border: 2px solid ${COLORS.navy}; color: ${COLORS.navy}; @@ -373,3 +376,13 @@ export const CheckoutButton = styled.button` background: #0e2351; } `; + +export const CategorySpacing = styled.div` + margin-top: 15px; +`; + +export const OrderSumSectionSpacing = styled.div` + margin-left: 195px; +`; + + diff --git a/src/app/orderConfirmationDelivery/page.tsx b/src/app/orderConfirmationDelivery/page.tsx index 2d2f902d..764228d3 100644 --- a/src/app/orderConfirmationDelivery/page.tsx +++ b/src/app/orderConfirmationDelivery/page.tsx @@ -30,6 +30,7 @@ import { import { Product, User, Address } from '../../schema/schema'; import { Body1Bold } from '../orderPage/styles'; +import { BackButtonDiv } from '../orderConfirmationPickUp/styles'; export default function OrderConfirmationDelivery() { const [Cart, setCart] = useState([]); @@ -62,6 +63,9 @@ export default function OrderConfirmationDelivery() { + + + @@ -81,8 +85,10 @@ export default function OrderConfirmationDelivery() { }} /> - {cartItem.name} - Category: {cartItem.category} +
+ Quantity: + {cartItem.quantity} +
))} diff --git a/src/app/orderConfirmationPickUp/page.tsx b/src/app/orderConfirmationPickUp/page.tsx index 871a0e1e..2dd0d411 100644 --- a/src/app/orderConfirmationPickUp/page.tsx +++ b/src/app/orderConfirmationPickUp/page.tsx @@ -86,7 +86,7 @@ export default function OrderConfirmationPickUp() {
- + @@ -95,7 +95,6 @@ export default function OrderConfirmationPickUp() { Your order has been submitted - Order No. {orderIDFromSearch} @@ -116,10 +115,13 @@ export default function OrderConfirmationPickUp() { {cartItem.name}
- Category: {cartItem.category} + Category: {cartItem.category}
- Quantity: {cartItem.quantity} +
+ Quantity: + {cartItem.quantity} +
))} @@ -128,7 +130,7 @@ export default function OrderConfirmationPickUp() { - Delivery Information + Pickup Information Time Slot {organizePickupTime()} (10:00 am - 12:30 pm) Location diff --git a/src/app/orderConfirmationPickUp/styles.ts b/src/app/orderConfirmationPickUp/styles.ts index d142d103..778a6208 100644 --- a/src/app/orderConfirmationPickUp/styles.ts +++ b/src/app/orderConfirmationPickUp/styles.ts @@ -242,7 +242,7 @@ export const BackButtonDiv = styled.div` text-align: left; width: 800px; margin-left: 80px; - margin-bottom: 40px; + margin-top: 40px; `; export const WhiteBackgroundDiv = styled.div` @@ -302,7 +302,7 @@ export const ShippingDetailsDiv = styled.div` padding: 36px 34px; gap: 33px; max-height: 100%; - margin-top: 93px; + margin-top: 205px; margin-bottom: 30px; margin-right: 40px; `; @@ -322,4 +322,4 @@ export const CenterDiv = styled.div` justify-content: center; width: 100%; padding: 20px; -`; +`; \ No newline at end of file diff --git a/src/components/NavBarFolder/styles.ts b/src/components/NavBarFolder/styles.ts index fe42f4de..f96c286f 100644 --- a/src/components/NavBarFolder/styles.ts +++ b/src/components/NavBarFolder/styles.ts @@ -10,8 +10,8 @@ export const CartTotalCircle = styled.div<{ $isZero?: boolean }>` height: 24px; border-radius: 50%; position: absolute; - top: -12px; - right: -12px; + top: -13px; + right: -13px; display: flex; justify-content: center; align-items: center;