Skip to content

Commit

Permalink
more styling changes on the profile screen
Browse files Browse the repository at this point in the history
  • Loading branch information
@davidqing6432
davidqing6432 committed Apr 3, 2024
1 parent 6b4a3b7 commit 81144b2
Show file tree
Hide file tree
Showing 6 changed files with 118 additions and 146 deletions.
15 changes: 15 additions & 0 deletions src/app/favorites/styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,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';

export const FavoriteDiv = styled.div`
Expand Down Expand Up @@ -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)`
Expand Down Expand Up @@ -93,3 +96,15 @@ export const Fullscreen = styled.div`
flex-direction: column;
align-items: center;
`;

// Consider making an image component (implementing the grey background on all images)
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, 0.1);`;
189 changes: 74 additions & 115 deletions src/app/profileScreen/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ import {
Body2Bold,
Body1,
Body2,
Heading4Bold,
Body2Light,
} from '@/styles/fonts';
import {
addOrRemoveProductFromFavorite,
Expand Down Expand Up @@ -39,10 +41,11 @@ import {
ContentContainer,
FlexContainer,
PageContainer,
AccountContent,
} from './styles';
import { signOut } from '../../api/supabase/auth/auth';
import 'react-toastify/dist/ReactToastify.css';
import { TransparentButton } from '../favorites/styles';
import { ImageLinkWrapper, TransparentButton } from '../favorites/styles';

function FavoriteSection(props: {
Favorites: Product[];
Expand All @@ -55,45 +58,43 @@ function FavoriteSection(props: {
setFavorites(Favorites.filter(Prod => Prod.id !== fav.id));
}
return (
<main>
<FavoritesContainer>
<HeaderDiv>
<Heading2>Favorites</Heading2>
<ViewAllButton destination="./favorites" />
</HeaderDiv>
{Favorites.slice(0, 2).map(favorite => (
<FavoriteDiv key={favorite.id}>
<FavoritesContainer>
<HeaderDiv>
<Heading4Bold>Favorites</Heading4Bold>
<ViewAllButton destination="./favorites" />
</HeaderDiv>
{Favorites.slice(0, 2).map(favorite => (
<FavoriteDiv key={favorite.id}>
{/* Doesn't have an href, but figma states clickable images */}
<ImageLinkWrapper href="">
<img
src={favorite.photo}
alt={favorite.name}
style={{ width: '75px', height: '75px' }}
/>
<ProductNameDiv>
<Body1Bold>{favorite.name}</Body1Bold>
<Body2>Category: {favorite.category}</Body2>
</ProductNameDiv>
<TransparentButton
onClick={() => clickFunctions({ fav: favorite })}
>
<HeartIcon />
</TransparentButton>
</FavoriteDiv>
))}
</FavoritesContainer>
</main>
</ImageLinkWrapper>

<ProductNameDiv>
<Body2Bold>{favorite.name}</Body2Bold>
<Body3>Category: {favorite.category}</Body3>
</ProductNameDiv>
<TransparentButton onClick={() => clickFunctions({ fav: favorite })}>
<HeartIcon />
</TransparentButton>
</FavoriteDiv>
))}
</FavoritesContainer>
);
}

function OrderHistorySection() {
return (
<main>
<OrderHistory>
<HeaderDiv>
<Heading2>Order History</Heading2>
<ViewAllButton destination="./orderHistory" />
</HeaderDiv>
</OrderHistory>
</main>
<OrderHistory>
<HeaderDiv>
<Heading4Bold>Order History</Heading4Bold>
<ViewAllButton destination="./orderHistory" />
</HeaderDiv>
</OrderHistory>
);
}
function AccountDetailSectionDelivery(props: { user: User }) {
Expand All @@ -107,67 +108,31 @@ function AccountDetailSectionDelivery(props: { user: User }) {
}

useEffect(() => {
getUserAddress();
}, []);
return (
<main>
<AccountDetails>
<Heading2>Account Details</Heading2>
<HeadingSpacing>
<Body2Bold>Email</Body2Bold>
</HeadingSpacing>
<TextSpacing>
<Body1>{user?.email}</Body1>
</TextSpacing>
<HeadingSpacing>
<Body2>Name</Body2>
</HeadingSpacing>
<TextSpacing>
<Body3>
{user?.first_name} {user?.last_name}
</Body3>
</TextSpacing>
<HeadingSpacing>
<Body2>Address</Body2>
</HeadingSpacing>
<TextSpacing>
<Body1>
{UserAddress?.street}, {UserAddress?.city}, {UserAddress?.zipcode}
</Body1>
</TextSpacing>
</AccountDetails>
</main>
);
}
function AccountDetailSectionPickUp(props: { user: User }) {
const { user } = props;
if (user.delivery_allowed) getUserAddress();
}, [user]);

return (
<main>
<AccountDetails>
<Heading2>Account Details</Heading2>
<HeadingSpacing>
<Body1Bold>Email</Body1Bold>
</HeadingSpacing>
<TextSpacing>
<Body2>{user?.email}</Body2>
</TextSpacing>
<HeadingSpacing>
<Body1Bold>Name</Body1Bold>
</HeadingSpacing>
<TextSpacing>
<Body2>
{user?.first_name} {user?.last_name}
</Body2>
</TextSpacing>
<HeadingSpacing>
<Body1Bold>Phone Number</Body1Bold>
</HeadingSpacing>
<TextSpacing>
<Body2>+1 510-123-4567 {/* User?.phone */}</Body2>
</TextSpacing>
</AccountDetails>
</main>
<AccountDetails>
<AccountContent>
<Heading4Bold>Account Details</Heading4Bold>
<Body1Bold>Email</Body1Bold>
<Body2Light>{user?.email}</Body2Light>
<Body1Bold>Name</Body1Bold>
<Body2Light>
{user?.first_name} {user?.last_name}
</Body2Light>
{user.delivery_allowed ? (
<>
<Body1Bold>Address</Body1Bold>
<Body2Light>
{UserAddress?.street}, {UserAddress?.city}, {UserAddress?.zipcode}
</Body2Light>
</>
) : null}
<Body1Bold>Phone Number</Body1Bold>
<Body2Light>+1 510-123-4567 {/* User?.phone */}</Body2Light>
</AccountContent>
</AccountDetails>
);
}

Expand Down Expand Up @@ -211,36 +176,30 @@ export default function Profile() {
hideProgressBar
/>
<NavBar />
<FlexContainer>
<MainContainer>
<BackButton destination="./storefront" />
<Heading1>My Profile</Heading1>
<ContentContainer>
<AccountDiv>
{user.delivery_allowed ? (
<AccountDetailSectionDelivery user={user} />
) : (
<AccountDetailSectionPickUp user={user} />
)}
<LogOutButton onClick={() => showToastMessage()}>
Log Out
</LogOutButton>
</AccountDiv>
<InfoDiv>
<OrderHistorySection />
<FavoriteSection
Favorites={Favorites}
setFavorites={setFavorites}
/>
</InfoDiv>
</ContentContainer>
<MainContainer>
<BackButton destination="./storefront" />
<Heading1>My Profile</Heading1>
<ContentContainer>
<AccountDiv>
<AccountDetailSectionDelivery user={user} />
<LogOutButton onClick={() => showToastMessage()}>
<Body1Bold>Log Out</Body1Bold>
</LogOutButton>
</AccountDiv>
<InfoDiv>
<OrderHistorySection />
<FavoriteSection
Favorites={Favorites}
setFavorites={setFavorites}
/>
</InfoDiv>
</ContentContainer>

{/* <PopUp closeButton={false} autoClose={3000} hideProgressBar limit={1} />
{/* <PopUp closeButton={false} autoClose={3000} hideProgressBar limit={1} />
<LogOutButton onClick={() => router.push('/favorites')}>
Favorites
</LogOutButton> */}
</MainContainer>
</FlexContainer>
</MainContainer>
</PageContainer>
);
}
41 changes: 22 additions & 19 deletions src/app/profileScreen/styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,31 +22,32 @@ export const HeadingBack = styled.div`

