working on frontend page

calblueprint · Nov 16, 2023 · 0b4a958 · 0b4a958
1 parent d14b33a
commit 0b4a958
Show file tree

Hide file tree

Showing 3 changed files with 133 additions and 13 deletions.
diff --git a/src/app/delivery/page.tsx b/src/app/delivery/page.tsx
@@ -1,16 +1,22 @@
 '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,
   OrderSummary,
   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
@@ -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,17 +26,49 @@ 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;
   border: 2px solid black;
 `;
 
 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,14 +99,46 @@ 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;
   align-items: center;
   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
@@ -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;