preStoreFrontChangesa

calblueprint · Apr 10, 2024 · 083d2b4 · 083d2b4
1 parent 19d0c3a
commit 083d2b4
Show file tree

Hide file tree

Showing 17 changed files with 202 additions and 178 deletions.
diff --git a/src/app/cart/Buttons.tsx b/src/app/cart/Buttons.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { ButtonsWrapper, QuantityButton, PlusMinusButton } from './styles';
+import {   QuantityButton, PlusMinusButton } from './styles';
 
 import {
   decreaseFromCart,
@@ -53,7 +53,7 @@ export default function Buttons(props: {
   // used hyphen instead of dash for display
 
   return (
-    <ButtonsWrapper>
+
       <QuantityButton>
         <PlusMinusButton
           type="button"
@@ -71,6 +71,6 @@ export default function Buttons(props: {
           +
         </PlusMinusButton>
       </QuantityButton>
-    </ButtonsWrapper>
+
   );
 }
diff --git a/src/app/cart/cartItem.tsx b/src/app/cart/cartItem.tsx
@@ -2,14 +2,15 @@
 
 import { useState } from 'react';
 import { removeCartItem } from '../../api/supabase/queries/cart_queries';
-
+import { Body2,Body2Light,Heading4Bold } from '@/styles/fonts';
 import {
   FavoriteDiv,
   TrashIcon,
   TransparentButton,
   Label,
   LabelBox,
   ImageDiv,
+  ImageBackground,
 } from './styles';
 
 import Buttons from './Buttons';
@@ -37,33 +38,31 @@ export default function CartItem(props: {
   }
 
   return (
-    <div>
-      <FavoriteDiv key={cartItemProduct.id}>
-        <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>
-        </LabelBox>
-        <Buttons
-          productNumber={cartItemProduct.id}
-          quantity={cartItemProduct.quantity}
-          setNumberOfItems={setNumberOfItems}
-          numberOfItems={numberOfItems}
-          count={count}
-          setCount={setCount}
-          setCart={setCart}
-          cart={cart}
+    <FavoriteDiv key={cartItemProduct.id}>
+      <ImageBackground>
+        <img
+          src={cartItemProduct.photo}
+          alt={cartItemProduct.name}
+          style={{ width: '150px', height: '150px', objectFit: 'cover' }}
         />
-        <TransparentButton onClick={() => removeProduct()}>
-          <TrashIcon style={{ cursor: 'pointer' }} />
-        </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 style={{ cursor: 'pointer' }} />
+      </TransparentButton>
+    </FavoriteDiv>
   );
 }
diff --git a/src/app/cart/page.tsx b/src/app/cart/page.tsx
@@ -4,7 +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 { Heading1 } from '@/styles/fonts';
 
 import OrderSummary from '../../components/OrderSummaryFolder/OrderSummary';
 
@@ -21,6 +21,12 @@ import {
   BackButtonDiv,
   InformationContainer,
   OutterDiv,
+  CartItemsDiv,
+  PageDiv,
+  CheckoutButton,
+  LeftColumnDiv,
+  RightColumnDiv,
+  ContentDiv,
 } from './styles';
 
 import { ProductWithQuantity } from '../../schema/schema';
@@ -52,30 +58,37 @@ export default function OrderPage() {
   return (
     <div>
       <NavBar />
-      <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>
+
+      <PageDiv>
+        <BackButton destination="./storefront" />
+        <ContentDiv>
+          <LeftColumnDiv>
+            <Heading1>Cart</Heading1>
+            <CartItemsDiv>
+              {cart.map(cartItem => (
+                <CartItem
+                  key={cartItem.id}
+                  cartItemProduct={cartItem}
+                  setCart={setCart}
+                  cart={cart}
+                  setNumberOfItems={setNumberOfItems}
+                  numberOfItems={numberOfItems}
+                />
+              ))}
+            </CartItemsDiv>
+          </LeftColumnDiv>
+          <RightColumnDiv>
             <OrderSummary cart={cart} numberOfItems={numberOfItems} />
-            <OrderButton onClick={() => checkDelivery()}>Check Out</OrderButton>
-          </OrderContainer>
-        </DeliveryContainer>
-      </OutterDiv>
+            <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>
+          </RightColumnDiv>
+        </ContentDiv>
+      </PageDiv>
     </div>
   );
 }
diff --git a/src/app/cart/styles.tsx b/src/app/cart/styles.tsx
@@ -10,15 +10,35 @@ import Footer from '../../components/FooterFolder/Footer';
 export const FavoriteDiv = styled.div`
   display: flex;
   flex-direction: row;
-  align-items: start;
-  justify-content: space-around;
+  align-items: center;
+  justify-content: space-between;
+  max-width: 750px;
   width: 100%;
-  margin-bottom: 50px;
-  margin-top: 30px;
+`;
+
+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`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-radius: 10px;
+  width: 750px;
+  overflow: auto;
+  gap: 32px;
 `;
 
 export const ImageDiv = styled.div`
-  width: 130px;
+  width: 30px;
+  height: 30px;
+  color: ${COLORS.black};
 `;
 
 export const BackDiv = styled.button`
@@ -49,12 +69,6 @@ export const TrashIcon = styled(Trash2)`
   margin-top: 28px;
 `;
 
-export const NavBarZeroIndex = styled(NavBar)`
-  z-index: 0;
-  position: fixed;
-  margin-bottom: 100px;
-`;
-
 export const FooterMoved = styled(Footer)`
   transform: translateY(300px);
 `;
@@ -63,6 +77,7 @@ export const TransparentButton = styled.button`
   background-color: transparent;
   border: transparent;
   padding-left: 40px;
+  margin-bottom: 25px;
 `;
 
 export const NavBarMovedUP = styled(NavBar)`
@@ -89,6 +104,7 @@ export const QuantityButton = styled.div`
   background-color: ${COLORS.white};
   border: 2px solid ${COLORS.navy};
   color: ${COLORS.navy};
+  cursor: pointer;
 `;
 
 export const PlusMinusButton = styled.button`
@@ -108,17 +124,13 @@ 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`
+export const ContentDiv = styled.div`
   display: flex;
   flex-direction: row;
-  min-height: 100%; /*or 100vh */
-  flex-wrap: wrap;
-  justify-content: space-evenly;
+  justify-content: space-between;
+  gap: 32px;
 `;
 
 export const BackButtonDiv1 = styled.div`
@@ -145,7 +157,7 @@ export const Wrapper = styled.div`
 `;
 
 export const OrderSummaryDiv = styled.div`
-  overflow: scroll;
+  overflow: auto;
   width: 350px;
   height: 300px;
   padding: 20px;
@@ -172,7 +184,7 @@ export const OrderTotalDiv = styled.div`
 export const LeftColumnDiv1 = styled.div`
   display: flex;
   flex-flow: column;
-  margin-left: 50px;
+  gap: 16px;
 `;
 
 export const CheckoutButton1 = styled.button`
@@ -201,8 +213,6 @@ export const Qty = styled.p`
 export const RightColumnDiv1 = styled.div`
   display: flex;
   flex-flow: column;
-  margin-left: 200px;
-  margin-top: 100px;
 `;
 
 export const WhiteBackgroundDiv = styled.div`
@@ -232,11 +242,12 @@ export const PShiftLeft = styled.p`
 `;
 
 export const PageDiv = styled.div`
+  height: 100%;
   display: flex;
-  flex-direction: col;
-  flex-wrap: wrap;
-  justify-content: space-evenly;
-  padding: 20px;
+  flex-direction: column;
+  padding: 32px;
+  gap: 32px;
+  background-color: ${COLORS.offWhite};
 `;
 
 export const LeftColumnDiv = styled.div`
@@ -343,6 +354,7 @@ export const BackButtonDiv = styled.div`
 `;
 
 export const CheckoutButton = styled.button`
+  width: 350px;
   background: #1b3679;
   color: white;
   border: none;

diff --git a/src/app/favorites/page.tsx b/src/app/favorites/page.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
-import { Body1Bold, Body2 } from '@/styles/fonts';
+import { Body1Bold, Body2, Heading1 } from '@/styles/fonts';
 import BackButton from '../../components/BackButton/BackButton';
 
 import {
@@ -21,6 +21,7 @@ import {
   TransparentButton,
   ViewItem,
   Fullscreen,
+  ImageLinkWrapper,
 } from './styles';
 
 import { Product } from '../../schema/schema';
@@ -48,15 +49,17 @@ export default function FavoritesPage() {
       <NavBar />
       <OutterBox>
         <BackButton destination="./profileScreen" />
-        <h1>Favorites</h1>
+        <Heading1>Favorites</Heading1>
         <OutterFavoriteDiv>
           {Favorites.map(favorite => (
             <FavoriteDiv key={favorite.id}>
-              <img
-                src={favorite.photo}
-                alt={favorite.name}
-                style={{ width: '150px', height: '150px' }}
-              />
+              <ImageLinkWrapper href={'' + favorite.id}>
+                <img
+                  src={favorite.photo}
+                  alt={favorite.name}
+                  style={{ width: '150px', height: '150px' }}
+                />
+              </ImageLinkWrapper>
 
               <ProductNameDiv>
                 <Body1Bold>{favorite.name}</Body1Bold>