Add upcoming events to landing page#398
Conversation
|
Deploy preview for gen-soln ready! ✅ Preview Built with commit f3a64c0. |
|
There are a couple concerns with this PR. One being the placement of the carousel should be below the discover section not below new non-profits on the platform. Also the layout of the cards is wonky. |
…s://github.com/GTBitsOfGood/gen-soln into ayush/357-new-upcoming-events-carousel-landing
…s://github.com/GTBitsOfGood/gen-soln into ayush/357-new-upcoming-events-carousel-landing
…s://github.com/GTBitsOfGood/gen-soln into ayush/357-new-upcoming-events-carousel-landing
|
The position of the "Upcoming Volunteer Events" text and the position of the first card in the list seems to vary depending on number of cards being displayed, but this should not happen. I would recommend looking at what styles the |
| {/* | ||
| <img | ||
| src={footerImage1} | ||
| src="../backgrounds/support_us.png" |
There was a problem hiding this comment.
try just "/backgrounds/support_us.png" instead of relative path
| marginTop: "140px" | ||
| }} | ||
| onClick={() => { | ||
| void router.push(config.pages.donate("64357724")); |
There was a problem hiding this comment.
instead of hardcoding this, I am okay if this button doesn't have an on-click action
| nonprofitCardData={cardData} | ||
| onClick={() => { | ||
| window.location.replace(config.pages.nonprofit(cardData._id)); | ||
| window.location.replace(config.pages.donate(cardData._id)); |
| upcomingEventsCarousel: { | ||
| display: "flex", | ||
| flexDirection: "column", | ||
| "align-self": "center", |
There was a problem hiding this comment.
use camel case, alignSelf, same for other properties
| <div className={allLink}> | ||
| <CoreLink href={"/events"}>ALL EVENTS HERE</CoreLink> | ||
| <LongArrowRight className={arrow} /> | ||
| </div> |
There was a problem hiding this comment.
Try using the CoreButtonWithLongArrow component instead
| <div className={allLink}> | ||
| <CoreLink href={"/"}>ALL NON-PROFITS HERE</CoreLink> | ||
| <LongArrowRight className={arrow} /> | ||
| </div> |
There was a problem hiding this comment.
Same for here, use the component from core/buttons/
| page: number; | ||
| totalCount: number; | ||
| }; | ||
| | PaginatedNonprofitCards |
There was a problem hiding this comment.
can you check if just nonprofitCards: PaginatedNonprofitCards will suffice?
| const { page, isLastPage, cards } = nonprofitCards; | ||
| const { | ||
| container, | ||
| text, |
There was a problem hiding this comment.
please delete these unused styles from makeStyles
| } | ||
|
|
||
| const Home: React.FC<Props> = props => { | ||
| const [session] = useSession(); |
| import { NonprofitCardData, PaginatedNonprofitCards } from "utils/types"; | ||
|
|
||
| import NonprofitCard from ".././cards/NonprofitCard"; | ||
| import NonprofitCard from "../cards/NonprofitCard"; |
There was a problem hiding this comment.
nit: prefer using module aliases, import { NonprofitCard } from "@core/cards";
6 participants
Closes #357