David/refactoring

src/app/cart/Buttons.tsx

@@ -53,24 +53,14 @@ export default function Buttons(props: {
   // used hyphen instead of dash for display
 
   return (
-    <ButtonsWrapper>
-      <QuantityButton>
-        <PlusMinusButton
-          type="button"
-          style={{ cursor: 'pointer' }}
-          onClick={decreaseQuantity}
-        >
-          –
-        </PlusMinusButton>
-        <span>{count}</span>
-        <PlusMinusButton
-          type="button"
-          style={{ cursor: 'pointer' }}
-          onClick={increaseQuantity}
-        >
-          +
-        </PlusMinusButton>
-      </QuantityButton>
-    </ButtonsWrapper>
+    <QuantityButton>
+      <PlusMinusButton type="button" onClick={decreaseQuantity}>
+        –
+      </PlusMinusButton>
+      <span>{count}</span>
+      <PlusMinusButton type="button" onClick={increaseQuantity}>
+        +
+      </PlusMinusButton>
+    </QuantityButton>
   );
 }

src/app/cart/cartItem.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState } from 'react';
+import { Body2, Body2Light, Heading4Bold } from '@/styles/fonts';
 import { removeCartItem } from '../../api/supabase/queries/cart_queries';
 
 import {
@@ -9,7 +10,7 @@ import {
   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 />
+      </TransparentButton>
+    </FavoriteDiv>
   );
 }

src/app/cart/page.tsx

@@ -3,8 +3,8 @@
 import { useRouter } from 'next/navigation';
 import { useState, useEffect } from 'react';
 import { fetchUser } from '@/api/supabase/queries/user_queries';
+import { Heading1 } from '@/styles/fonts';
 import BackButton from '../../components/BackButton/BackButton';
-import { Heading1 } from '../../styles/fonts';
 
 import OrderSummary from '../../components/OrderSummaryFolder/OrderSummary';
 
@@ -15,12 +15,12 @@ import {
 import CartItem from './cartItem';
 import NavBar from '../../components/NavBarFolder/NavBar';
 import {
-  OrderButton,
-  DeliveryContainer,
-  OrderContainer,
-  BackButtonDiv,
-  InformationContainer,
-  OutterDiv,
+  CartItemsDiv,
+  PageDiv,
+  CheckoutButton,
+  LeftColumnDiv,
+  RightColumnDiv,
+  ContentDiv,
 } from './styles';
 
 import { ProductWithQuantity } from '../../schema/schema';
@@ -52,30 +52,36 @@ 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()}
+            >
+              Check Out
+            </CheckoutButton>
+          </RightColumnDiv>
+        </ContentDiv>
+      </PageDiv>
     </div>
   );
 }

src/app/cart/styles.tsx

@@ -10,11 +10,29 @@ 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`
@@ -45,8 +63,6 @@ export const TrashIcon = styled(Trash2)`
   width: 30px;
   height: 30px;
   color: black;
-  margin-right: 30px;
-  margin-top: 28px;
 `;
 
 export const NavBarZeroIndex = styled(NavBar)`
@@ -75,8 +91,6 @@ export const ButtonsWrapper = styled.div`
   align-items: center;
   width: 200px;
   height: 50px;
-  margin-top: 20px;
-  padding: 30px;
 `;
 
 export const QuantityButton = styled.div`
@@ -100,6 +114,7 @@ export const PlusMinusButton = styled.button`
   border-color: transparent;
   font-size: 20px;
   color: ${COLORS.navy};
+  cursor: pointer;
 `;
 
 export const Label = styled.p`
@@ -108,44 +123,17 @@ 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;
-`;
-
-export const BackButtonDiv1 = styled.div`
-  display: flex;
-  flex-direction: row;
-  gap: 200px;
-  margin-bottom: 55px;
-  text-align: left;
-  width: 800px;
-  padding-left: 40px;
-  padding-right: 40px;
-`;
-
-export const Wrapper = styled.div`
-  min-height: 100%; /*or 100vh */
-  position: relative;
-  background: var(--Light-Periwinkle, #f4f7ff);
-  justify-content: space-evenly;
-  align-items: center;
-  padding-top: 25px;
-  padding-bottom: 25px;
-  padding-left: 20px;
-  gap: 20px;
+  justify-content: space-between;
+  gap: 32px;
 `;
 
 export const OrderSummaryDiv = styled.div`
-  overflow: scroll;
+  overflow: auto;
   width: 350px;
   height: 300px;
   padding: 20px;
@@ -172,7 +160,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 +189,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,12 +218,21 @@ 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 PageDiv = styled.div`
+//   display: flex;
+//   flex-direction: col;
+//   flex-wrap: wrap;
+//   justify-content: space-evenly;
+//   padding: 20px;
+// `;
 
 export const LeftColumnDiv = styled.div`
   flex: 1;

src/app/favorites/styles.ts

@@ -2,6 +2,8 @@ import styled from 'styled-components';
 
 import { Heart } from 'react-feather';
 
+import Link from 'next/link';
+import COLORS from '@/styles/colors';
 import NavBar from '../../components/NavBarFolder/NavBar';
 
 export const FavoriteDiv = styled.div`
@@ -58,6 +60,7 @@ export const HeartIcon = styled(Heart)`
 export const TransparentButton = styled.button`
   background-color: transparent;
   border: transparent;
+  cursor: pointer;
 `;
 
 export const NavBarMovedUP = styled(NavBar)`
@@ -93,3 +96,15 @@ export const Fullscreen = styled.div`
   flex-direction: column;
   align-items: center;
 `;
+
+// Consider making an image component (implementing the grey background on all images)
+export const ImageLinkWrapper = styled(Link)`
+  width: 100px;
+  height: 100px;
+  background-color: ${COLORS.lightGrey};
+  padding: 32px;
+  margin-bottom: 8px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.1);`;

src/app/globals.css

@@ -82,7 +82,7 @@
 html,
 body {
   max-width: 100vw;
-  height: 100%;
+  min-height: 100vh;
 }
 
 body {