From 0b4a9580b73c7e037befec5104ec00e182d55210 Mon Sep 17 00:00:00 2001
From: Celine Choi <celinejwchoi@berkeley.edu>
Date: Thu, 16 Nov 2023 00:26:35 -0800
Subject: [PATCH] working on frontend page

---
 src/app/delivery/page.tsx  | 45 +++++++++++++++++++--
 src/app/delivery/styles.ts | 82 +++++++++++++++++++++++++++++++++++++-
 src/styles/fonts.tsx       | 19 +++++----
 3 files changed, 133 insertions(+), 13 deletions(-)

diff --git a/src/app/delivery/page.tsx b/src/app/delivery/page.tsx
index cbd73cd4..37d39963 100644
--- a/src/app/delivery/page.tsx
+++ b/src/app/delivery/page.tsx
@@ -1,9 +1,8 @@
 'use client';
 
-// import React from 'react';
+import React from 'react';
 import NavBar from '../../components/NavBar';
 import { GlobalStyle } from '../../styles/components';
-import { Heading1 } from '../../styles/fonts';
 import {
   DeliveryContainer,
   OrderContainer,
@@ -11,6 +10,13 @@ import {
   OrderButton,
   InformationContainer,
   InformationText,
+  PublicSans700Text,
+  ItemText,
+  QtyText,
+  QuantityText,
+  ItemQuantityContainer,
+  ItemQuantityRow,
+  TotalContainer,
 } from './styles';
 
 export default function App() {
@@ -20,12 +26,43 @@ export default function App() {
       <NavBar />
       <DeliveryContainer>
         <InformationContainer>
-          <Heading1>Shipping</Heading1>
+          <PublicSans700Text style={{ marginBottom: '38px', fontSize: '40px' }}>
+            Shipping
+          </PublicSans700Text>
+          <PublicSans700Text>Name</PublicSans700Text>
           <InformationText>Ethan Auyeung</InformationText>
+          <PublicSans700Text>Address</PublicSans700Text>
           <InformationText>123 Telegraph Ave</InformationText>
         </InformationContainer>
         <OrderContainer>
-          <OrderSummary />
+          <OrderSummary>
+            <PublicSans700Text
+              style={{
+                marginTop: '27px',
+                fontSize: '30px',
+                textAlign: 'center',
+              }}
+            >
+              Order Summary
+            </PublicSans700Text>
+            <QtyText>Qty.</QtyText>
+            <ItemQuantityContainer>
+              <ItemQuantityRow>
+                <ItemText>Plush Toy</ItemText>
+                <QuantityText>1</QuantityText>
+              </ItemQuantityRow>
+              <ItemQuantityRow>
+                <ItemText>Item C</ItemText>
+                <QuantityText>2</QuantityText>
+              </ItemQuantityRow>
+            </ItemQuantityContainer>
+            <TotalContainer>
+              <ItemQuantityRow style={{ marginTop: '23px' }}>
+                <ItemText>Order Total</ItemText>
+                <QuantityText>3</QuantityText>
+              </ItemQuantityRow>
+            </TotalContainer>
+          </OrderSummary>
           <OrderButton>Place Order</OrderButton>
         </OrderContainer>
       </DeliveryContainer>
diff --git a/src/app/delivery/styles.ts b/src/app/delivery/styles.ts
index 304335a9..e0f86095 100644
--- a/src/app/delivery/styles.ts
+++ b/src/app/delivery/styles.ts
@@ -1,6 +1,19 @@
 import styled from 'styled-components';
+import { Public_Sans } from 'next/font/google';
 import COLORS from '../../styles/colors';
 
+const publicSans700 = Public_Sans({
+  weight: '700',
+  style: 'normal',
+  subsets: ['latin'],
+});
+
+const publicSans400 = Public_Sans({
+  weight: '700',
+  style: 'normal',
+  subsets: ['latin'],
+});
+
 export const DeliveryContainer = styled.div`
   margin-top: 50px;
   margin-left: 80px;
@@ -13,6 +26,37 @@ export const DeliveryContainer = styled.div`
   border: 2px solid black;
 `;
 
+export const PublicSans700Text = styled.div`
+  font-family: ${publicSans700};
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+`;
+
+export const QtyText = styled.div`
+  margin: 30px;
+  font-family: ${publicSans400};
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  text-align: right;
+`;
+
+export const ItemText = styled.div`
+  font-family: ${publicSans400};
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+`;
+
+export const QuantityText = styled.div`
+  font-family: ${publicSans400};
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  text-align: right;
+`;
+
 export const InformationContainer = styled.div`
   width: 730px;
   height: 400px;
@@ -20,10 +64,11 @@ export const InformationContainer = styled.div`
 `;
 
 export const InformationText = styled.div`
-  width: 700px;
+  width: 730px;
   height: 50px;
-  margin: 10px;
   border-radius: 4px;
+  margin-top: 14px;
+  margin-bottom: 14px;
   border: 1px solid ${COLORS.neutralGrey};
   background: ${COLORS.lightGrey};
   display: flex; /* Use flexbox */
@@ -36,6 +81,7 @@ export const InformationText = styled.div`
 `;
 
 export const OrderContainer = styled.div`
+  margin-top: 50px;
   width: 350px;
   height: 450px;
   display: flex;
@@ -53,7 +99,38 @@ export const OrderSummary = styled.div`
   align-items: center;
 `;
 
+export const ItemQuantityContainer = styled.div`
+  margin-top: 100px
+  width: 300px;
+  height: 152px;
+  display: flex;
+  flex-direction: column;
+  // use overflow-y if we want to implement scroll bar
+  overflow-y: auto;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid ${COLORS.neutralGrey};
+`;
+
+export const ItemQuantityRow = styled.div`
+  width: 285px;
+  height: 25px;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 30px;
+`;
+
+export const TotalContainer = styled.div`
+  width: 350px;
+  height: 75px;
+  border-top: 1px solid black;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
 export const OrderButton = styled.button`
+  margin-top: 26px;
   width: 350px;
   height: 50px;
   flex-shrink: 0;
@@ -61,6 +138,7 @@ export const OrderButton = styled.button`
   background: ${COLORS.navy};
   border-radius: 8px;
   color: ${COLORS.white};
+  font-family: ${publicSans700};
   font-size: 20px;
   font-style: normal;
   font-weight: 700;
diff --git a/src/styles/fonts.tsx b/src/styles/fonts.tsx
index 6780d04e..86738fc4 100644
--- a/src/styles/fonts.tsx
+++ b/src/styles/fonts.tsx
@@ -1,16 +1,21 @@
-// import React from 'react-native';
-import styled from 'styled-components/native';
+import { Public_Sans } from 'next/font/google';
+import styled from 'styled-components';
 
-export const Heading1 = styled.Text`
-  font-family: public-sans;
+const publicSansFont = Public_Sans({
+  weight: '700',
+  style: 'normal',
+  subsets: ['latin'],
+});
+
+export const Heading1 = styled.div`
+  font-family: ${publicSansFont};
   font-size: 40px;
   font-style: normal;
-  font-weight: 700;
   line-height: normal;
 `;
 
-export const Heading4 = styled.Text`
-  font-family: public-sans;
+export const Heading4 = styled.div`
+  font-family: ${publicSansFont};
   font-size: 15px;
   font-style: normal;
   font-weight: 400;