Finished making the Cart page responsive

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

Hide file tree

Showing 7 changed files with 52 additions and 61 deletions.
diff --git a/src/app/cart/Buttons.tsx b/src/app/cart/Buttons.tsx
@@ -55,11 +55,19 @@ export default function Buttons(props: {
   return (
     <ButtonsWrapper>
       <QuantityButton>
-        <PlusMinusButton type="button" style={{ cursor: 'pointer' }} onClick={decreaseQuantity}>
+        <PlusMinusButton
+          type="button"
+          style={{ cursor: 'pointer' }}
+          onClick={decreaseQuantity}
+        >
           –
         </PlusMinusButton>
         <span>{count}</span>
-        <PlusMinusButton type="button" style={{ cursor: 'pointer' }} onClick={increaseQuantity}>
+        <PlusMinusButton
+          type="button"
+          style={{ cursor: 'pointer' }}
+          onClick={increaseQuantity}
+        >
           +
         </PlusMinusButton>
       </QuantityButton>

diff --git a/src/app/cart/cartItem.tsx b/src/app/cart/cartItem.tsx
@@ -9,7 +9,7 @@ import {
   TransparentButton,
   Label,
   LabelBox,
-  ImageDiv
+  ImageDiv,
 } from './styles';
 
 import Buttons from './Buttons';
@@ -40,11 +40,12 @@ export default function CartItem(props: {
     <div>
       <FavoriteDiv key={cartItemProduct.id}>
         <ImageDiv>
-        <img
-          src={cartItemProduct.photo}
-          alt={cartItemProduct.name}
-          style={{ width: '130px', height: '130px', padding: '20px' }}/>
-          </ImageDiv>
+          <img
+            src={cartItemProduct.photo}
+            alt={cartItemProduct.name}
+            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
@@ -15,20 +15,12 @@ import {
 import CartItem from './cartItem';
 import NavBar from '../../components/NavBarFolder/NavBar';
 import {
-  PageDiv,
-  CheckoutButton,
-  LeftColumnDiv,
-  RightColumnDiv,
   OrderButton,
   DeliveryContainer,
   OrderContainer,
-  Container,
-  Heading,
   BackButtonDiv,
-  RightColumnDiv1,
   InformationContainer,
-  LeftColumnDiv1,
-  OutterDiv
+  OutterDiv,
 } from './styles';
 
 import { ProductWithQuantity } from '../../schema/schema';
@@ -61,13 +53,12 @@ export default function OrderPage() {
     <div>
       <NavBar />
       <OutterDiv>
-      <BackButtonDiv>
+        <BackButtonDiv>
           <BackButton destination="/storefront" />
-          </BackButtonDiv>
-      <DeliveryContainer>
-
+        </BackButtonDiv>
+        <DeliveryContainer>
           <InformationContainer>
-          <Heading1 style={{ marginBottom: '38px'}}>Cart</Heading1>
+            <Heading1 style={{ marginBottom: '38px' }}>Cart</Heading1>
             {cart.map(cartItem => (
               <CartItem
                 key={cartItem.id}
@@ -79,15 +70,11 @@ export default function OrderPage() {
               />
             ))}
           </InformationContainer>
-        <OrderContainer>
-          <OrderSummary cart={cart} numberOfItems={numberOfItems} />
-          <OrderButton
-            onClick={() => checkDelivery()}
-          >
-            Check Out
-          </OrderButton>
-        </OrderContainer>
-      </DeliveryContainer>
+          <OrderContainer>
+            <OrderSummary cart={cart} numberOfItems={numberOfItems} />
+            <OrderButton onClick={() => checkDelivery()}>Check Out</OrderButton>
+          </OrderContainer>
+        </DeliveryContainer>
       </OutterDiv>
     </div>
   );

diff --git a/src/app/cart/styles.tsx b/src/app/cart/styles.tsx
@@ -282,7 +282,6 @@ export const InformationContainer = styled.div`
   margin: 40px;
 `;
 
-
 export const OutterDiv = styled.div`
   display: flex;
   flex-direction: column;
@@ -339,7 +338,7 @@ export const BackButtonDiv = styled.div`
   flex-direction: row;
   text-align: left;
   width: 800px;
-  margin-left: 40px;
+  margin-left: 110px;
 `;
 
 export const CheckoutButton = styled.button`

diff --git a/src/app/delivery/page.tsx b/src/app/delivery/page.tsx
@@ -22,7 +22,7 @@ import {
   InformationContainer,
   InformationText,
   BackButtonDiv,
-  OutterDiv
+  OutterDiv,
 } from './styles';
 
 export default function App() {
@@ -52,30 +52,28 @@ export default function App() {
       <OutterDiv>
         <BackButtonDiv>
           <BackButton destination="/storefront" />
-          </BackButtonDiv>
-      <DeliveryContainer>
-        <InformationContainer>
-          <Heading1 style={{ marginBottom: '38px'}}>
-            Shipping
-          </Heading1>
-          <Normal700Text>Name</Normal700Text>
-          <InformationText>
-            {`${Profile?.first_name} ${Profile?.last_name}`}
-          </InformationText>
-          <Normal700Text>Address</Normal700Text>
-          <InformationText>
-            {UserAddress?.street}, {UserAddress?.city}, {UserAddress?.zipcode}
-          </InformationText>
-        </InformationContainer>
-        <OrderContainer>
-          <OrderSummary cart={cart} numberOfItems={numberOfItems} />
-          <OrderButton
-            onClick={() => router.push('/orderConfirmationDelivery')}
-          >
-            Place Order
-          </OrderButton>
-        </OrderContainer>
-      </DeliveryContainer>
+        </BackButtonDiv>
+        <DeliveryContainer>
+          <InformationContainer>
+            <Heading1 style={{ marginBottom: '38px' }}>Shipping</Heading1>
+            <Normal700Text>Name</Normal700Text>
+            <InformationText>
+              {`${Profile?.first_name} ${Profile?.last_name}`}
+            </InformationText>
+            <Normal700Text>Address</Normal700Text>
+            <InformationText>
+              {UserAddress?.street}, {UserAddress?.city}, {UserAddress?.zipcode}
+            </InformationText>
+          </InformationContainer>
+          <OrderContainer>
+            <OrderSummary cart={cart} numberOfItems={numberOfItems} />
+            <OrderButton
+              onClick={() => router.push('/orderConfirmationDelivery')}
+            >
+              Place Order
+            </OrderButton>
+          </OrderContainer>
+        </DeliveryContainer>
       </OutterDiv>
     </main>
   );

diff --git a/src/app/delivery/styles.ts b/src/app/delivery/styles.ts
@@ -154,4 +154,4 @@ export const BackButtonDiv = styled.div`
 export const OutterDiv = styled.div`
   display: flex;
   flex-direction: column;
-`;
+`;
diff --git a/src/styles/fonts.tsx b/src/styles/fonts.tsx
@@ -85,7 +85,6 @@ export const Heading5Bold = styled.p`
   font-weight: 600;
   line-height: normal;
   margin-bottom: 28px;
-  
 `;
 
 export const Heading5 = styled.p`
@@ -103,7 +102,6 @@ export const Body1 = styled.p`
   font-style: normal;
   font-weight: 400;
   line-height: normal;
-  
 `;
 
 export const Body1Bold = styled.p`