feat: notecard popup (#75)

src/app/pages/Designathons/Designathon24/Designathon24.js

@@ -24,12 +24,12 @@ import { Splash } from "./components/Splash";
 const Designathon24 = () => (
 	<main className={cn.container}>
 		<div className={cn.hero}>
-			<div style={{ height: "100%", width: "100%" }}>
-				<Splash />
-			</div>
+			{/* <div style={{ height: "100%", width: "100%" }}> */}
+			<Splash />
+			{/* </div> */}
 			<div className={cn.title}>
 				{/* <Icon className={cn.icon} src="designathon-white.svg" w="96" h="96" /> */}
-				<Text
+				{/* <Text
 					size="XXXL"
 					className="bold"
 					style={{ color: "var(--des24-black)" }}
@@ -38,12 +38,13 @@ const Designathon24 = () => (
 				</Text>
 				<div className={cn.timer}>
 					<Timer breakpoints={TIMER_2024} />
-				</div>
+				</div> */}
 			</div>
 		</div>
 
 		<SectionNavigation />
-		<WinnerShowcase winners={WINNERS_2024} />
+		{/* Winners section will be updated when winners are announced */}
+		{/* <WinnerShowcase winners={WINNERS_2024} /> */}
 
 		<About />
 		<Speakers />

src/app/pages/Designathons/Designathon24/components/About/index.jsx

@@ -13,29 +13,33 @@ const About = () => {
 	return (
 		<div className={cn.container} id="s-about">
 			<h2 className={cn.aboutHeading}>About</h2>
-			<Notecard>
-				<p>
-					Design-a-thon is a 3 day long hybrid event where you or a
-					team design a product focused on the theme: community and
-					inclusivity. It takes place on February 24, starting at 5:30
-					pm and ends February 26, 8:00 pm PST.
-				</p>
-				<p>
-					Design at UCI is the premier student-run organization at UCI
-					for anything graphic design, UI/UX design, product design,
-					and more. Started in 2016, we foster a special community for
-					all digital designers to connect, learn, and innovate.
-				</p>
-				<p>
-					Design at UCI’s designathon is the largest collegiate
-					designathon in Orange County. Each year, we bring together
-					hundreds of student designers nationwide to define, develop,
-					and pitch a product built from scratch. We hope that this
-					experience can help you acquire and grow both your soft and
-					hard skills in empathizing with your users, defining a set
-					of goals and needs, developing your product, and improving
-					your confidence and creativity as a human-centric designer.
-				</p>
+			<Notecard lineAdjustment={1}>
+				<div style={{ maxWidth: "95%" }}>
+					<p>
+						Design-a-thon is a 3 day long hybrid event where you or
+						a team design a product focused on the theme: community
+						and inclusivity. It takes place on February 24, starting
+						at 5:30 pm and ends February 26, 8:00 pm PST.
+					</p>
+					<p>
+						Design at UCI is the premier student-run organization at
+						UCI for anything graphic design, UI/UX design, product
+						design, and more. Started in 2016, we foster a special
+						community for all digital designers to connect, learn,
+						and innovate.
+					</p>
+					<p>
+						Design at UCI’s designathon is the largest collegiate
+						designathon in Orange County. Each year, we bring
+						together hundreds of student designers nationwide to
+						define, develop, and pitch a product built from scratch.
+						We hope that this experience can help you acquire and
+						grow both your soft and hard skills in empathizing with
+						your users, defining a set of goals and needs,
+						developing your product, and improving your confidence
+						and creativity as a human-centric designer.
+					</p>
+				</div>
 			</Notecard>
 
 			<img

src/app/pages/Designathons/Designathon24/components/Notecard/Notecard.jsx

@@ -2,15 +2,33 @@ import cn from "./Notecard.module.scss";
 
 import { useRef } from "react";
 import useNotecardLines from "./useNotecardLines";
+import clsx from "clsx";
 
-const Notecard = ({ children }) => {
+import close_icon from "../../assets/close_icon.svg";
+
+const Notecard = ({ children, modalCard, lineAdjustment, toggleProfile }) => {
+	const notecardRef = useRef(null);
 	const textRef = useRef(null);
 
-	const { lines, notecardLineTop, notecardLineHeight } =
-		useNotecardLines(textRef);
+	const { lines, notecardLineTop, notecardLineHeight } = useNotecardLines(
+		notecardRef,
+		textRef
+	);
 
 	return (
-		<div className={cn.noteCard}>
+		<div
+			className={clsx(cn.noteCard, modalCard && cn.modalCard)}
+			ref={notecardRef}
+		>
+			{toggleProfile ? (
+				<button className={cn.close_button} onClick={toggleProfile}>
+					<img
+						src={close_icon}
+						alt="x icon to close notecard modal"
+					/>
+				</button>
+			) : null}
+
 			<div className={cn.noteCardHeader} />
 
 			<div className={cn.text} ref={textRef}>
@@ -19,12 +37,16 @@ const Notecard = ({ children }) => {
 
 			<div className={cn.lines}>
 				{/* The number of lines, determined by line height and height of total text */}
-				{[...Array(lines).keys()].map((index) => (
+				{[
+					...Array(Math.max(lines - (lineAdjustment ?? 0), 1)).keys(),
+				].map((index) => (
 					<div
 						className={cn.line}
 						style={{
 							/* The distance between lines, accounting for the top of the card */
-							top: `calc(${notecardLineTop}px + ${index * notecardLineHeight}px)`,
+							top: `calc(${notecardLineTop}px + ${
+								index * notecardLineHeight
+							}px)`,
 						}}
 						key={index}
 					/>

src/app/pages/Designathons/Designathon24/components/Notecard/Notecard.module.scss

@@ -8,6 +8,39 @@
 
 	margin: 1.5rem 1rem 0;
 
+	overflow-y: scroll;
+	overflow-x: hidden;
+
+	.close_button {
+		position: sticky;
+		top: 3%;
+		left: 1rem;
+		width: 1rem;
+		margin-top: -1rem;
+		z-index: 10;
+
+		@media screen and (min-width: 768px) {
+			left: 1rem;
+			width: 1.5rem;
+			margin-top: -1.5rem;
+		}
+
+		background-color: transparent;
+		border: 0;
+		cursor: pointer;
+
+		border-radius: 100%;
+
+		img {
+			width: 100%;
+			cursor: inherit;
+
+			&:hover {
+				opacity: 75%;
+			}
+		}
+	}
+
 	.noteCardHeader {
 		height: 60px;
 		border-bottom: 4px solid;
@@ -17,7 +50,6 @@
 
 	.text {
 		margin-top: 0.5rem;
-		max-width: 95%;
 
 		p {
 			display: flex;
@@ -77,9 +109,13 @@
 			margin-top: 0.5rem;
 
 			p {
+				padding: 0 2.5rem 3rem;
 				font-size: 24px;
-				padding: 0 2.5rem 3rem 2.5rem;
 			}
 		}
 	}
 }
+
+.modalCard {
+	max-height: 80vh;
+}

src/app/pages/Designathons/Designathon24/components/Notecard/useNotecardLines.jsx

@@ -10,7 +10,7 @@ const SMALL_SCREEN = 640;
 const TOP_MARGIN = 128;
 const TOP_MARGIN_SM = 96;
 
-function useNotecardLines(textRef) {
+function useNotecardLines(notecardRef, textRef) {
 	const [dimensions, setDimensions] = useState({
 		width: 0,
 		height: 0,
@@ -19,12 +19,23 @@ function useNotecardLines(textRef) {
 		notecardLineTop: 0,
 	});
 
+	/**
+	 * If dimensions aren't calculated on every render,
+	 * the notecard will not have the right amount of lines
+	 */
+	// eslint-disable-next-line react-hooks/exhaustive-deps
 	const handleResize = useCallback(() => {
 		let newHeight = 0;
 		let newWidth = 0;
 
-		if (textRef.current) {
-			newHeight = textRef.current.clientHeight;
+		/* Height without the top margin */
+		const adjustedNotecardHeight =
+			notecardRef.current.clientHeight - (SMALL_SCREEN ? 60 : 80);
+
+		const textHeight = textRef.current.clientHeight;
+
+		if (notecardRef.current && textRef.current) {
+			newHeight = Math.max(adjustedNotecardHeight, textHeight) + 48;
 		}
 
 		newWidth = window.innerWidth;
@@ -37,7 +48,7 @@ function useNotecardLines(textRef) {
 					? LINE_BREAKPOINTS.LG
 					: LINE_BREAKPOINTS.SM;
 
-		const numLines = Math.floor(newHeight / notecardLineHeight) - 1;
+		const numLines = Math.ceil(newHeight / notecardLineHeight) - 1;
 		const lines = numLines > 0 ? numLines : 1;
 
 		/* Distance from top border of card */
@@ -51,7 +62,7 @@ function useNotecardLines(textRef) {
 			notecardLineHeight,
 			notecardLineTop,
 		});
-	}, [textRef]);
+	}, [notecardRef, textRef]);
 
 	useEffect(() => {
 		handleResize();

src/app/pages/Designathons/Designathon24/components/Polaroid/Polaroid.jsx

@@ -1,16 +1,24 @@
 import cn from "./Polaroid.module.scss";
 
+import { useCallback, useState } from "react";
+
+import { Modal } from "../Speakers/Modal/Modal";
+
 import tape_black from "../../assets/graphics/speakers/tape_black.svg";
 import tape_white from "../../assets/graphics/speakers/tape_white.svg";
 
-const Polaroid = ({ photo, name, position, odd }) => {
+export const Profile = ({ person, odd, tape: showTape }) => {
+	const { photo, name, role } = person;
+
 	return (
 		<div className={cn.polaroid}>
-			<img
-				src={odd ? tape_white : tape_black}
-				alt="tape"
-				className={cn.tape}
-			/>
+			{showTape ? (
+				<img
+					src={odd ? tape_white : tape_black}
+					alt="tape"
+					className={cn.tape}
+				/>
+			) : null}
 
 			<img
 				src={require(`../../assets/${photo}`)}
@@ -20,10 +28,34 @@ const Polaroid = ({ photo, name, position, odd }) => {
 
 			<div className={cn.polaroidDetails}>
 				<h6 className={cn.polaroidName}>{name}</h6>
-				<p className={cn.polaroidPosition}>{position}</p>
+				<p className={cn.polaroidRole}>{role}</p>
 			</div>
 		</div>
 	);
 };
 
+const Polaroid = ({ person, odd }) => {
+	const [open, setOpen] = useState(false);
+
+	const handleClick = useCallback(() => {
+		setOpen((prev) => !prev);
+	}, []);
+
+	return (
+		<>
+			<div className={cn.polaroidContainer} onClick={handleClick}>
+				<Profile person={person} odd={odd} showTape={true} />
+			</div>
+
+			{open ? (
+				<Modal
+					person={person}
+					open={open}
+					toggleProfile={handleClick}
+				/>
+			) : null}
+		</>
+	);
+};
+
 export default Polaroid;