From 46a8b0359eb827142b5b9bedb518d8db5ecd4830 Mon Sep 17 00:00:00 2001 From: CharlotteLaw Date: Sun, 21 Apr 2024 15:01:24 -0700 Subject: [PATCH] fixed after rebasing --- src/app/orderConfirmationPickUp/page.tsx | 4 -- src/app/orderConfirmationPickUp/styles.ts | 5 +-- src/app/orderHistory/page.tsx | 13 +------ src/app/orderHistory/styles.ts | 14 +------ src/app/orderPage/page.tsx | 47 +++++++++++++---------- src/app/orderPage/styles.ts | 32 +++++++-------- src/app/profileScreen/page.tsx | 11 ++---- src/app/profileScreen/styles.ts | 12 ------ src/components/BackButton/BackButton.tsx | 18 +-------- src/components/BackButton/styles.ts | 19 --------- src/components/FooterFolder/Footer.tsx | 4 +- src/components/FooterFolder/styles.ts | 3 +- src/components/OrderHistory/styles.ts | 2 +- src/components/ViewAllButton/styles.ts | 1 - 14 files changed, 56 insertions(+), 129 deletions(-) diff --git a/src/app/orderConfirmationPickUp/page.tsx b/src/app/orderConfirmationPickUp/page.tsx index fd2d7c18..87f454cf 100644 --- a/src/app/orderConfirmationPickUp/page.tsx +++ b/src/app/orderConfirmationPickUp/page.tsx @@ -55,13 +55,10 @@ export default function OrderConfirmationPickUp() { const searchParams = useSearchParams(); const orderIDFromSearch = searchParams.get('orderID'); - useEffect(() => { async function fetchProducts() { - const cartItems = (await fetchCartItemsWithQuantityByID( orderIDFromSearch, - )) as Product[]; setCart(cartItems); } @@ -161,7 +158,6 @@ export default function OrderConfirmationPickUp() { - diff --git a/src/app/orderConfirmationPickUp/styles.ts b/src/app/orderConfirmationPickUp/styles.ts index 5e993154..d31ade33 100644 --- a/src/app/orderConfirmationPickUp/styles.ts +++ b/src/app/orderConfirmationPickUp/styles.ts @@ -99,14 +99,12 @@ export const Label = styled.p` margin-top: 20px; `; - export const ImageDiv = styled.p` width: 150px; height: 150px; align-items: center; justify-content: center; display: flex; - `; export const LabelBox = styled.div` @@ -244,7 +242,6 @@ export const WhiteBackgroundDiv = styled.div` box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.1); `; - export const Wrapper2 = styled.div` display: flex; flex-direction: col; @@ -331,4 +328,4 @@ export const CenterDiv = styled.div` position: relative; width: 100%; padding: 20px; -`; \ No newline at end of file +`; diff --git a/src/app/orderHistory/page.tsx b/src/app/orderHistory/page.tsx index 6c57ea2a..232de1e7 100644 --- a/src/app/orderHistory/page.tsx +++ b/src/app/orderHistory/page.tsx @@ -31,20 +31,9 @@ function OrderHistory() { - -<<<<<<< HEAD -<<<<<<< HEAD -
- Order History -
-======= + Order History ->>>>>>> b287da7 (temp) -======= - - Order History ->>>>>>> b287da70273f0befb5c5c6b437883b203f43b605 {orderIds.length > 0 ? ( orderIds.map((orderId: number) => ( diff --git a/src/app/orderHistory/styles.ts b/src/app/orderHistory/styles.ts index 4746ba4c..f6d06db4 100644 --- a/src/app/orderHistory/styles.ts +++ b/src/app/orderHistory/styles.ts @@ -36,24 +36,12 @@ export const OrderHistoryContainer = styled.div` flex-direction: column; align-items: center; border-radius: 10px; -<<<<<<< HEAD background: ${COLORS.white}; box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2); width: 800px; // Width of the outer box height: auto; - margin-top: 10px; - padding-top: 40px; -======= - background: var(--White, #fff); - background-color: pink; - box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2); - width: 800px; // Width of the outer box - height: 700px; - overflow: scroll; margin-top: 20px; - margin-bottom: 50px; - padding: 0; // Ensure there's no padding pushing the internal boxes inward ->>>>>>> b287da7 (temp) + padding-top: 10px; `; export const OrderHistoryBox = styled.div` diff --git a/src/app/orderPage/page.tsx b/src/app/orderPage/page.tsx index 27bfbf09..ef75b971 100644 --- a/src/app/orderPage/page.tsx +++ b/src/app/orderPage/page.tsx @@ -2,7 +2,16 @@ import { useState, useEffect } from 'react'; import { Check, X, Send } from 'react-feather'; -import { Body1, Body2Light, Heading3Bold, Heading4Bold, Body2, Heading2, Body1Bold } from '@/styles/fonts'; +import { + Body1, + Body2Light, + Heading3Bold, + Heading4Bold, + Body3, + Body2, + Heading2, + Body1Bold, +} from '@/styles/fonts'; import { useSearchParams } from 'next/navigation'; import BackButton from '../../components/BackButton/BackButton'; @@ -87,7 +96,7 @@ export default function OrderPage() { } fetchProducts(); }, []); - + const status = order?.order_status?.toLowerCase() || 'default'; return ( @@ -101,24 +110,24 @@ export default function OrderPage() { - {formatDate(order?.created_at)} + Order No. {order?.id} - - Order No - + + Order Date: {order?.id} + - {orders.map(product => ( - - - {product.name} - + {orders.map(product => ( + + + {product.name} + {product.name} @@ -162,12 +171,8 @@ export default function OrderPage() { - ); } - - - diff --git a/src/app/orderPage/styles.ts b/src/app/orderPage/styles.ts index 122fc5fe..9424e7aa 100644 --- a/src/app/orderPage/styles.ts +++ b/src/app/orderPage/styles.ts @@ -5,16 +5,16 @@ import { Heart } from 'react-feather'; import NavBar from '../../components/NavBarFolder/NavBar'; export const FavoriteDiv = styled.div` -display: flex; -flex-direction: row; -align-items: center; -justify-content: space-between; -width: 100%; -margin-bottom: 50px; -margin-top: 30px; -margin-right: 20px; -margin-left: 40px; -gap: 70px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + width: 100%; + margin-bottom: 50px; + margin-top: 30px; + margin-right: 20px; + margin-left: 40px; + gap: 70px; `; export const BottomColumnDiv = styled.div` @@ -25,7 +25,7 @@ export const BottomColumnDiv = styled.div` width: 100%; margin-left: 10px; margin-bottom: 30px; - gap: 10px; + gap: 20px; `; export const ScrollDiv = styled.div` @@ -48,10 +48,10 @@ export const LabelBox = styled.div` height: 100%; `; -export const OutterFavoriteDiv = styled.div` +export const OutterFavoriteDiv = styled.div` display: flex; flex-direction: column; - align-items: center; + align-items: left; border-radius: 10px; background: var(--White, #fff); box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2); @@ -60,6 +60,7 @@ export const OutterFavoriteDiv = styled.div` overflow: scroll; margin-top: 20px; padding-top: 15px; + margin-left: 60px; `; export const BackDiv = styled.button` @@ -185,7 +186,6 @@ export const StatusButton = styled.button<{ status: string }>` }}; `; - export const Body1Bold = styled.p` font-size: 16px; font-style: normal; @@ -242,12 +242,14 @@ export const RightColumnDiv = styled.div` align-items: start; margin-left: 10px; width: 100%; + margin-top: 8px; `; export const TextDiv1 = styled.div` display: flex; flex-direction: row; margin-top: 20px; + background-color: pink; `; export const TextDiv = styled.div` @@ -264,4 +266,4 @@ export const LeftColumnDiv = styled.div` justify-content: space-evenly; align-items: space-evenly; width: 100%; -`; \ No newline at end of file +`; diff --git a/src/app/profileScreen/page.tsx b/src/app/profileScreen/page.tsx index 6a46952f..588c86d3 100644 --- a/src/app/profileScreen/page.tsx +++ b/src/app/profileScreen/page.tsx @@ -87,12 +87,9 @@ function FavoriteSection(props: { style={{ width: '100px', height: '100px' }} /> - - {favorite.name} - - - Category: {favorite.category} - + {favorite.name} + + Category: {favorite.category} clickFunctions({ fav: favorite })} @@ -436,7 +433,7 @@ export default function Profile() { - + diff --git a/src/app/profileScreen/styles.ts b/src/app/profileScreen/styles.ts index 016c1444..5272fd80 100644 --- a/src/app/profileScreen/styles.ts +++ b/src/app/profileScreen/styles.ts @@ -92,22 +92,10 @@ export const LogOutButton = styled.button` font-weight: 600; line-height: normal; border: transparent; -<<<<<<< HEAD -<<<<<<< HEAD - border-radius: 5px; - width: 405px; - height: 50px; -======= -======= ->>>>>>> b287da70273f0befb5c5c6b437883b203f43b605 border-radius: 10px; width: 500px; height: 55px; margin-top: 40px; -<<<<<<< HEAD ->>>>>>> b287da7 (temp) -======= ->>>>>>> b287da70273f0befb5c5c6b437883b203f43b605 `; /* transform: translateY(200px); */ diff --git a/src/components/BackButton/BackButton.tsx b/src/components/BackButton/BackButton.tsx index d10762db..a59c6d92 100644 --- a/src/components/BackButton/BackButton.tsx +++ b/src/components/BackButton/BackButton.tsx @@ -1,12 +1,4 @@ -<<<<<<< HEAD -<<<<<<< HEAD -import { Body1Bold } from '@/styles/fonts'; -======= -import { Body1, Body2Bold } from '@/styles/fonts'; ->>>>>>> b287da7 (temp) -======= -import { Body1, Body2Bold } from '@/styles/fonts'; ->>>>>>> b287da70273f0befb5c5c6b437883b203f43b605 +import { Body1Bold, Body1, Body2Bold } from '@/styles/fonts'; import { BackLink, ArrowLeftIcon } from './styles'; export default function BackButton(props: { destination: string }) { @@ -14,15 +6,7 @@ export default function BackButton(props: { destination: string }) { return ( -<<<<<<< HEAD -<<<<<<< HEAD - Back -======= Back ->>>>>>> b287da7 (temp) -======= - Back ->>>>>>> b287da70273f0befb5c5c6b437883b203f43b605 ); } diff --git a/src/components/BackButton/styles.ts b/src/components/BackButton/styles.ts index d20ac5bd..34fe39e8 100644 --- a/src/components/BackButton/styles.ts +++ b/src/components/BackButton/styles.ts @@ -9,32 +9,13 @@ export const BackLink = styled(Link)` align-items: center; justify-content: space-between; color: ${COLORS.black}; -<<<<<<< HEAD -<<<<<<< HEAD - width: 75px; - -======= - width: 60px; ->>>>>>> b287da7 (temp) -======= width: 60px; ->>>>>>> b287da70273f0befb5c5c6b437883b203f43b605 &:hover { text-decoration: underline; } `; export const ArrowLeftIcon = styled(ArrowLeft)` -<<<<<<< HEAD -<<<<<<< HEAD - width: 20px; - height: 20px; -======= - width: 18px; - height: 18px; ->>>>>>> b287da7 (temp) -======= width: 18px; height: 18px; ->>>>>>> b287da70273f0befb5c5c6b437883b203f43b605 `; diff --git a/src/components/FooterFolder/Footer.tsx b/src/components/FooterFolder/Footer.tsx index 45fa2c42..7cb4eef9 100644 --- a/src/components/FooterFolder/Footer.tsx +++ b/src/components/FooterFolder/Footer.tsx @@ -26,7 +26,7 @@ import { export default function Footer({ ...rest }) { const router = useRouter(); return ( -
+ Contact Us @@ -122,6 +122,6 @@ export default function Footer({ ...rest }) { }} /> -
+ ); } diff --git a/src/components/FooterFolder/styles.ts b/src/components/FooterFolder/styles.ts index 1829fe3f..e9c70d54 100644 --- a/src/components/FooterFolder/styles.ts +++ b/src/components/FooterFolder/styles.ts @@ -119,7 +119,8 @@ export const SVGWrapper = styled.div` `; export const Wrapper = styled.div` - min-height: 100%; /*or 100vh */ + min-height: 100%; + width:100%; position: relative; background: var(--Light-Periwinkle, #f4f7ff); display: flex; diff --git a/src/components/OrderHistory/styles.ts b/src/components/OrderHistory/styles.ts index b82b034c..bc97dbb0 100644 --- a/src/components/OrderHistory/styles.ts +++ b/src/components/OrderHistory/styles.ts @@ -203,7 +203,7 @@ export const OrderStatusApprovedDiv = styled.div` export const OrderStatusSubmittedDiv = styled.div` width: 300px; height: 35px; - background: var(--Greyish, #E6E6E6); + background: var(--Greyish, #e6e6e6); display: flex; justify-content: center; align-items: center; diff --git a/src/components/ViewAllButton/styles.ts b/src/components/ViewAllButton/styles.ts index 17ce6d93..c77c4441 100644 --- a/src/components/ViewAllButton/styles.ts +++ b/src/components/ViewAllButton/styles.ts @@ -2,7 +2,6 @@ import styled from 'styled-components'; import { ArrowRight } from 'react-feather'; import COLORS from '../../styles/colors'; - export const ViewAllDiv = styled.div` width: 80px; gap: 5px;