Finished making the Cart page responsive

calblueprint · Apr 8, 2024 · 1516834 · 1516834
1 parent 8c30afc
commit 1516834
Show file tree

Hide file tree

Showing 6 changed files with 142 additions and 50 deletions.
diff --git a/src/app/cart/cartItem.tsx b/src/app/cart/cartItem.tsx
@@ -9,6 +9,7 @@ import {
   TransparentButton,
   Label,
   LabelBox,
+  ImageDiv
 } from './styles';
 
 import Buttons from './Buttons';
@@ -38,11 +39,12 @@ export default function CartItem(props: {
   return (
     <div>
       <FavoriteDiv key={cartItemProduct.id}>
+        <ImageDiv>
         <img
           src={cartItemProduct.photo}
           alt={cartItemProduct.name}
-          style={{ width: '150px', height: '150px' }}
-        />
+          style={{ width: '130px', height: '130px', padding: '20px' }}/>
+          </ImageDiv>
         <LabelBox>
           <Label>{cartItemProduct.name}</Label>
           <p>Category: {cartItemProduct.category}</p>

diff --git a/src/app/cart/page.tsx b/src/app/cart/page.tsx
@@ -4,6 +4,7 @@ import { useRouter } from 'next/navigation';
 import { useState, useEffect } from 'react';
 import { fetchUser } from '@/api/supabase/queries/user_queries';
 import BackButton from '../../components/BackButton/BackButton';
+import { Heading1 } from '../../styles/fonts';
 
 import OrderSummary from '../../components/OrderSummaryFolder/OrderSummary';
 
@@ -18,8 +19,16 @@ import {
   CheckoutButton,
   LeftColumnDiv,
   RightColumnDiv,
+  OrderButton,
+  DeliveryContainer,
+  OrderContainer,
+  Container,
   Heading,
-  BackButtonDiv
+  BackButtonDiv,
+  RightColumnDiv1,
+  InformationContainer,
+  LeftColumnDiv1,
+  OutterDiv
 } from './styles';
 
 import { ProductWithQuantity } from '../../schema/schema';
@@ -51,31 +60,35 @@ export default function OrderPage() {
   return (
     <div>
       <NavBar />
-      <PageDiv>
-        <LeftColumnDiv>
-          <BackButton destination="./storefront" />
-          <h1>Cart</h1>
-          {cart.map(cartItem => (
-            <CartItem
-              key={cartItem.id}
-              cartItemProduct={cartItem}
-              setCart={setCart}
-              cart={cart}
-              setNumberOfItems={setNumberOfItems}
-              numberOfItems={numberOfItems}
-            />
-          ))}
-        </LeftColumnDiv>
-        <RightColumnDiv>
+      <OutterDiv>
+      <BackButtonDiv>
+          <BackButton destination="/storefront" />
+          </BackButtonDiv>
+      <DeliveryContainer>
+
+          <InformationContainer>
+          <Heading1 style={{ marginBottom: '38px'}}>Cart</Heading1>
+            {cart.map(cartItem => (
+              <CartItem
+                key={cartItem.id}
+                cartItemProduct={cartItem}
+                setCart={setCart}
+                cart={cart}
+                setNumberOfItems={setNumberOfItems}
+                numberOfItems={numberOfItems}
+              />
+            ))}
+          </InformationContainer>
+        <OrderContainer>
           <OrderSummary cart={cart} numberOfItems={numberOfItems} />
-          <CheckoutButton
-            // change this function so that the flow makes sense and that there is items within the cart
+          <OrderButton
             onClick={() => checkDelivery()}
           >
             Check Out
-          </CheckoutButton>
-        </RightColumnDiv>
-      </PageDiv>
+          </OrderButton>
+        </OrderContainer>
+      </DeliveryContainer>
+      </OutterDiv>
     </div>
   );
 }
diff --git a/src/app/cart/styles.tsx b/src/app/cart/styles.tsx
@@ -12,11 +12,15 @@ export const FavoriteDiv = styled.div`
   flex-direction: row;
   align-items: start;
   justify-content: space-around;
-  width: 1000px;
+  width: 100%;
   margin-bottom: 50px;
   margin-top: 30px;
 `;
 
+export const ImageDiv = styled.div`
+  width: 130px;
+`;
+
 export const BackDiv = styled.button`
   display: flex;
   flex-direction: row;
@@ -58,6 +62,7 @@ export const FooterMoved = styled(Footer)`
 export const TransparentButton = styled.button`
   background-color: transparent;
   border: transparent;
+  padding-left: 40px;
 `;
 
 export const NavBarMovedUP = styled(NavBar)`
@@ -71,6 +76,7 @@ export const ButtonsWrapper = styled.div`
   width: 200px;
   height: 50px;
   margin-top: 20px;
+  padding: 30px;
 `;
 
 export const QuantityButton = styled.div`
@@ -103,6 +109,8 @@ export const Label = styled.p`
 export const LabelBox = styled.div`
   width: 150px;
   height: 100%;
+  padding-left: 40px;
+  padding-right: 40px;
 `;
 
 export const PageDiv1 = styled.div`
@@ -120,13 +128,8 @@ export const BackButtonDiv1 = styled.div`
   margin-bottom: 55px;
   text-align: left;
   width: 800px;
-`;
-
-export const Heading1 = styled.h1`
-  font-family: 'Public Sans', sans-serif;
-  color: black;
-  margin-bottom: 0px;
-  font-size: 30px;
+  padding-left: 40px;
+  padding-right: 40px;
 `;
 
 export const Wrapper = styled.div`
@@ -137,24 +140,22 @@ export const Wrapper = styled.div`
   align-items: center;
   padding-top: 25px;
   padding-bottom: 25px;
-  padding-right: 10px;
-  padding-left: 10px;
-  gap: 50px;
+  padding-left: 20px;
+  gap: 20px;
 `;
 
 export const OrderSummaryDiv = styled.div`
   overflow: scroll;
   width: 350px;
   height: 300px;
+  padding: 20px;
 `;
 
 export const ItemSummaryDiv = styled.div`
   display: flex;
   flex-direction: row;
   margin-bottom: 20px;
   justify-content: space-between;
-  padding-left: 10px;
-  padding-right: 10px;
 `;
 
 export const OrderTotalDiv = styled.div`
@@ -232,9 +233,9 @@ export const PShiftLeft = styled.p`
 
 export const PageDiv = styled.div`
   display: flex;
+  flex-direction: col;
   flex-wrap: wrap;
   justify-content: space-evenly;
-  flex-direction: row;
   padding: 20px;
 `;
 
@@ -243,6 +244,84 @@ export const LeftColumnDiv = styled.div`
   padding-right: 20px;
 `;
 
+export const InformationText = styled.div`
+  width: 730px;
+  height: 50px;
+  border-radius: 4px;
+  margin-top: 14px;
+  margin-bottom: 14px;
+  border: 1px solid ${COLORS.neutralGrey};
+  background: ${COLORS.lightGrey};
+  display: flex; /* Use flexbox */
+  align-items: center; /* Center vertically */
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  padding-left: 20px;
+`;
+
+export const DeliveryContainer = styled.div`
+  margin-left: 80px;
+  margin-right: 80px;
+  margin-bottom: 80px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: col;
+`;
+
+export const InformationContainer = styled.div`
+  width: 100%;
+  height: 100%;
+  margin: 40px;
+`;
+
+
+export const OutterDiv = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const OrderButton = styled.button`
+  margin-top: 26px;
+  width: 350px;
+  height: 50px;
+  flex-shrink: 0;
+  align-items: center;
+  background: ${COLORS.navy};
+  border-radius: 8px;
+  color: ${COLORS.white};
+  font-size: 20px;
+  font-family: 'Public Sans', sans-serif;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+`;
+
+export const OrderSummary = styled.div`
+  width: 350px;
+  height: 360px;
+  border-radius: 8px;
+  background: ${COLORS.white};
+  box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.15);
+  align-items: center;
+`;
+
+export const OrderContainer = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: end;
+  justify-content: center;
+`;
+
 export const RightColumnDiv = styled.div`
   flex: 1;
   padding-left: 20px;
@@ -256,7 +335,11 @@ export const Heading = styled.h1`
 `;
 
 export const BackButtonDiv = styled.div`
-  margin-bottom: 20px;
+  display: flex;
+  flex-direction: row;
+  text-align: left;
+  width: 800px;
+  margin-left: 40px;
 `;
 
 export const CheckoutButton = styled.button`

diff --git a/src/app/delivery/page.tsx b/src/app/delivery/page.tsx
@@ -11,7 +11,7 @@ import {
   fetchCartItemsWithQuantity,
   totalNumberOfItemsInCart,
 } from '../../api/supabase/queries/cart_queries';
-import { Normal700Text } from '../../styles/fonts';
+import { Heading1, Normal700Text } from '../../styles/fonts';
 import { ProductWithQuantity, User, Address } from '../../schema/schema';
 import OrderSummary from '../../components/OrderSummaryFolder/OrderSummary';
 import NavBar from '../../components/NavBarFolder/NavBar';
@@ -22,9 +22,7 @@ import {
   InformationContainer,
   InformationText,
   BackButtonDiv,
-  OutterDiv,
-  Normal700Text,
-  Heading1
+  OutterDiv
 } from './styles';
 
 export default function App() {
@@ -56,7 +54,6 @@ export default function App() {
           <BackButton destination="/storefront" />
           </BackButtonDiv>
       <DeliveryContainer>
-
         <InformationContainer>
           <Heading1 style={{ marginBottom: '38px'}}>
             Shipping

diff --git a/src/app/orderConfirmationPickUp/page.tsx b/src/app/orderConfirmationPickUp/page.tsx
@@ -70,7 +70,7 @@ export default function OrderConfirmationPickUp() {
       <CenterBox>
         <OutterBox>
           <Heading3Bold>
-            Thank you, {user?.first_name}. Your order has been placed.
+            Thank you, {user?.first_name}. Your order has been submitted.
           </Heading3Bold>
 
           <OutterFavoriteDiv>

diff --git a/src/components/OrderSummaryFolder/styles.ts b/src/components/OrderSummaryFolder/styles.ts
@@ -6,7 +6,6 @@ export const OrderSummaryDiv = styled.div`
   height: 300px;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
 `;
 
 export const ItemSummaryDiv = styled.div`
@@ -34,10 +33,9 @@ export const Qty = styled.p`
 export const WhiteBackgroundDiv = styled.div`
   border-radius: 8px;
   background: var(--White, #fff);
-  height: 480px;
+  height: 455px;
   width: 350px;
-  padding-top: 20px;
-
+  padding: 20px;
   box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.1);
 `;
 
@@ -65,7 +63,6 @@ export const OrderSummaryHeaderDiv = styled.div`
 export const ItemNameDiv = styled.div`
   width: 200px;
   overflow: hidden;
-  height: 25px;
 `;
 
 export const AlignItemCenter = styled.div`