export const AccountDetails = styled.div`
width: 100%;
height: 100%;
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: flex-start;
padding: 32px;
gap: 32px;
`;

export const AccountContent = styled.div`
display: flex;
flex-direction: column;
gap: 16px;
`;

export const OrderHistory = styled.div`
width: 100%;
height: 100%;
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: 24px;
`;

export const FavoritesContainer = styled.div`
width: 100%;
height: 100%;
border-radius: 10px;
background: ${COLORS.white};
box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2);
Expand All @@ -66,8 +67,9 @@ export const LogOutButton = styled.button`
font-weight: 600;
line-height: normal;
border: transparent;
border-radius: 5px;
padding: 8px;
border-radius: 8px;
padding: 16px;
cursor: pointer;
`;

export const PopUp = styled(ToastContainer)`
Expand All @@ -87,10 +89,9 @@ export const FavoriteDiv = styled.div`
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
justify-content: space-between;
width: 100%;
margin-bottom: 50px;
margin-top: 30px;
padding: 16px;
`;

export const HeartIcon = styled(Heart)`
Expand All @@ -114,6 +115,9 @@ export const HeaderDiv = styled.div`

export const ProductNameDiv = styled.div`
width: 250px;
display: flex;
flex-direction: column;
gap: 8px;
`;

export const BlankSpace = styled.div`
Expand All @@ -129,8 +133,8 @@ export const Fullscreen = styled.div`
export const PageContainer = styled.div`
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 100vh;
`;

export const FlexContainer = styled.div`
Expand All @@ -149,7 +153,8 @@ export const FlexContainer = styled.div`
export const MainContainer = styled.div`
display: flex;
flex-direction: column;
gap: 16px;
gap: 24px;
padding: 48px;
`;

export const ContentContainer = styled.div`
Expand All @@ -163,15 +168,13 @@ export const ContentContainer = styled.div`
export const AccountDiv = styled.div`
display: flex;
flex-direction: column;
justify-content: space-between;
width: 500px;
height: 400px;
width: 400px;
gap: 32px;
`;

export const InfoDiv = styled.div`
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 32px;
width: 500px;
height: 500px;
`;
Loading

0 comments on commit 81144b2

Please sign in to comment.