From a34ef2d70f43e4bf7cb10a766ee0fec7e6c94987 Mon Sep 17 00:00:00 2001
From: Monique Cheng <monique.mc@berkeley.edu>
Date: Sun, 21 Apr 2024 11:30:25 -0700
Subject: [PATCH] changes made

---
 src/app/pickup/page.tsx                       | 20 ++++++++++++++-----
 src/app/pickup/styles.ts                      |  3 +--
 .../OrderSummaryFolder/OrderSummary.tsx       |  6 +++---
 src/components/OrderSummaryFolder/styles.ts   |  8 +++++++-
 4 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/src/app/pickup/page.tsx b/src/app/pickup/page.tsx
index 4e336ece..33e43490 100644
--- a/src/app/pickup/page.tsx
+++ b/src/app/pickup/page.tsx
@@ -42,7 +42,6 @@ import {
   ToastPopUP,
 } from './styles';
 
-
 function DateInfoComponent(date: { date: unknown }) {
   const date1 = new Date(date.date as string);
   const daysOfWeek = [
@@ -127,11 +126,22 @@ export default function PickUp() {
             </PickupContent>
             <Heading4Bold>Phone Number</Heading4Bold>
             <PickupContent>{Profile?.phone_numbers}</PickupContent>
-            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '10px' }}>
+            <div
+              style={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                marginBottom: '10px',
+              }}
+            >
               <Heading4Bold>Time Slot</Heading4Bold>
             </div>
-            <div style={{marginBottom: '10px' }}> <Body1>Pick Up times: 10:00 AM - 12:00 PM</Body1> </div>
-            <div><Body1>Location: 3170 23rd Street, San Francisco, CA 94110</Body1></div>
+            <div style={{ marginBottom: '10px' }}>
+              {' '}
+              <Body1>Pick Up times: 10:00 AM - 12:00 PM</Body1>{' '}
+            </div>
+            <div>
+              <Body1>Location: 3170 23rd Street, San Francisco, CA 94110</Body1>
+            </div>
             <div style={{ display: 'flex', justifyContent: 'space-between' }}>
               {Time.map(time => (
                 <PickupTimeButton
@@ -171,7 +181,7 @@ export default function PickUp() {
                 const queryString = querystring.stringify({ orderID });
                 router.push(`/orderConfirmationPickUp?${queryString}`);
               }
-              if (selectedPickupIndex === 0){
+              if (selectedPickupIndex === 0) {
                 toast(`You must select a pick-up date!`);
               }
             }}
diff --git a/src/app/pickup/styles.ts b/src/app/pickup/styles.ts
index 257579c3..78adbb49 100644
--- a/src/app/pickup/styles.ts
+++ b/src/app/pickup/styles.ts
@@ -7,7 +7,6 @@ import NavBar from '../../components/NavBarFolder/NavBar';
 
 import Footer from '../../components/FooterFolder/Footer';
 
-
 export const PickupContainer = styled.div`
   width: 730px;
   height: 400px;
@@ -271,4 +270,4 @@ export const ToastPopUP = styled(ToastContainer)`
   z-index: 100;
   transform: translatey(90px);
   background-color: ${COLORS.lightRed};
-`;
\ No newline at end of file
+`;
diff --git a/src/components/OrderSummaryFolder/OrderSummary.tsx b/src/components/OrderSummaryFolder/OrderSummary.tsx
index 07f03669..9cf046cc 100644
--- a/src/components/OrderSummaryFolder/OrderSummary.tsx
+++ b/src/components/OrderSummaryFolder/OrderSummary.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Body1, Body2, Heading2Bold, Body1Bold } from '@/styles/fonts';
+import { Body1, Heading2Bold, Body1Bold, Body2Light } from '@/styles/fonts';
 import {
   OrderSummaryDiv,
   HeaderShiftRight,
@@ -24,8 +24,8 @@ export default function OrderSummary(props: {
       <Heading2Bold>Order Summary</Heading2Bold>
       <AlignItemCenter>
         <OrderSummaryHeaderDiv>
-          <Body2>Product Name</Body2>
-          <Body2>Qty.</Body2>
+          <Body2Light>PRODUCT NAME</Body2Light>
+          <Body2Light>QTY</Body2Light>
         </OrderSummaryHeaderDiv>
         <OrderSummaryDiv>
           {cart.map(cartItem => (
diff --git a/src/components/OrderSummaryFolder/styles.ts b/src/components/OrderSummaryFolder/styles.ts
index e90a18ef..16fd4a3f 100644
--- a/src/components/OrderSummaryFolder/styles.ts
+++ b/src/components/OrderSummaryFolder/styles.ts
@@ -1,3 +1,4 @@
+import COLORS from '@/styles/colors';
 import styled from 'styled-components';
 
 export const OrderSummaryDiv = styled.div`
@@ -37,6 +38,10 @@ export const WhiteBackgroundDiv = styled.div`
   width: 350px;
   padding: 20px;
   box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.1);
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  flex-direction: column;
 `;
 
 export const HeaderShiftRight = styled.h2`
@@ -57,7 +62,8 @@ export const OrderSummaryHeaderDiv = styled.div`
   justify-content: space-between;
   align-items: center;
   flex-direction: row;
-  margin-bottom: 10px;
+  margin-bottom: 15px;
+  color: ${COLORS.marineBlue};
 `;
 
 export const ItemNameDiv = styled.div`