Midpoint cleanup

calblueprint · Apr 18, 2024 · f96b62c · f96b62c
1 parent bafd81c
commit f96b62c
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 23 deletions.
diff --git 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
@@ -9,6 +9,7 @@ import {
   TransparentButton,
   LabelBox,
   ImageBackground,
+  CategorySpacing,
 } from './styles';
 
 import Buttons from './Buttons';
@@ -46,7 +47,9 @@ export default function CartItem(props: {
       </ImageBackground>
       <LabelBox>
         <Heading4Bold>{cartItemProduct.name}</Heading4Bold>
-        <Body2>Category: {cartItemProduct.category}</Body2>
+        <CategorySpacing>
+          <Body2>Category: {cartItemProduct.category}</Body2>
+        </CategorySpacing>
       </LabelBox>
       <Buttons
         productNumber={cartItemProduct.id}

diff --git a/src/app/cart/page.tsx b/src/app/cart/page.tsx
@@ -21,6 +21,7 @@ import {
   LeftColumnDiv,
   RightColumnDiv,
   ContentDiv,
+  OrderSumSectionSpacing,
 } from './styles';
 
 import { ProductWithQuantity } from '../../schema/schema';
@@ -73,14 +74,16 @@ export default function OrderPage() {
           </CartItemsDiv>
         </LeftColumnDiv>
         <RightColumnDiv>
-          <OrderSummary cart={cart} numberOfItems={numberOfItems} />
-          <CheckoutButton
-            // change this function so that the flow makes sense and that there is items within the cart
-            onClick={() => checkDelivery()}
-            disabled={numberOfItems === 0}
-          >
-            Check Out
-          </CheckoutButton>
+          <OrderSumSectionSpacing>
+            <OrderSummary cart={cart} numberOfItems={numberOfItems} />
+            <CheckoutButton
+              // change this function so that the flow makes sense and that there is items within the cart
+              onClick={() => checkDelivery()}
+              disabled={numberOfItems === 0}
+            >
+              Check Out
+            </CheckoutButton>
+          </OrderSumSectionSpacing>
         </RightColumnDiv>
       </ContentDiv>
     </PageDiv>

diff --git 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
@@ -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<Product[]>([]);
@@ -62,6 +63,9 @@ export default function OrderConfirmationDelivery() {
       <NavBar />
       <CenterDiv>
         <PageDiv>
+          <BackButtonDiv>
+            <BackButton destination="./storefront" />
+          </BackButtonDiv>
           <BottomColumnDiv>
             <LeftColumnDiv>
               <BackButton destination="./storefront" />
@@ -81,8 +85,10 @@ export default function OrderConfirmationDelivery() {
                         }}
                       />
                       <LabelBox>
-                        <Body1Bold>{cartItem.name}</Body1Bold>
-                        <Body2Light>Category: {cartItem.category}</Body2Light>
+                      <div>
+                        <span style={{ display: 'inline-block', fontWeight: 'bold', marginRight: '4px' }}>Quantity:</span>
+                        <span style={{ display: 'inline-block', fontSize: '16px' }}>{cartItem.quantity}</span>
+                      </div>
                       </LabelBox>
                     </FavoriteDiv>
                   ))}

diff --git a/src/app/orderConfirmationPickUp/page.tsx b/src/app/orderConfirmationPickUp/page.tsx
@@ -86,7 +86,7 @@ export default function OrderConfirmationPickUp() {
     <div>
       <NavBar />
       <CenterDiv>
-        <PageDiv>
+        <PageDiv>     
           <BackButtonDiv>
             <BackButton destination="./storefront" />
           </BackButtonDiv>
@@ -95,7 +95,6 @@ export default function OrderConfirmationPickUp() {
               <TextDiv>
                 <Heading3Bold>Your order has been submitted</Heading3Bold>
               </TextDiv>
-
               <OutterFavoriteDiv>
                 <TextDiv1>
                   <Heading4Bold>Order No. {orderIDFromSearch}</Heading4Bold>
@@ -116,10 +115,13 @@ export default function OrderConfirmationPickUp() {
                       <LabelBox1>
                         <Body1Bold>{cartItem.name}</Body1Bold>
                         <br />
-                        <Body2Light>Category: {cartItem.category}</Body2Light>
+                        <Body2Light style={{ marginTop: '-10px' }}>Category: {cartItem.category}</Body2Light>
                       </LabelBox1>
                       <LabelBox>
-                        <Body1Bold>Quantity: {cartItem.quantity}</Body1Bold>
+                        <div>
+                          <span style={{ display: 'inline-block', fontWeight: 'bold', marginRight: '4px' }}>Quantity:</span>
+                          <span style={{ display: 'inline-block', fontSize: '16px' }}>{cartItem.quantity}</span>
+                        </div>
                       </LabelBox>
                     </FavoriteDiv>
                   ))}
@@ -128,7 +130,7 @@ export default function OrderConfirmationPickUp() {
             </LeftColumnDiv>
             <RightColumnDiv>
               <ShippingDetailsDiv>
-                <Heading3Bold>Delivery Information</Heading3Bold>
+                <Heading3Bold>Pickup Information</Heading3Bold>
                 <DetailsHeader>Time Slot</DetailsHeader>
                 <Body1>{organizePickupTime()} (10:00 am - 12:30 pm)</Body1>
                 <DetailsHeader>Location</DetailsHeader>

diff --git 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;
-`;
+`;
diff --git 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;