Skip to content
This repository was archived by the owner on May 12, 2026. It is now read-only.

New Home Page #50

Open
aidanvillasenor wants to merge 2 commits into
base: main
Choose a base branch
from
Open

New Home Page #50

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ba20be0
first pass
aidanvillasenor Mar 11, 2025
f6a3847
outfit showing
aidanvillasenor Mar 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
171 changes: 81 additions & 90 deletions src/pages/Home/HomePage.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,132 +1,123 @@
.home-page {
display: flex;
flex-direction: column;
align-items: center;
background-color: white;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
/* max-height: calc(100vh-80px);
min-height: 100vh; */
height: calc(100vh-80px);
padding: 0 20px 20px 20px;
position: relative;
min-height: 100vh;
overflow-x: hidden;
overflow-y: hidden;
background-color: #fff;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* The background block that appears at the top,
creating the “overlapped” look */
.top-overlap {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 220px;
background-color: #f0eef1;
z-index: 0;
}

.home-header {
/* The main content that sits *over* the top overlap */
.home-content {
position: relative;
z-index: 1;
margin-top: 100px;
padding-bottom: 20px;
}

.home-header-overlapped {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 80px;
width: 95%;
margin: 0 20px 20px 20px;
}

.user-info {
.user-info-overlapped {
display: flex;
align-items: center;
padding-bottom: 0px !important;
}

.profile-pic {
width: 50px !important;
height: 50px !important;
.profile-pic-overlapped {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 10px;
margin-right: 12px;
object-fit: cover;
}

.menu-icon {
font-size: 20px;
cursor: pointer;
.user-name-overlapped {
font-size: 18px;
font-weight: 500;
}

.action-list {
.big-avatar-placeholder,
.big-shirt-placeholder,
.big-shoes-placeholder {
width: 100%;
height: 80px;
background-color: #e0e0e0;
margin-bottom: 10px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
}

.main-actions {
width: 90%;
margin: 0 auto;
display: flex;
flex-direction: column;
width: 100%;
max-width: 1200px;
padding-top: 15px;
gap: 10px;
}

.action-card {
.action-button {
background-color: #f0eef1;
border-radius: 8px;
padding: 12px;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #f0eef1;
padding: 12px;
margin-bottom: 10px;
border-radius: 8px;
font-size: 20px;
cursor: pointer;
font-size: 22px;
}

.action-title {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
padding: 5px;
}

.action-icon {
font-size: 18px;
gap: 10px;
font-size: 22px;
}

.arrow-icon {
font-size: larger;
}

.footer-nav {
display: flex;
justify-content: space-around;
}

.add-button {
font-size: larger;
}

.customize-action {
display: flex;
font-size: 1.4em;
}

.big-card {
width: 90%;
margin: 0 auto;
/* Increase height or padding: */
min-height: 200px; /* formerly 80–100px range */
padding: 20px; /* was 15px, now bigger */
background-color: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
border-radius: 12px;
margin-bottom: 20px;
display: flex; /* display flex to center image */
align-items: center;
justify-content: center;
gap: 10px;
cursor: pointer;
padding: 15px;
margin-bottom: 5px;
background-color: #f0eef1;
border-radius: 8px;
}

.customize-action input[type="checkbox"] {
transform: scale(1.5); /* Adjust the size here, 1.5 is 1.5 times the original size */
margin-right: 10px; /* Add space between checkbox and label */
}

.modal-body {
display: flex;
flex-direction: column;
gap: 10px;
}

.customize-modal {
width: 300px;
height: 150px;
display: flex !important;
align-items: center;
justify-content: center;
min-height: 100vh;
position: fixed !important;
top: -5%;
left: 39.8%;
}

.customize-modal-title {
font-size: 20px;
align-items: left;
}

.save-button {
width: 100%;
padding: 10px;
background-color: #000;
margin-bottom: 3px;
}

.outfit-image {
/* Constrain the image so it fits in the bigger card */
max-width: 100%;
max-height: 180px; /* or some fraction of min-height */
object-fit: cover; /* keep aspect ratio, but fill nicely */
border-radius: 6px;
margin-bottom: 10px;
}
141 changes: 74 additions & 67 deletions src/pages/Home/HomePage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,62 +1,88 @@
import React, { useState } from 'react';
import Header from "../../components/header/Header";
import React from 'react';
import { useNavigate } from 'react-router-dom';
import { Button } from 'react-bootstrap';
import CustomModal from "../../components/modal/CustomModal";
import './HomePage.css';
import { FaTshirt, FaUserFriends } from 'react-icons/fa';
import { BsClockHistory, BsChatDots, BsLightbulb, BsThreeDotsVertical, BsCompass } from 'react-icons/bs';
import { useAuthState, useDbData } from '../../utilities/firebase';
import Header from "../../components/header/Header";
import { FaTshirt } from 'react-icons/fa';
import { BsLightbulb } from 'react-icons/bs';
import { MdKeyboardArrowRight } from "react-icons/md";
import { useDbData } from '../../utilities/firebase';
import './HomePage.css';

const HomePage = ({ user }) => {
const navigate = useNavigate();

// 1. Load user data (which includes displayName, photoURL, etc.)
const [userData] = useDbData(user ? `users/${user.uid}` : null);
const [showCustomizeModal, setShowCustomizeModal] = useState(false);
const [actions, setActions] = useState([
{ id: 1, name: "My Closet", link: "mycloset", icon: <FaTshirt />, visible: true },
{ id: 2, name: "Outfit History", action: () => navigate('/mycloset', { state: { selectedTopFilter: 'Outfits' } }), icon: <BsClockHistory />, visible: true }, // aidan change the link here once the outfits page is done
{ id: 3, name: "Chat History", link: "chat", icon: <BsChatDots />, visible: true },
{ id: 4, name: "My Inspiration", link: "inspiration", icon: <BsLightbulb />, visible: true },
{ id: 5, name: "My Friends", link: "friends", icon: <FaUserFriends />, visible: true },
{ id: 6, name: "My Feed", link: "discover", icon: <BsCompass />, visible: true },
]);

const toggleActionVisibility = (id) => {
setActions((prevActions) =>
prevActions.map((action) =>
action.id === id ? { ...action, visible: !action.visible } : action
)
);
};
// 2. Load the user's outfits
const [outfits] = useDbData(user ? `users/${user.uid}/outfits` : null);

// 3. Determine if at least one outfit exists
const outfitKeys = outfits ? Object.keys(outfits) : [];
let outfitPhotoURL = null;
if (outfitKeys.length > 0) {
// Grab the first outfit’s 'imageURL'
console.log("Outfit present");
const firstOutfitKey = outfitKeys[0];
outfitPhotoURL = outfits[firstOutfitKey].imageUrl ?? null;
} else {
console.log("No outfit present");
}

// Always-show actions
const actions = [
{ id: 1, name: "Build an Outfit", link: "outfit-builder-new", icon: <FaTshirt /> },
{ id: 2, name: "Find Inspiration", link: "inspiration", icon: <BsLightbulb /> },
{ id: 3, name: "My Closet", link: "mycloset", icon: <FaTshirt /> },
];

return (
<div className="home-page">
<Header title="Home" />
<div className="home-header">
<div className="user-info">
<img
src={userData?.photoURL}
alt="Profile"
className="profile-pic"
/>
<span style={{ fontSize: '24px' }}>{userData?.displayName}</span>

{/* Overlapping background at the top */}
<div className="top-overlap"></div>

{/* Main content that sits on top of the overlapped background */}
<div className="home-content">
<div className="home-header-overlapped">
<div className="user-info-overlapped">
<img
src={userData?.photoURL}
alt="Profile"
className="profile-pic-overlapped"
/>
<span className="user-name-overlapped">
{userData?.displayName}
</span>
</div>
</div>

{/* Card area: either display an outfit image or placeholders */}
<div className="big-card">
{outfitPhotoURL ? (
// If at least one outfit image is found, show it
<img
src={outfitPhotoURL}
alt="My Outfit"
className="outfit-image"
/>
) : (
// Otherwise, default to your placeholders
<>
<div className="big-avatar-placeholder">Avatar Placeholder</div>
<div className="big-shirt-placeholder">Shirt Placeholder</div>
<div className="big-shoes-placeholder">Shoes Placeholder</div>
</>
)}
</div>
<BsThreeDotsVertical
className="menu-icon"
onClick={() => setShowCustomizeModal(true)}
/>
</div>

{/* Action List */}
<div className="action-list">
{actions
.filter((action) => action.visible)
.map((action) => (
<div
{/* Simple list of action buttons */}
<div className="main-actions">
{actions.map(action => (
<div
key={action.id}
className="action-card"
onClick={() => action.action ? action.action() : navigate(`/${action.link}`)}
className="action-button"
onClick={() => navigate(`/${action.link}`)}
>
<div className="action-title">
<div className="action-icon">{action.icon}</div>
Expand All @@ -65,29 +91,10 @@ const HomePage = ({ user }) => {
<MdKeyboardArrowRight className="arrow-icon" />
</div>
))}
</div>
</div>

{/* Custom Modal */}
<CustomModal show={showCustomizeModal} onClose={() => setShowCustomizeModal(false)} title="Customize Home Screen">
{actions.map((action) => (
<div key={action.id} className="customize-action d-flex align-items-center justify-content-between">
<div className="d-flex align-items-center action-icon">
{action.icon}
<span>{action.name}</span>
</div>
<input
type="checkbox"
checked={action.visible}
onChange={() => toggleActionVisibility(action.id)}
/>
</div>
))}
<Button variant="secondary" className="save-button w-100 mt-3" onClick={() => setShowCustomizeModal(false)}>
Save Changes
</Button>
</CustomModal>
</div >
</div>
);
};

export default HomePage;
export default HomePage;