From 083d2b4ca10581b73761c34a7fa9e6bd56b760b9 Mon Sep 17 00:00:00 2001 From: Buyankhuu Tsolmonkhuu Date: Wed, 10 Apr 2024 00:02:26 -0700 Subject: [PATCH] preStoreFrontChangesa --- src/app/cart/Buttons.tsx | 6 +-- src/app/cart/cartItem.tsx | 55 ++++++++++---------- src/app/cart/page.tsx | 61 +++++++++++++--------- src/app/cart/styles.tsx | 64 ++++++++++++++---------- src/app/favorites/page.tsx | 17 ++++--- src/app/favorites/styles.ts | 16 ++++++ src/app/globals.css | 2 +- src/app/layout.tsx | 6 +-- src/app/login/page.tsx | 2 +- src/app/login/styles.ts | 2 +- src/app/profileScreen/styles.ts | 9 ++-- src/app/storefront/StoreFrontNavBar.tsx | 20 ++++---- src/components/BackButton/BackButton.tsx | 15 +++--- src/components/BackButton/styles.ts | 19 +++---- src/components/NavBarFolder/NavBar.tsx | 29 ++++++----- src/components/NavBarFolder/styles.ts | 48 ++++++++---------- src/components/ViewAllButton/styles.ts | 9 +--- 17 files changed, 202 insertions(+), 178 deletions(-) diff --git a/src/app/cart/Buttons.tsx b/src/app/cart/Buttons.tsx index b83ee081..fccc9a8f 100644 --- a/src/app/cart/Buttons.tsx +++ b/src/app/cart/Buttons.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { ButtonsWrapper, QuantityButton, PlusMinusButton } from './styles'; +import { QuantityButton, PlusMinusButton } from './styles'; import { decreaseFromCart, @@ -53,7 +53,7 @@ export default function Buttons(props: { // used hyphen instead of dash for display return ( - + - + ); } diff --git a/src/app/cart/cartItem.tsx b/src/app/cart/cartItem.tsx index b314023e..f0970f5c 100644 --- a/src/app/cart/cartItem.tsx +++ b/src/app/cart/cartItem.tsx @@ -2,7 +2,7 @@ import { useState } from 'react'; import { removeCartItem } from '../../api/supabase/queries/cart_queries'; - +import { Body2,Body2Light,Heading4Bold } from '@/styles/fonts'; import { FavoriteDiv, TrashIcon, @@ -10,6 +10,7 @@ import { Label, LabelBox, ImageDiv, + ImageBackground, } from './styles'; import Buttons from './Buttons'; @@ -37,33 +38,31 @@ export default function CartItem(props: { } return ( -
- - - {cartItemProduct.name} - - - -

Category: {cartItemProduct.category}

- - + + {cartItemProduct.name} - removeProduct()}> - - - -
+ + + {cartItemProduct.name} + Category: {cartItemProduct.category} + + + removeProduct()}> + + + ); } diff --git a/src/app/cart/page.tsx b/src/app/cart/page.tsx index ae188ffc..66b96ba0 100644 --- a/src/app/cart/page.tsx +++ b/src/app/cart/page.tsx @@ -4,7 +4,7 @@ import { useRouter } from 'next/navigation'; import { useState, useEffect } from 'react'; import { fetchUser } from '@/api/supabase/queries/user_queries'; import BackButton from '../../components/BackButton/BackButton'; -import { Heading1 } from '../../styles/fonts'; +import { Heading1 } from '@/styles/fonts'; import OrderSummary from '../../components/OrderSummaryFolder/OrderSummary'; @@ -21,6 +21,12 @@ import { BackButtonDiv, InformationContainer, OutterDiv, + CartItemsDiv, + PageDiv, + CheckoutButton, + LeftColumnDiv, + RightColumnDiv, + ContentDiv, } from './styles'; import { ProductWithQuantity } from '../../schema/schema'; @@ -52,30 +58,37 @@ export default function OrderPage() { return (
- - - - - - - Cart - {cart.map(cartItem => ( - - ))} - - + + + + + + Cart + + {cart.map(cartItem => ( + + ))} + + + - checkDelivery()}>Check Out - - - + checkDelivery()} + disabled={numberOfItems == 0} + > + Check Out + + + +
); } diff --git a/src/app/cart/styles.tsx b/src/app/cart/styles.tsx index 9598dbd4..9df4f0a9 100644 --- a/src/app/cart/styles.tsx +++ b/src/app/cart/styles.tsx @@ -10,15 +10,35 @@ import Footer from '../../components/FooterFolder/Footer'; export const FavoriteDiv = styled.div` display: flex; flex-direction: row; - align-items: start; - justify-content: space-around; + align-items: center; + justify-content: space-between; + max-width: 750px; width: 100%; - margin-bottom: 50px; - margin-top: 30px; +`; + +export const ImageBackground = styled.div` + width: 200px; + height: 200px; + background-color: ${COLORS.lightGrey}; + display: flex; + justify-content: center; + align-items: center; +`; + +export const CartItemsDiv = styled.div` + display: flex; + flex-direction: column; + align-items: center; + border-radius: 10px; + width: 750px; + overflow: auto; + gap: 32px; `; export const ImageDiv = styled.div` - width: 130px; + width: 30px; + height: 30px; + color: ${COLORS.black}; `; export const BackDiv = styled.button` @@ -49,12 +69,6 @@ export const TrashIcon = styled(Trash2)` margin-top: 28px; `; -export const NavBarZeroIndex = styled(NavBar)` - z-index: 0; - position: fixed; - margin-bottom: 100px; -`; - export const FooterMoved = styled(Footer)` transform: translateY(300px); `; @@ -63,6 +77,7 @@ export const TransparentButton = styled.button` background-color: transparent; border: transparent; padding-left: 40px; + margin-bottom: 25px; `; export const NavBarMovedUP = styled(NavBar)` @@ -89,6 +104,7 @@ export const QuantityButton = styled.div` background-color: ${COLORS.white}; border: 2px solid ${COLORS.navy}; color: ${COLORS.navy}; + cursor: pointer; `; export const PlusMinusButton = styled.button` @@ -108,17 +124,13 @@ export const Label = styled.p` export const LabelBox = styled.div` width: 150px; - height: 100%; - padding-left: 40px; - padding-right: 40px; `; -export const PageDiv1 = styled.div` +export const ContentDiv = styled.div` display: flex; flex-direction: row; - min-height: 100%; /*or 100vh */ - flex-wrap: wrap; - justify-content: space-evenly; + justify-content: space-between; + gap: 32px; `; export const BackButtonDiv1 = styled.div` @@ -145,7 +157,7 @@ export const Wrapper = styled.div` `; export const OrderSummaryDiv = styled.div` - overflow: scroll; + overflow: auto; width: 350px; height: 300px; padding: 20px; @@ -172,7 +184,7 @@ export const OrderTotalDiv = styled.div` export const LeftColumnDiv1 = styled.div` display: flex; flex-flow: column; - margin-left: 50px; + gap: 16px; `; export const CheckoutButton1 = styled.button` @@ -201,8 +213,6 @@ export const Qty = styled.p` export const RightColumnDiv1 = styled.div` display: flex; flex-flow: column; - margin-left: 200px; - margin-top: 100px; `; export const WhiteBackgroundDiv = styled.div` @@ -232,11 +242,12 @@ export const PShiftLeft = styled.p` `; export const PageDiv = styled.div` + height: 100%; display: flex; - flex-direction: col; - flex-wrap: wrap; - justify-content: space-evenly; - padding: 20px; + flex-direction: column; + padding: 32px; + gap: 32px; + background-color: ${COLORS.offWhite}; `; export const LeftColumnDiv = styled.div` @@ -343,6 +354,7 @@ export const BackButtonDiv = styled.div` `; export const CheckoutButton = styled.button` + width: 350px; background: #1b3679; color: white; border: none; diff --git a/src/app/favorites/page.tsx b/src/app/favorites/page.tsx index 9aad30f6..b205c97a 100644 --- a/src/app/favorites/page.tsx +++ b/src/app/favorites/page.tsx @@ -2,7 +2,7 @@ import { useState, useEffect } from 'react'; import { useRouter } from 'next/navigation'; -import { Body1Bold, Body2 } from '@/styles/fonts'; +import { Body1Bold, Body2, Heading1 } from '@/styles/fonts'; import BackButton from '../../components/BackButton/BackButton'; import { @@ -21,6 +21,7 @@ import { TransparentButton, ViewItem, Fullscreen, + ImageLinkWrapper, } from './styles'; import { Product } from '../../schema/schema'; @@ -48,15 +49,17 @@ export default function FavoritesPage() { -

Favorites

+ Favorites {Favorites.map(favorite => ( - {favorite.name} + + {favorite.name} + {favorite.name} diff --git a/src/app/favorites/styles.ts b/src/app/favorites/styles.ts index 1cf4c27e..73664cce 100644 --- a/src/app/favorites/styles.ts +++ b/src/app/favorites/styles.ts @@ -1,6 +1,8 @@ import styled from 'styled-components'; import { Heart } from 'react-feather'; +import Link from "next/link"; +import COLORS from '@/styles/colors'; import NavBar from '../../components/NavBarFolder/NavBar'; @@ -58,6 +60,7 @@ export const HeartIcon = styled(Heart)` export const TransparentButton = styled.button` background-color: transparent; border: transparent; + cursor:pointer; `; export const NavBarMovedUP = styled(NavBar)` @@ -93,3 +96,16 @@ export const Fullscreen = styled.div` flex-direction: column; align-items: center; `; + +export const ImageLinkWrapper = styled(Link)` +width:100px; +height:100px; +background-color:${COLORS.lightGrey}; +padding:32px; +margin-bottom:8px; +display:flex; +justify-content:center; +align-items:center; +box-shadow: 1px 1px 4px 1px rgba(0,0,0,.1); +`; + diff --git a/src/app/globals.css b/src/app/globals.css index 021ca9f4..4d40d22d 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -82,7 +82,7 @@ html, body { max-width: 100vw; - height: 100%; + min-height: 100vh; } body { diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 8815ba1b..4a385bbe 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,8 +1,8 @@ import './globals.css'; import type { Metadata } from 'next'; -import { Inter } from 'next/font/google'; +import { Public_Sans } from 'next/font/google'; -const inter = Inter({ subsets: ['latin'] }); +const publicSans = Public_Sans({ subsets: ['latin'] }); export const metadata: Metadata = { title: 'Shanti Project', @@ -16,7 +16,7 @@ export default function RootLayout({ }) { return ( - {children} + {children} ); } diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx index baab69c4..93fcea70 100644 --- a/src/app/login/page.tsx +++ b/src/app/login/page.tsx @@ -48,9 +48,9 @@ export default function App() { width={125} height={65} style={{ + position: 'absolute', top: '30px', left: '30px', - position: 'absolute', }} /> diff --git a/src/app/login/styles.ts b/src/app/login/styles.ts index 273a4576..41968785 100644 --- a/src/app/login/styles.ts +++ b/src/app/login/styles.ts @@ -76,7 +76,7 @@ export const EyeIcon = styled(Eye)` export const Fullscreen = styled.div` width: 100%; - height: 100%; + height: 100vh; display: grid; `; diff --git a/src/app/profileScreen/styles.ts b/src/app/profileScreen/styles.ts index 81d02884..cce909c1 100644 --- a/src/app/profileScreen/styles.ts +++ b/src/app/profileScreen/styles.ts @@ -7,6 +7,7 @@ import { Heart } from 'react-feather'; import NavBar from '../../components/NavBarFolder/NavBar'; import Footer from '../../components/FooterFolder/Footer'; +import COLORS from '@/styles/colors'; export const TextSpacing = styled.div` margin-top: 10px; @@ -26,7 +27,7 @@ export const AccountDetails = styled.div` width: 500px; height: 350px; border-radius: 10px; - background: var(--White, #fff); + background: ${COLORS.white}; box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; @@ -42,7 +43,7 @@ export const OrderHistory = styled.div` width: 600px; height: 350px; border-radius: 10px; - background-color: var(--White, #fff); + background: ${COLORS.white}; box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2); padding-top: 23px; padding-right: 23px; @@ -56,7 +57,7 @@ export const FavoritesContainer = styled.div` width: 600px; height: 350px; border-radius: 10px; - background: var(--White, #fff); + background: ${COLORS.white}; box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2); padding-top: 23px; padding-right: 23px; @@ -65,7 +66,7 @@ export const FavoritesContainer = styled.div` `; export const LogOutButton = styled.button` - background: #1b3679; + background: ${COLORS.navy}; color: #fff; text-align: center; font-size: 20px; diff --git a/src/app/storefront/StoreFrontNavBar.tsx b/src/app/storefront/StoreFrontNavBar.tsx index 3be0ce2c..c1644826 100644 --- a/src/app/storefront/StoreFrontNavBar.tsx +++ b/src/app/storefront/StoreFrontNavBar.tsx @@ -1,5 +1,4 @@ import Image from 'next/image'; -import Link from 'next/link'; import React, { useEffect, useState } from 'react'; import { fetchButtonCategories } from '@/api/supabase/queries/button_queries'; @@ -12,6 +11,7 @@ import { CartTotalCircle, UserProfileIcon, ShoppingCartIcon, + IconWithLabelLink, } from '../../components/NavBarFolder/styles'; import { Product, StorefrontButtons } from '../../schema/schema'; @@ -116,14 +116,14 @@ export default function StoreFrontNavBar(props: { return ( - + Shanti Logo - + @@ -146,15 +146,15 @@ export default function StoreFrontNavBar(props: { - + - Users - - + User + + Cart {data} - + ); diff --git a/src/components/BackButton/BackButton.tsx b/src/components/BackButton/BackButton.tsx index 479a7dd5..11722ab4 100644 --- a/src/components/BackButton/BackButton.tsx +++ b/src/components/BackButton/BackButton.tsx @@ -1,15 +1,12 @@ -import Link from 'next/link'; -import { Body2Bold } from '@/styles/fonts'; -import { BackDiv, ArrowLeftIcon } from './styles'; +import { Body1 } from '@/styles/fonts'; +import { BackLink, ArrowLeftIcon } from './styles'; export default function BackButton(props: { destination: string }) { const { destination } = props; return ( - - - - Back - - + + + Back + ); } diff --git a/src/components/BackButton/styles.ts b/src/components/BackButton/styles.ts index aae56682..82155a18 100644 --- a/src/components/BackButton/styles.ts +++ b/src/components/BackButton/styles.ts @@ -1,29 +1,22 @@ import styled from 'styled-components'; import { ArrowLeft } from 'react-feather'; -import Image from 'next/image'; +import Link from 'next/link'; import COLORS from '../../styles/colors'; -export const BackDiv = styled.button` +export const BackLink = styled(Link)` display: flex; flex-direction: row; align-items: center; + justify-content: space-between; color: ${COLORS.black}; - background-color: transparent; - border: transparent; - margin-left: 0px; - margin-top: 55px; + width: 75px; gap: 5px; &:hover { text-decoration: underline; } `; -export const ImageWithSize = styled(Image)` - width={23} - height={23} -`; - export const ArrowLeftIcon = styled(ArrowLeft)` - width: 17px; - height: 17px; + width: 24px; + height: 24px; `; diff --git a/src/components/NavBarFolder/NavBar.tsx b/src/components/NavBarFolder/NavBar.tsx index 96f8bb71..c0f92fd5 100644 --- a/src/components/NavBarFolder/NavBar.tsx +++ b/src/components/NavBarFolder/NavBar.tsx @@ -1,7 +1,7 @@ import Image from 'next/image'; -import Link from 'next/link'; import React, { useEffect, useState } from 'react'; +import { Body2, Body2Bold } from '@/styles/fonts'; import { totalNumberOfItemsInCart } from '../../api/supabase/queries/cart_queries'; import { @@ -10,8 +10,7 @@ import { CartTotalCircle, UserProfileIcon, ShoppingCartIcon, - ProfileButton, - ProfileFont, + IconWithLabelLink, } from './styles'; export default function NavBar({ ...rest }) { @@ -36,27 +35,27 @@ export default function NavBar({ ...rest }) { return ( - + Shanti Logo - + - + -

User

- - - - - Cart - {data} - - + User + + + + Cart + + {data} + + ); diff --git a/src/components/NavBarFolder/styles.ts b/src/components/NavBarFolder/styles.ts index 46ce8b7d..fe42f4de 100644 --- a/src/components/NavBarFolder/styles.ts +++ b/src/components/NavBarFolder/styles.ts @@ -1,26 +1,29 @@ import styled from 'styled-components'; import { User, ShoppingCart } from 'react-feather'; +import Link from 'next/link'; import COLORS from '../../styles/colors'; export const CartTotalCircle = styled.div<{ $isZero?: boolean }>` - width: 20px; - height: 20px; - background: ${COLORS.marineBlue}; + display: ${props => (props.$isZero ? 'none' : 'content')}; + width: 24px; + height: 24px; border-radius: 50%; - text-align: center; - transform: translate(19px, -58px); + position: absolute; + top: -12px; + right: -12px; + display: flex; + justify-content: center; + align-items: center; color: ${COLORS.white}; - display: ${props => (props.$isZero ? 'none' : 'content')}; + background: ${COLORS.marineBlue}; `; export const UserProfileIcon = styled(User)` - margin-left: 5px; color: ${COLORS.black}; `; export const ShoppingCartIcon = styled(ShoppingCart)` - margin-left: 3px; color: ${COLORS.black}; `; @@ -28,23 +31,20 @@ export const NavBarComp = styled.nav` display: flex; flex-direction: row; justify-content: space-between; - padding-left: 30px; - padding-right: 30px; - height: 140px; - padding-top: 20px; + align-items: center; + padding: 16px 32px; position: relative; width: 100%; background: ${COLORS.lightPeriwinkle}; box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.1); - z-index: 100; `; export const ButtonsDiv = styled.div` - width: 200px; + width: 100px; display: flex; flex-direction: row; - justify-content: space-around; - padding-top: 15px; + justify-content: space-between; + align-items: center; `; export const LocationDiv = styled.div` @@ -64,15 +64,11 @@ export const Addie = styled.p` margin-bottom: 30px; `; -export const ProfileButton = styled.button` - width: 40px; - height: 40px; - background-color: transparent; - border: none; -`; -export const ProfileFont = styled.div` - margin-left: 5px; - font-size: 18px; - font-style: normal; +export const IconWithLabelLink = styled(Link)` + display: flex; + flex-direction: column; + align-items: center; + text-decoration: none; color: ${COLORS.black}; + position: relative; `; diff --git a/src/components/ViewAllButton/styles.ts b/src/components/ViewAllButton/styles.ts index 8533385b..3b7207d6 100644 --- a/src/components/ViewAllButton/styles.ts +++ b/src/components/ViewAllButton/styles.ts @@ -1,8 +1,7 @@ import styled from 'styled-components'; -import Image from 'next/image'; import COLORS from '../../styles/colors'; -export const ViewAllDiv = styled.button` +export const ViewAllDiv = styled.div` display: flex; align-items: center; color: ${COLORS.black}; @@ -13,8 +12,4 @@ export const ViewAllDiv = styled.button` } `; -export const ImageWithSize = styled(Image)` - width={23} - height={23} - -`; +export const placeHolder = "";