From ba20be09e6aad3148fa56c0cd9bce9f55e8f2d31 Mon Sep 17 00:00:00 2001 From: aidanvillasenor Date: Tue, 11 Mar 2025 13:53:32 -0500 Subject: [PATCH 1/2] first pass --- src/pages/Home/HomePage.css | 162 ++++++++++++++++-------------------- src/pages/Home/HomePage.jsx | 114 +++++++++++-------------- 2 files changed, 117 insertions(+), 159 deletions(-) diff --git a/src/pages/Home/HomePage.css b/src/pages/Home/HomePage.css index 6a0fbb8..0b94239 100644 --- a/src/pages/Home/HomePage.css +++ b/src/pages/Home/HomePage.css @@ -1,132 +1,110 @@ .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 12px 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 { - display: flex; - flex-direction: column; - width: 100%; - max-width: 1200px; - padding-top: 15px; +/* Card with placeholders for the user’s outfit items */ +.big-card { + width: 90%; + margin: 0 auto; + background-color: #fff; + box-shadow: 0 2px 4px rgba(0,0,0,0.1); + border-radius: 12px; + padding: 15px; + margin-bottom: 20px; } -.action-card { - display: flex; - align-items: center; - justify-content: space-between; - background-color: #f0eef1; - padding: 12px; +.big-avatar-placeholder, +.big-shirt-placeholder, +.big-shoes-placeholder { + width: 100%; + height: 80px; + background-color: #e0e0e0; margin-bottom: 10px; - border-radius: 8px; - cursor: pointer; - font-size: 22px; -} - -.action-title { + border-radius: 6px; display: flex; align-items: center; - gap: 10px; - cursor: pointer; - padding: 5px; -} - -.action-icon { - font-size: 18px; - gap: 10px; -} - -.arrow-icon { - font-size: larger; + justify-content: center; } -.footer-nav { +.main-actions { + width: 90%; + margin: 0 auto; display: flex; - justify-content: space-around; -} - -.add-button { - font-size: larger; + flex-direction: column; + gap: 10px; } -.customize-action { +.action-button { + background-color: #f0eef1; + border-radius: 8px; + padding: 8px; display: flex; align-items: center; - justify-content: center; - gap: 10px; + justify-content: space-between; + font-size: 20px; 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 { +.action-title { 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%; + gap: 10px; } -.customize-modal-title { - font-size: 20px; - align-items: left; +.action-icon { + font-size: 22px; } -.save-button { - width: 100%; - padding: 10px; - background-color: #000; - margin-bottom: 3px; +.arrow-icon { + font-size: 1.4em; } - diff --git a/src/pages/Home/HomePage.jsx b/src/pages/Home/HomePage.jsx index cc7ec2f..e49cf01 100644 --- a/src/pages/Home/HomePage.jsx +++ b/src/pages/Home/HomePage.jsx @@ -1,62 +1,61 @@ -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(); 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: , visible: true }, - { id: 2, name: "Outfit History", action: () => navigate('/mycloset', { state: { selectedTopFilter: 'Outfits' } }), icon: , visible: true }, // aidan change the link here once the outfits page is done - { id: 3, name: "Chat History", link: "chat", icon: , visible: true }, - { id: 4, name: "My Inspiration", link: "inspiration", icon: , visible: true }, - { id: 5, name: "My Friends", link: "friends", icon: , visible: true }, - { id: 6, name: "My Feed", link: "discover", icon: , visible: true }, - ]); - const toggleActionVisibility = (id) => { - setActions((prevActions) => - prevActions.map((action) => - action.id === id ? { ...action, visible: !action.visible } : action - ) - ); - }; + // No toggling logic—always show these actions: + const actions = [ + { id: 1, name: "Build an Outfit", link: "outfit-builder-new", icon: }, + { id: 2, name: "Find Inspiration", link: "inspiration", icon: }, + { id: 3, name: "My Closet", link: "mycloset", icon: }, + ]; return (
+ {/* Optional header component */}
-
-
- Profile - {userData?.displayName} + + {/* Overlapping background at the top */} +
+ + {/* Main content that sits on top of the overlapped background */} +
+
+
+ Profile + + {userData?.displayName} + +
+ {/* Removed the three-dot menu entirely */} +
+ + {/* Large "card" with placeholders for your outfit items */} +
+
Avatar Placeholder
+
Shirt Placeholder
+
Shoes Placeholder
- setShowCustomizeModal(true)} - /> -
- {/* Action List */} -
- {actions - .filter((action) => action.visible) - .map((action) => ( -
+ {actions.map(action => ( +
action.action ? action.action() : navigate(`/${action.link}`)} + className="action-button" + onClick={() => navigate(`/${action.link}`)} >
{action.icon}
@@ -65,29 +64,10 @@ const HomePage = ({ user }) => {
))} +
- - {/* Custom Modal */} - setShowCustomizeModal(false)} title="Customize Home Screen"> - {actions.map((action) => ( -
-
- {action.icon} - {action.name} -
- toggleActionVisibility(action.id)} - /> -
- ))} - - -
+
); }; -export default HomePage; \ No newline at end of file +export default HomePage; From f6a384709505eefba08ccc8cac98ac17ba6dfed6 Mon Sep 17 00:00:00 2001 From: aidanvillasenor Date: Tue, 11 Mar 2025 15:18:27 -0500 Subject: [PATCH 2/2] outfit showing --- src/pages/Home/HomePage.css | 39 +++++++++++++++++++++++------------ src/pages/Home/HomePage.jsx | 41 ++++++++++++++++++++++++++++++------- 2 files changed, 60 insertions(+), 20 deletions(-) diff --git a/src/pages/Home/HomePage.css b/src/pages/Home/HomePage.css index 0b94239..8ce937f 100644 --- a/src/pages/Home/HomePage.css +++ b/src/pages/Home/HomePage.css @@ -31,7 +31,7 @@ display: flex; justify-content: space-between; align-items: center; - margin: 0 20px 12px 20px; + margin: 0 20px 20px 20px; } .user-info-overlapped { @@ -52,17 +52,6 @@ font-weight: 500; } -/* Card with placeholders for the user’s outfit items */ -.big-card { - width: 90%; - margin: 0 auto; - background-color: #fff; - box-shadow: 0 2px 4px rgba(0,0,0,0.1); - border-radius: 12px; - padding: 15px; - margin-bottom: 20px; -} - .big-avatar-placeholder, .big-shirt-placeholder, .big-shoes-placeholder { @@ -87,7 +76,7 @@ .action-button { background-color: #f0eef1; border-radius: 8px; - padding: 8px; + padding: 12px; display: flex; align-items: center; justify-content: space-between; @@ -108,3 +97,27 @@ .arrow-icon { 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; +} + +.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; +} \ No newline at end of file diff --git a/src/pages/Home/HomePage.jsx b/src/pages/Home/HomePage.jsx index e49cf01..01a121c 100644 --- a/src/pages/Home/HomePage.jsx +++ b/src/pages/Home/HomePage.jsx @@ -9,9 +9,26 @@ 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); - // No toggling logic—always show these actions: + // 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: }, { id: 2, name: "Find Inspiration", link: "inspiration", icon: }, @@ -20,7 +37,6 @@ const HomePage = ({ user }) => { return (
- {/* Optional header component */}
{/* Overlapping background at the top */} @@ -39,14 +55,25 @@ const HomePage = ({ user }) => { {userData?.displayName}
- {/* Removed the three-dot menu entirely */}
- {/* Large "card" with placeholders for your outfit items */} + {/* Card area: either display an outfit image or placeholders */}
-
Avatar Placeholder
-
Shirt Placeholder
-
Shoes Placeholder
+ {outfitPhotoURL ? ( + // If at least one outfit image is found, show it + My Outfit + ) : ( + // Otherwise, default to your placeholders + <> +
Avatar Placeholder
+
Shirt Placeholder
+
Shoes Placeholder
+ + )}
{/* Simple list of action buttons */}