diff --git a/src/app/cart/styles.tsx b/src/app/cart/styles.tsx index ee956f99..b9593f7b 100644 --- a/src/app/cart/styles.tsx +++ b/src/app/cart/styles.tsx @@ -339,7 +339,7 @@ export const OrderContainer = styled.div` export const RightColumnDiv = styled.div` flex: 1; margin-top: 30px; - padding-left: 20px; + margin-bottom: 30px; `; export const Heading = styled.h1` @@ -379,5 +379,5 @@ export const CategorySpacing = styled.div` `; export const OrderSumSectionSpacing = styled.div` - margin-left: 135px; + margin-left: 65px; `; diff --git a/src/app/delivery/page.tsx b/src/app/delivery/page.tsx index 1e66b420..6d7540e6 100644 --- a/src/app/delivery/page.tsx +++ b/src/app/delivery/page.tsx @@ -9,7 +9,6 @@ import { import querystring from 'querystring'; import { createOrder, - fetchCurrentOrdersByUser, updateOrderStatus, } from '@/api/supabase/queries/order_queries'; import BackButton from '../../components/BackButton/BackButton'; diff --git a/src/app/favorites/individualItem.tsx b/src/app/favorites/individualItem.tsx index 7b9eea0c..c93d7088 100644 --- a/src/app/favorites/individualItem.tsx +++ b/src/app/favorites/individualItem.tsx @@ -1,10 +1,9 @@ -import React, { useEffect, useState } from 'react'; +import React, { useState } from 'react'; import { useRouter } from 'next/navigation'; import { Body1Bold, Body2, Body3 } from '@/styles/fonts'; -import { convertButtonNumberToCategory } from '@/api/supabase/queries/button_queries'; import { HeartIcon, Hover, @@ -27,20 +26,6 @@ export default function IndividualItem(props: { const router = useRouter(); const [hovering, setHovering] = useState(false); - useEffect(() => { - async function changeCategory() { - try { - favorite.category = await convertButtonNumberToCategory( - favorite.category, - ); - } catch (error) { - // console.error(error); - } - } - - changeCategory(); - }, [favorite]); - async function clickFunctions(props2: { fav: Product }) { const { fav } = props2; addOrRemoveProductFromFavorite(fav, false); diff --git a/src/app/favorites/page.tsx b/src/app/favorites/page.tsx index 6c00e83a..506e203e 100644 --- a/src/app/favorites/page.tsx +++ b/src/app/favorites/page.tsx @@ -2,6 +2,7 @@ import { useState, useEffect } from 'react'; import { Heading1 } from '@/styles/fonts'; +import { convertButtonNumberToCategory } from '@/api/supabase/queries/button_queries'; import BackButton from '../../components/BackButton/BackButton'; import { arrayOfFavorites } from '../../api/supabase/queries/user_queries'; @@ -18,7 +19,16 @@ export default function FavoritesPage() { async function fetchProducts() { const data = (await arrayOfFavorites()) as Product[]; - setFavorites(data); + const mapCategories = await Promise.all( + data.map(async product => { + const updateCategory = await convertButtonNumberToCategory( + product.category, + ); + return { ...product, category: updateCategory }; + }), + ); + + setFavorites(mapCategories); } useEffect(() => { fetchProducts(); diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx index bae4f37c..89fbfbac 100644 --- a/src/app/login/page.tsx +++ b/src/app/login/page.tsx @@ -41,13 +41,6 @@ export default function App() { } }; - async function applyFilter(e: React.KeyboardEvent) { - const keypressed = e.code; - if (keypressed === 'Enter') { - handleLogin(); - } - } - return ( ([]); diff --git a/src/app/orderConfirmationPickUp/page.tsx b/src/app/orderConfirmationPickUp/page.tsx index 9a93cb72..9dc9630b 100644 --- a/src/app/orderConfirmationPickUp/page.tsx +++ b/src/app/orderConfirmationPickUp/page.tsx @@ -6,40 +6,38 @@ import { fetchUser } from '@/api/supabase/queries/user_queries'; import { fetchPickupTimesByID } from '@/api/supabase/queries/pickup_queries'; import { getOrderById } from '@/api/supabase/queries/order_queries'; import { + Heading3Bold, Body1, Body1Bold, - Body2Light, - Heading3Bold, Heading4Bold, + Body2Light, } from '@/styles/fonts'; import { useSearchParams } from 'next/navigation'; -import { fetchCartItemsWithQuantityByID } from '../../api/supabase/queries/cart_queries'; import BackButton from '../../components/BackButton/BackButton'; import NavBar from '../../components/NavBarFolder/NavBar'; import { - TextDiv, - TextDiv1, - BackButtonDiv, FavoriteDiv, OutterFavoriteDiv, + TextDiv1, LabelBox, - LabelBox1, ScrollDiv, ShippingDetailsDiv, - ImageDiv, BottomColumnDiv, - Wrapper, LeftColumnDiv, RightColumnDiv, DetailsHeader, + ImageDiv, PageDiv, CenterDiv, + BackButtonDiv, + TextDiv, } from './styles'; import { Product, User, Pickup } from '../../schema/schema'; +import { fetchCartItemsWithQuantityByID } from '../../api/supabase/queries/cart_queries'; export default function OrderConfirmationPickUp() { const [Cart, setCart] = useState([]); @@ -66,7 +64,7 @@ export default function OrderConfirmationPickUp() { fetchProducts(); setUserDetails(); - }, []); + }); function organizePickupTime() { const startTime = pickupTime?.start_time.toLocaleString(); @@ -93,7 +91,7 @@ export default function OrderConfirmationPickUp() { - Order No. {orderIDFromSearch} + Order No. {user?.cart_id} {Cart.map(cartItem => ( @@ -108,13 +106,13 @@ export default function OrderConfirmationPickUp() { }} /> - + {cartItem.name}
Category: {cartItem.category} - +
>>>>>> 0c497ffa604d1a861f8fac67277446b2133764a5 + align-items: left; + width: 475px; `; export const BackButtonDiv = styled.div` @@ -241,8 +238,15 @@ export const BackButtonDiv = styled.div` flex-direction: row; text-align: left; width: 800px; - margin-left: 80px; - margin-top: 40px; +<<<<<<< HEAD + + margin-left: 40px; + +======= + margin-left: 40px; +>>>>>>> 0c497ffa604d1a861f8fac67277446b2133764a5 + margin-bottom: 40px; + margin-top: 20px; `; export const WhiteBackgroundDiv = styled.div` @@ -254,6 +258,13 @@ 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; + align-items: space-evenly; + justify-content: space-around; +`; + export const BottomColumnDiv = styled.div` display: flex; flex-direction: row; @@ -261,24 +272,23 @@ export const BottomColumnDiv = styled.div` justify-content: space-around; width: 100%; margin-left: 20px; + margin-right: 20px; margin-bottom: 30px; - gap: 30px; + gap: 10px; `; export const TextDiv = styled.div` display: flex; flex-direction: row; - margin-left: 60px; - margin-top: 20px; - margin-bottom: 20px; + margin-left: 20px; + margin-top: 10px; + margin-bottom: 10px; `; export const TextDiv1 = styled.div` display: flex; flex-direction: row; - padding: 10px; - margin-left: 20px; - margin-top: 15px; + margin-top: 20px; `; export const PageDiv = styled.div` @@ -287,6 +297,10 @@ export const PageDiv = styled.div` justify-content: flex-start; align-items: flex-start; width: 100%; + + position: relative; + + margin-bottom: 40px; `; export const ShippingDetailsDiv = styled.div` @@ -296,13 +310,13 @@ export const ShippingDetailsDiv = styled.div` border-radius: 10px; background: var(--White, #fff); box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2); - width: 467px; + width: 475px; height: auto; max-height: 100%; padding: 36px 34px; gap: 33px; max-height: 100%; - margin-top: 205px; + margin-top: 75px; margin-bottom: 30px; margin-right: 40px; `; @@ -320,6 +334,7 @@ export const CenterDiv = styled.div` display: flex; align-items: center; justify-content: center; + position: relative; width: 100%; padding: 20px; `; diff --git a/src/app/orderHistory/page.tsx b/src/app/orderHistory/page.tsx index e02c8e1e..232de1e7 100644 --- a/src/app/orderHistory/page.tsx +++ b/src/app/orderHistory/page.tsx @@ -1,7 +1,7 @@ 'use client'; import React, { useEffect, useState } from 'react'; -import { Heading1, Body1 } from '@/styles/fonts'; +import { Heading2, Body1 } from '@/styles/fonts'; import OrderDetailsWithProducts from '../../components/OrderHistory/OrderHistoryBox'; import { fetchOrderIdsByUserIdSorted } from '../../api/supabase/queries/order_queries'; import Footer from '../../components/FooterFolder/Footer'; @@ -10,6 +10,7 @@ import { OutterBox, NavBarMovedUP, Fullscreen, + BackButtonDiv, } from './styles'; import BackButton from '../../components/BackButton/BackButton'; @@ -29,10 +30,10 @@ function OrderHistory() { - -
- Order History -
+ + + + Order History {orderIds.length > 0 ? ( orderIds.map((orderId: number) => ( diff --git a/src/app/orderHistory/styles.ts b/src/app/orderHistory/styles.ts index a93abdc1..3ef05566 100644 --- a/src/app/orderHistory/styles.ts +++ b/src/app/orderHistory/styles.ts @@ -13,10 +13,22 @@ export const NavBarMovedUP = styled(NavBar)` position: relative; `; +export const BackButtonDiv = styled.div` + display: flex; + flex-direction: row; + gap: 200px; + margin-bottom: 30px; + margin-top: 50px; + text-align: left; + width: 800px; + padding-right: 40px; +`; + export const OutterBox = styled.div` width: 800px; margin-top: 40px; margin-bottom: 70px; + min-height: 50px; `; export const OrderHistoryContainer = styled.div` @@ -28,8 +40,8 @@ export const OrderHistoryContainer = styled.div` 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; + margin-top: 20px; + padding-top: 10px; `; export const OrderHistoryBox = styled.div` diff --git a/src/app/orderPage/page.tsx b/src/app/orderPage/page.tsx index 6d2d0fd9..d4cc521d 100644 --- a/src/app/orderPage/page.tsx +++ b/src/app/orderPage/page.tsx @@ -1,8 +1,17 @@ 'use client'; import { useState, useEffect } from 'react'; -import { Body1, Body2 } from '@/styles/fonts'; +import { + Body1, + Body2Light, + Heading3Bold, + Heading4Bold, + Heading2, + Body1Bold, +} from '@/styles/fonts'; + import { useSearchParams } from 'next/navigation'; +import { fetchPickupTimesByID } from '@/api/supabase/queries/pickup_queries'; import BackButton from '../../components/BackButton/BackButton'; import { @@ -14,17 +23,23 @@ import NavBar from '../../components/NavBarFolder/NavBar'; import { FavoriteDiv, - Body1Bold, OutterFavoriteDiv, BackButtonDiv, - OutterBox, - OutterDiv, - Heading, - ProductNameDiv, - StatusButton, + DetailsHeader, + RightColumnDiv, + TextDiv, + ImageDiv, + BottomColumnDiv, + ShippingDetailsDiv, + LabelBox, + LeftColumnDiv, + ScrollDiv, + PageDiv, + CenterDiv, + TextDiv1, } from './styles'; -import { ProductWithQuantity, Order } from '../../schema/schema'; +import { ProductWithQuantity, Order, Pickup } from '../../schema/schema'; function formatDate(date: string | undefined): string { if (!date) return ''; @@ -52,8 +67,18 @@ function formatDate(date: string | undefined): string { return `${month} ${day}, ${year}`; } +function formatTime(date: string | undefined): string { + if (!date) return ''; + + const hour = date.substring(11, 13); + const minute = date.substring(14, 16); + + return `${hour}:${minute}`; +} + export default function OrderPage() { const [orders, setOrders] = useState([]); + const [pickupTime, setPickupTime] = useState(); const searchParams = useSearchParams(); const orderIDFromSearch = searchParams.get('orderID'); let currOrderId = 0; @@ -63,6 +88,12 @@ export default function OrderPage() { currOrderId = 32; } + async function setUserDetails() { + const currOrder = await getOrderById(Number(orderIDFromSearch)); + const pickup = await fetchPickupTimesByID(currOrder.pickup_time_id); + setPickupTime(pickup); + } + const [order, setOrder] = useState(); useEffect(() => { @@ -75,41 +106,77 @@ export default function OrderPage() { setOrder(currOrder); } fetchProducts(); - }, []); + setUserDetails(); + }); + + function organizePickupTime() { + const startTime = pickupTime?.start_time.toLocaleString(); + + const date = + startTime == null + ? ['0', '0', '0'] + : startTime?.substring(0, 10).split('-'); + const dateStr = `${date[1]}/${date[2]}/${date[0]}`; + return `${dateStr}`; + } return (
+ + + + + + + + + {formatDate(order?.created_at)} + + + + Order No. {order?.id} + + + {orders.map(product => ( + + + {product.name} + - - - - - - {formatDate(order?.created_at)} - - {' '} - {order?.order_status}{' '} - - - - {orders.map(product => ( - - {product.name} - - {product.name} - Category: {product.category} - - - ))} - - + + {product.name} +
+ + Category: {product.category} + + + + Quantity: {product.quantity} + + + ))} + + + + + + Pickup Information + Time Slot + {organizePickupTime()} (10:00 am - 12:30 pm) + Location + 3170 23rd Street, San Francisco, CA 94110 + + + + +
); } diff --git a/src/app/orderPage/styles.ts b/src/app/orderPage/styles.ts index c2c236bb..52092ced 100644 --- a/src/app/orderPage/styles.ts +++ b/src/app/orderPage/styles.ts @@ -7,17 +7,51 @@ import NavBar from '../../components/NavBarFolder/NavBar'; export const FavoriteDiv = styled.div` display: flex; flex-direction: row; - align-items: start; - justify-content: space-around; + 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` + display: flex; + flex-direction: row; + align-items: space-evenly; + justify-content: space-around; + width: 100%; + margin-left: 10px; + margin-bottom: 30px; + gap: 20px; +`; + +export const ScrollDiv = styled.div` + overflow: scroll; + overflow-x: hidden; + max-width: 100%; +`; + +export const ImageDiv = styled.p` + width: 150px; + height: 150px; + align-items: center; + justify-content: center; + display: flex; + margin-right: 20px; +`; + +export const LabelBox = styled.div` + width: 200px; + height: 100%; `; 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); @@ -25,6 +59,8 @@ export const OutterFavoriteDiv = styled.div` height: 700px; overflow: scroll; margin-top: 20px; + padding-top: 15px; + margin-left: 60px; `; export const BackDiv = styled.button` @@ -66,7 +102,9 @@ export const BackButtonDiv = styled.div` display: flex; flex-direction: row; gap: 200px; - margin-bottom: 55px; + margin-bottom: 50px; + margin-top: 50px; + margin-left: 60px; text-align: left; width: 800px; `; @@ -116,21 +154,37 @@ export const ViewItem = styled.button` border-radius: 14px; `; -export const StatusButton = styled.button` +export const StatusButton = styled.button<{ status: string }>` margin-left: auto; margin-right: 0; color: black; text-align: center; - width: 210px; + max-width: 100%; height: 30px; flex-shrink: 0; padding-top: 3px; - padding-right: 10px; - padding-left: 10px; + padding-right: 30px; + padding-left: 30px; padding-bottom: 3px; + display: flex; + gap: 15px; + flex-direction: row; + align-items: center; /* Center vertically */ + justify-content: center; border: none; border-radius: 16.5px; - background: var(--Baby-Blue, #c7ddff); + background-color: ${props => { + switch (props.status) { + case 'submitted': + return 'var(--Greyish, #E6E6E6)'; + case 'rejected': + return 'var(--Light-Red, #FDD)'; + case 'approved': + return 'var(--Lime-Green, #CEE8BE)'; + default: + return 'white'; + } + }}; `; export const Body1Bold = styled.p` @@ -139,3 +193,84 @@ export const Body1Bold = styled.p` font-weight: 600; line-height: normal; `; + +export const PageDiv = styled.div` + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + width: 100%; +`; + +export const CenterDiv = styled.div` + display: flex; + align-items: center; + justify-content: center; + width: 100%; + padding: 20px; +`; + +export const DetailsHeader = styled.p` + color: var(--Navy, #1b3679); + font-family: Public Sans, sans-serif; + font-size: 20px; + font-style: normal; + font-weight: 700; + line-height: normal; +`; + +export const ShippingDetailsDiv = styled.div` + display: flex; + flex-direction: column; + align-items: flex-start; + border-radius: 10px; + background: var(--White, #fff); + box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2); + width: 467px; + height: auto; + max-height: 100%; + padding: 36px 34px; + gap: 33px; + max-height: 100%; + margin-top: 52px; + margin-bottom: 30px; + margin-right: 40px; +`; + +export const RightColumnDiv = styled.div` + display: flex; + flex-flow: column; + align-items: start; + margin-left: 10px; + width: 100%; + margin-top: 8px; +`; + +export const TextDiv1 = styled.div` + display: flex; + flex-direction: row; + margin-left: 40px; + margin-top: 20px; +`; + +export const TextDiv = styled.div` + display: flex; + flex-direction: row; + margin-left: 60px; +`; + +export const TextDiv2 = styled.div` + display: flex; + flex-direction: row; + margin-left: 40px; + margin-top: 5px; + margin-bottom: 20px; +`; + +export const LeftColumnDiv = styled.div` + display: flex; + flex-flow: column; + justify-content: space-evenly; + align-items: space-evenly; + width: 100%; +`; diff --git a/src/app/orderPageDelivery/page.tsx b/src/app/orderPageDelivery/page.tsx index 0b78c29e..07f89aaf 100644 --- a/src/app/orderPageDelivery/page.tsx +++ b/src/app/orderPageDelivery/page.tsx @@ -12,7 +12,6 @@ import { Body2Light, Heading2Bold, Heading3Bold, - Heading4Bold, } from '@/styles/fonts'; import { useSearchParams } from 'next/navigation'; import { @@ -25,8 +24,6 @@ import { } from '@/api/supabase/queries/order_queries'; import BackButton from '../../components/BackButton/BackButton'; -import { fetchCartItemsWithQuantityByID } from '../../api/supabase/queries/cart_queries'; - import NavBar from '../../components/NavBarFolder/NavBar'; import { @@ -45,15 +42,8 @@ import { StatusButton, } from './styles'; -import { - Product, - User, - Address, - ProductWithQuantity, - Order, -} from '../../schema/schema'; +import { User, Address, ProductWithQuantity, Order } from '../../schema/schema'; import { Body1Bold } from '../orderPage/styles'; -import { BackButtonDiv } from '../orderConfirmationPickUp/styles'; export default function OrderPageDelivery() { const [orders, setOrders] = useState([]); @@ -135,12 +125,11 @@ export default function OrderPageDelivery() { function organizeOrderTime() { const Time = order?.created_at.toLocaleString(); - console.log(Time); + let ampm = 'AM'; const date = Time == null ? ['00', '00'] : Time?.substring(11, 16).split(':'); - console.log(date); if (parseInt(date[0], 10) >= 12) { date[0] = (parseInt(date[0], 10) - 12).toLocaleString(); ampm = 'PM'; diff --git a/src/app/profileScreen/individualItem.tsx b/src/app/profileScreen/individualItem.tsx index 69288d69..f5f308ee 100644 --- a/src/app/profileScreen/individualItem.tsx +++ b/src/app/profileScreen/individualItem.tsx @@ -1,8 +1,7 @@ -import React, { useEffect, useState } from 'react'; +import React, { useState } from 'react'; import { Body1Bold, Body2, Body3 } from '@/styles/fonts'; -import { convertButtonNumberToCategory } from '@/api/supabase/queries/button_queries'; import { HeartIcon, Hover, FavoriteDiv, ProductNameDiv } from './styles'; import { addOrRemoveProductFromFavorite } from '../../api/supabase/queries/user_queries'; diff --git a/src/app/profileScreen/page.tsx b/src/app/profileScreen/page.tsx index ae34f0c0..70584754 100644 --- a/src/app/profileScreen/page.tsx +++ b/src/app/profileScreen/page.tsx @@ -5,11 +5,11 @@ import { toast, ToastContainer } from 'react-toastify'; import { useEffect, useState } from 'react'; import { Heading2, - Body3, Heading3, Heading1, Body1Bold, Body2Bold, + Body2Light, Body2, } from '@/styles/fonts'; import { convertButtonNumberToCategory } from '@/api/supabase/queries/button_queries'; @@ -31,13 +31,15 @@ import { fetchOrderProductById, fetchProductWithQuantityById, } from '@/api/supabase/queries/order_queries'; -import { Check, CheckCircle, X, Send } from 'react-feather'; +import { Check, X, Send } from 'react-feather'; import BackButton from '../../components/BackButton/BackButton'; import { LogOutButton, NavBarMovedUP, - AccountDetails, + AccountDetailsDeliv, + AccountDetailsPickUp, HeadingBack, + Spacing, HeadingSpacing, TextSpacing, OrderHistory, @@ -185,13 +187,13 @@ function OrderHistorySection(props: { Orders: Order[] }) { > Order No. {Orders[0].id} - {fD} - +
{icon} @@ -266,38 +268,37 @@ function AccountDetailSectionDelivery(props: { user: User }) { }, []); return (
- + Account Details Name - + {user?.first_name} {user?.last_name} - + Email - {user?.email} + {user?.email} - Phone - {user?.phone_numbers} + {user?.phone_numbers} Address - + {UserAddress?.street}, {UserAddress?.city}, {UserAddress?.zipcode} - + - +
); } @@ -306,7 +307,7 @@ function AccountDetailSectionPickUp(props: { user: User }) { return (
- + Account Details @@ -330,7 +331,7 @@ function AccountDetailSectionPickUp(props: { user: User }) { {user?.phone_numbers} - +
); } diff --git a/src/app/profileScreen/styles.ts b/src/app/profileScreen/styles.ts index 1ae59176..8f0e4090 100644 --- a/src/app/profileScreen/styles.ts +++ b/src/app/profileScreen/styles.ts @@ -21,9 +21,8 @@ export const HeadingBack = styled.div` margin-right: 75px; `; -export const AccountDetails = styled.div` - margin-top: 50px; - margin-right: 30px; +export const AccountDetailsDeliv = styled.div` + margin-top: 40px; width: 500px; height: 350px; border-radius: 10px; @@ -35,25 +34,41 @@ export const AccountDetails = styled.div` padding-top: 29px; padding-right: 29px; padding-left: 29px; - padding-bottom: 29px; + padding-bottom: 32px; +`; + +export const AccountDetailsPickUp = styled.div` + margin-top: 40px; + width: 500px; + height: 310px; + border-radius: 10px; + background: ${COLORS.white}; + box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2); + display: flex; + flex-direction: column; + align-items: left; + padding-top: 29px; + padding-right: 29px; + padding-left: 29px; + padding-bottom: 32px; + margin-bottom: 40px; `; export const OrderHistory = styled.div` - margin-top: 50px; + margin-top: 40px; width: 600px; height: 350px; border-radius: 10px; background: ${COLORS.white}; box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2); - padding-top: 23px; - padding-right: 23px; - padding-left: 23px; - padding-bottom: 23px; + padding-top: 29px; + padding-right: 29px; + padding-left: 29px; + padding-bottom: 29px; + margin-left: 60px; `; export const FavoritesContainer = styled.div` - margin-top: 50px; - width: 600px; height: 350px; border-radius: 10px; @@ -63,6 +78,8 @@ export const FavoritesContainer = styled.div` padding-right: 23px; padding-left: 23px; padding-bottom: 23px; + margin-left: 30px; + margin-top: 40px; `; export const LogOutButton = styled.button` @@ -75,6 +92,7 @@ export const LogOutButton = styled.button` font-weight: 600; line-height: normal; border: transparent; + border-radius: 5px; width: 405px; height: 50px; @@ -100,7 +118,7 @@ export const FavoriteDiv = styled.div` align-items: center; justify-content: space-around; width: 100%; - margin-bottom: 50px; + margin-bottom: 20px; margin-top: 30px; `; @@ -129,8 +147,8 @@ export const Hover = styled.div<{ $ishovering?: boolean }>` `; export const BackButtonDiv = styled.div` - margin-bottom: 30px; margin-top: 50px; + margin-bottom: 40px; `; export const HeaderDiv = styled.div` @@ -145,6 +163,11 @@ export const ProductNameDiv = styled.div` width: 250px; `; +export const Spacing = styled.div` + height: 10px; + width: 100%; +`; + export const BlankSpace = styled.div` width: 250px; height: 200px; @@ -168,12 +191,12 @@ export const ColumnDiv = styled.div` `; export const LogOutDiv = styled.div` - margin-top: 50px; margin-right: 30px; display: flex; justify-content: center; width: 500px; height: 350px; + margin-top: 40px; `; export const MessageDiv = styled.div` diff --git a/src/components/BackButton/BackButton.tsx b/src/components/BackButton/BackButton.tsx index bff2d899..d639e431 100644 --- a/src/components/BackButton/BackButton.tsx +++ b/src/components/BackButton/BackButton.tsx @@ -1,4 +1,4 @@ -import { Body1Bold } from '@/styles/fonts'; +import { Body2Bold } from '@/styles/fonts'; import { BackLink, ArrowLeftIcon } from './styles'; export default function BackButton(props: { destination: string }) { @@ -6,7 +6,7 @@ export default function BackButton(props: { destination: string }) { return ( - Back + Back ); } diff --git a/src/components/BackButton/styles.ts b/src/components/BackButton/styles.ts index 4abb943e..34fe39e8 100644 --- a/src/components/BackButton/styles.ts +++ b/src/components/BackButton/styles.ts @@ -9,14 +9,13 @@ export const BackLink = styled(Link)` align-items: center; justify-content: space-between; color: ${COLORS.black}; - width: 75px; - + width: 60px; &:hover { text-decoration: underline; } `; export const ArrowLeftIcon = styled(ArrowLeft)` - width: 20px; - height: 20px; + width: 18px; + height: 18px; `; diff --git a/src/components/FooterFolder/Footer.tsx b/src/components/FooterFolder/Footer.tsx index 45fa2c42..bb9714ef 100644 --- a/src/components/FooterFolder/Footer.tsx +++ b/src/components/FooterFolder/Footer.tsx @@ -23,105 +23,103 @@ import { ArrowUpRightIcon, } from './styles'; -export default function Footer({ ...rest }) { +export default function Footer() { const router = useRouter(); return ( -
- - - Contact Us - Phone: (415) 674-4700 - - { - window.location.href = - 'https://www.facebook.com/ShantiProjectSF/'; - }} - > - - - - - { - window.location.href = - 'https://www.youtube.com/channel/UCc3DMrL7_KDOzeJNVkoFrsA'; - }} - > - - - - - { - window.location.href = - 'https://www.instagram.com/shantiprojectsf/'; - }} - > - - - - - - - - - Mission District - - 3170 23rd Street - San Francisco, CA 94110 - - - { - window.location.href = - 'https://maps.app.goo.gl/LJWvkdhwrRMhjEZs7'; - }} - > - SEE ON MAP - - - - - - - + + Contact Us + Phone: (415) 674-4700 + + { + window.location.href = + 'https://www.facebook.com/ShantiProjectSF/'; + }} + > + + + + + router.push('/storefront')} + onClick={() => { + window.location.href = + 'https://www.youtube.com/channel/UCc3DMrL7_KDOzeJNVkoFrsA'; + }} > - Shop - - + + + + router.push('/profileScreen')} + onClick={() => { + window.location.href = + 'https://www.instagram.com/shantiprojectsf/'; + }} > - Profile - - + + + + + + + + Mission District + + 3170 23rd Street + San Francisco, CA 94110 + + + router.push('/cart')} + onClick={() => { + window.location.href = + 'https://maps.app.goo.gl/LJWvkdhwrRMhjEZs7'; + }} > - Cart - - + SEE ON MAP + + + + + + + router.push('/storefront')} + > + Shop + + router.push('/profileScreen')} + > + Profile + + router.push('/cart')} + > + Cart + + - logo pic - -
+ logo pic + ); } diff --git a/src/components/FooterFolder/styles.ts b/src/components/FooterFolder/styles.ts index 1829fe3f..98701886 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/OrderHistoryText.tsx b/src/components/OrderHistory/OrderHistoryText.tsx index 0135fce1..34200de5 100644 --- a/src/components/OrderHistory/OrderHistoryText.tsx +++ b/src/components/OrderHistory/OrderHistoryText.tsx @@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'; import { useRouter } from 'next/navigation'; import querystring from 'querystring'; -import { Heading4Bold, Body1, OrderStatusFont } from '@/styles/fonts'; +import { Heading4Bold, Body1, OrderStatusFont, Body2 } from '@/styles/fonts'; import { fetchUser } from '@/api/supabase/queries/user_queries'; import { ViewOrderButton, @@ -12,7 +12,7 @@ import { OrderStatusApprovedDiv, CrossStyled, OrderStatusSubmittedDiv, - LoaderStyled, + SendStyle, } from './styles'; // Adjust the import path as necessary import { Order, OrderStatus } from '../../schema/schema'; @@ -76,7 +76,7 @@ export default function OrderDetails(props: OrderDetailsProps) { > Order No. {orderNumber} viewOrder(orderNumber)}> - View Order + View Order
@@ -117,7 +117,7 @@ export default function OrderDetails(props: OrderDetailsProps) { > Order No. {orderNumber} viewOrder(orderNumber)}> - View Order + View Order
@@ -158,7 +158,7 @@ export default function OrderDetails(props: OrderDetailsProps) { > Order No. {orderNumber} viewOrder(orderNumber)}> - View Order + View Order @@ -171,7 +171,7 @@ export default function OrderDetails(props: OrderDetailsProps) { {formatDate(date)} - + Order Submitted diff --git a/src/components/OrderHistory/styles.ts b/src/components/OrderHistory/styles.ts index fec7e6c7..2bb0093f 100644 --- a/src/components/OrderHistory/styles.ts +++ b/src/components/OrderHistory/styles.ts @@ -1,6 +1,6 @@ // styles.ts import styled from 'styled-components'; -import { X, Check, Loader } from 'react-feather'; +import { X, Check, Send } from 'react-feather'; import COLORS from '../../styles/colors'; export const containerStyle = styled.div` @@ -165,8 +165,21 @@ export const GalleryImage = styled.img` export const RowDiv = styled.div` width: 700px; +<<<<<<< HEAD height: 300px; margin-bottom: 20px; +======= + height: 400px; + margin-bottom: 20px; + margin-top: 20px; +<<<<<<< HEAD +>>>>>>> b287da7 (temp) +======= +<<<<<<< HEAD +>>>>>>> b287da7 (temp) +======= +>>>>>>> b287da70273f0befb5c5c6b437883b203f43b605 +>>>>>>> 0c497ffa604d1a861f8fac67277446b2133764a5 `; export const OrderStatusDiv = styled.div` @@ -194,7 +207,7 @@ export const OrderStatusApprovedDiv = styled.div` export const OrderStatusSubmittedDiv = styled.div` width: 300px; height: 35px; - background: var(--Baby-Blue, #c7ddff); + background: var(--Greyish, #e6e6e6); display: flex; justify-content: center; align-items: center; @@ -212,7 +225,7 @@ export const CheckStyled = styled(Check)` margin-right: 10px; `; -export const LoaderStyled = styled(Loader)` +export const SendStyle = styled(Send)` stroke-width: 3px; margin-right: 10px; `; diff --git a/src/components/ViewAllButton/ViewAllButton.tsx b/src/components/ViewAllButton/ViewAllButton.tsx index a5a574f4..2298c75a 100644 --- a/src/components/ViewAllButton/ViewAllButton.tsx +++ b/src/components/ViewAllButton/ViewAllButton.tsx @@ -1,15 +1,14 @@ import Link from 'next/link'; -import { ArrowRight } from 'react-feather'; -import { Body1Point5 } from '@/styles/fonts'; -import { ViewAllDiv } from './styles'; +import { Body2 } from '@/styles/fonts'; +import { ArrowRightIcon, ViewAllDiv } from './styles'; export default function BackButton(props: { destination: string }) { const { destination } = props; return ( - View All - + View All + ); diff --git a/src/components/ViewAllButton/styles.ts b/src/components/ViewAllButton/styles.ts index 248778df..c77c4441 100644 --- a/src/components/ViewAllButton/styles.ts +++ b/src/components/ViewAllButton/styles.ts @@ -1,7 +1,10 @@ import styled from 'styled-components'; +import { ArrowRight } from 'react-feather'; import COLORS from '../../styles/colors'; export const ViewAllDiv = styled.div` + width: 80px; + gap: 5px; display: flex; align-items: center; color: ${COLORS.black}; @@ -13,3 +16,8 @@ export const ViewAllDiv = styled.div` `; export const placeHolder = ''; + +export const ArrowRightIcon = styled(ArrowRight)` + width: 20px; + height: 20px; +`;