DONE?

calblueprint · Apr 21, 2024 · 884e7b8 · 884e7b8
1 parent c014eba
commit 884e7b8
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 25 deletions.
diff --git a/src/app/delivery/page.tsx b/src/app/delivery/page.tsx
@@ -35,7 +35,7 @@ import {
   InformationText,
   BackButtonDiv,
   OutterDiv,
-  InformationField, Label, Input 
+  InformationField, Label, Input, Heading4Bold, ForceColumnDiv
 } from './styles';
 
 export default function App() {
@@ -65,12 +65,18 @@ export default function App() {
     <main>
       <NavBar />
       <OutterDiv>
+
+
+        <DeliveryContainer>
+        <ForceColumnDiv>
         <BackButtonDiv>
           <BackButton destination="/storefront" />
         </BackButtonDiv>
-        <DeliveryContainer>
-
+
+        <Heading4Bold style={{marginLeft:"41px", marginTop:"20px"}}>Delivery</Heading4Bold>
+
         <InformationContainer>
+
             <Label>Name</Label>
             <Input/>{`${Profile?.first_name} ${Profile?.last_name}`}<Input/>
             <Label>Address</Label>
@@ -79,18 +85,9 @@ export default function App() {
             <Input/>{Profile?.phone_numbers}<Input/>
 
         </InformationContainer>
+        </ForceColumnDiv>
+
 
-          {/* <InformationContainer>
-            <Heading1 style={{ marginBottom: '38px' }}>Shipping</Heading1>
-            <Normal700Text>Name</Normal700Text>
-            <InformationText>
-              {`${Profile?.first_name} ${Profile?.last_name}`}
-            </InformationText>
-            <Normal700Text>Address</Normal700Text>
-            <InformationText>
-              {UserAddress?.street}, {UserAddress?.city}, {UserAddress?.zipcode}
-            </InformationText>
-          </InformationContainer> */}
           <OrderContainer>
             <OrderSummary cart={cart} numberOfItems={numberOfItems} />
             <OrderButton
@@ -112,3 +109,19 @@ export default function App() {
     </main>
   );
 }
+
+
+
+
+
+          // {/* <InformationContainer>
+          //   <Heading1 style={{ marginBottom: '38px' }}>Shipping</Heading1>
+          //   <Normal700Text>Name</Normal700Text>
+          //   <InformationText>
+          //     {`${Profile?.first_name} ${Profile?.last_name}`}
+          //   </InformationText>
+          //   <Normal700Text>Address</Normal700Text>
+          //   <InformationText>
+          //     {UserAddress?.street}, {UserAddress?.city}, {UserAddress?.zipcode}
+          //   </InformationText>
+          // </InformationContainer> */}
diff --git a/src/app/delivery/styles.ts b/src/app/delivery/styles.ts
@@ -138,6 +138,7 @@ export const OutterDiv = styled.div`
 
 export const InformationContainer = styled.div`
   width: 629px;
+  height: 327px;
   margin: 40px;
   display: flex;
   flex-direction: column;
@@ -159,9 +160,11 @@ export const InformationField = styled.div`
 `;
 
 export const Label = styled.div`
-  font-size: 20px;
+  color: var(--Black, #101010);
+  font-family: "Public Sans";
+  font-size: 25px;
   font-style: normal;
-  font-weight: 400;
+  font-weight: 700;
   line-height: normal;
   margin-right: 20px; /* Space between label and input */
 `;
@@ -172,5 +175,27 @@ export const Input = styled.div`
   border-radius: 4px;
   padding-left: 20px;
   font-size: 20px;
+  color: var(--Black, #101010);
+
+  /* Body 1 - Text */
+  font-family: "Public Sans";
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  `;
+
+  export const Heading4Bold = styled.p`
+  font-family: 'Public Sans', sans-serif;
+  font-size: 25px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
 `;
 
+
+export const ForceColumnDiv = styled.div`
+  display: flex;
+  flex-flow: column;
+  margin-left: 50px;
+`;
diff --git a/src/app/pickup/page.tsx b/src/app/pickup/page.tsx
@@ -36,6 +36,7 @@ import {
   PickupContent,
   PickupContainer,
   PickupTimeButton,
+  InformationContainer
 } from './styles';
 
 function DateInfoComponent(date: { date: unknown }) {
@@ -110,12 +111,21 @@ export default function PickUp() {
             <Heading4Bold style={{ marginBottom: '38px', fontSize: '40px' }}>
               Pick Up
             </Heading4Bold>
-            <Heading4Bold>Name</Heading4Bold>
+            <InformationContainer>
+              <Heading4Bold>Name</Heading4Bold>
+              <PickupContent>
+                {Profile?.first_name} {Profile?.last_name}
+              </PickupContent>
+              <Heading4Bold>Phone Number</Heading4Bold>
+              <PickupContent>{Profile?.phone_numbers}</PickupContent>
+            </InformationContainer>
+            {/* <Heading4Bold>Name</Heading4Bold>
             <PickupContent>
               {Profile?.first_name} {Profile?.last_name}
             </PickupContent>
             <Heading4Bold>Phone Number</Heading4Bold>
-            <PickupContent>{Profile?.phone_numbers}</PickupContent>
+            <PickupContent>{Profile?.phone_numbers}</PickupContent> */}
+
             <div style={{ display: 'flex', justifyContent: 'space-between' }}>
               <Heading4Bold>Time Slot</Heading4Bold>
             </div>

diff --git a/src/app/pickup/styles.ts b/src/app/pickup/styles.ts
@@ -9,19 +9,19 @@ import Footer from '../../components/FooterFolder/Footer';
 export const PickupContainer = styled.div`
   width: 730px;
   height: 400px;
-  padding-left: 22px;
+  // padding-left: 22px;
 `;
 
 export const PickupContent = styled.div`
-  width: 730px;
+  // width: 730px;
   height: 50px;
-  border-radius: 4px;
+  // border-radius: 4px;
   margin-top: 14px;
   margin-bottom: 14px;
-  border: 1px solid ${COLORS.neutralGrey};
-  background: ${COLORS.lightGrey};
+  // border: 1px solid ${COLORS.neutralGrey};
+  // background: ${COLORS.lightGrey};
   display: flex; /* Use flexbox */
-  align-items: center; /* Center vertically */
+  align-items: left; /* Vertically center the child items */
   font-size: 20px;
   font-style: normal;
   font-weight: 400;
@@ -263,3 +263,18 @@ export const HeaderShiftLeft = styled.h2`
 export const PShiftLeft = styled.p`
   margin-left: 15px;
 `;
+
+export const InformationContainer = styled.div`
+  width: 629px;
+  height: 215;
+  // margin: 40px;
+  margin-bottom: 40px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: left;
+  background: ${COLORS.white}; /* Assuming white is defined in your COLORS */
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+  padding: 20px 25px;
+`;
diff --git a/src/app/profileScreen/page.tsx b/src/app/profileScreen/page.tsx
@@ -360,7 +360,7 @@ function LogoutSection() {
     signOut();
     toast("You've been Logged Out! Redirecting...", {
       position: toast.POSITION.TOP_CENTER,
-    });
+    });  
     setTimeout(() => {
       router.push('/login');
     }, 3000);