Update description in SignWaiver about DocuSign

- Describe how waiver will be handled through DocuSign
- Ask users to return to Portal after completing waiver
- Extract and restyle `<hr>` with styles from Reboot

apps/site/src/app/(main)/globals.css

@@ -16,6 +16,16 @@ body {
 	background-color: var(--color-brown);
 }
 
+/* based on Bootstrap Reboot */
 p {
+	margin-top: 0;
 	margin-bottom: 1rem;
 }
+
+hr {
+	margin: 1rem 0;
+	color: inherit;
+	border: 0;
+	border-top: 1px solid;
+	opacity: 0.25;
+}

apps/site/src/app/(main)/portal/@applicant/ApplicantPortal.tsx

@@ -4,8 +4,8 @@ import getUserIdentity from "@/lib/utils/getUserIdentity";
 
 import ConfirmAttendance from "./ConfirmAttendance";
 import Message from "./Message";
-import VerticalTimeline from "./VerticalTimeline";
 import SignWaiver from "./SignWaiver";
+import VerticalTimeline from "./VerticalTimeline";
 
 export const enum PortalStatus {
 	pending = "PENDING_REVIEW",
@@ -30,11 +30,14 @@ async function Portal() {
 
 	const needsToSignWaiver = status === PortalStatus.accepted;
 
+	const moreContent = needsToSignWaiver || submittedWaiver;
+
 	return (
 		<div className="bg-white text-black max-w-4xl rounded-2xl p-6 flex flex-col mb-24 w-full">
 			<h2 className="text-4xl font-semibold">Status</h2>
 			<VerticalTimeline status={status as PortalStatus} />
 			<Message status={status as PortalStatus} />
+			{moreContent && <hr />}
 			{needsToSignWaiver && <SignWaiver />}
 			{submittedWaiver && <ConfirmAttendance status={status} />}
 		</div>

apps/site/src/app/(main)/portal/@applicant/ConfirmAttendance.tsx

@@ -13,17 +13,17 @@ function ConfirmAttendance({ status }: ConfirmAttendanceProps) {
 
 	return (
 		<div className="mt-4">
-			<hr />
 			<h3 className="text-3xl my-4">RSVP</h3>
 			{status === PortalStatus.confirmed ? (
 				<p>
-					Thank you for confirming your attendance. We look forward to seeing
-					you at the event!
+					Thank you for confirming your attendance! We look forward to seeing
+					you at IrvineHacks! If you are no longer able to attend, please let us
+					know using the button below.
 				</p>
 			) : (
 				<p>
 					If you plan on attending IrvineHacks 2024, please confirm your
-					attendance below!
+					attendance using the button below!
 				</p>
 			)}
 			<form method="post" action="/api/user/rsvp">

apps/site/src/app/(main)/portal/@applicant/Message.tsx

@@ -36,25 +36,14 @@ function Message({ status }: MessageProps) {
 			<p>
 				Congratulations on your acceptance to IrvineHacks 2024! Please look for
 				an email confirming your acceptance. It is crucial that you read through
-				all additional info in your confirmation email. We look forward to
-				seeing you at IrvineHacks!
-			</p>
-		),
-		[PortalStatus.waived]: (
-			<>
-				Thank you for signing the waiver! We look forward to seeing you at the
-				event!
-			</>
-		),
-		[PortalStatus.confirmed]: (
-			<p>
-				Thank you for confirming your attendance! We look forward to seeing you
-				at IrvineHacks!
+				all additional info in your confirmation email.
 			</p>
 		),
+		[PortalStatus.waived]: <p>Thank you for signing the waiver!</p>,
+		[PortalStatus.confirmed]: <></>,
 	};
 
-	return <div>{messages[status]}</div>;
+	return messages[status];
 }
 
 export default Message;

apps/site/src/app/(main)/portal/@applicant/SignWaiver.tsx

@@ -3,10 +3,12 @@ import Button from "@/lib/components/Button/Button";
 function SignWaiver() {
 	return (
 		<div>
-			<hr />
 			<h3 className="text-3xl my-4">Waiver</h3>
-			<p className="mt-4">
-				In order to attend IrvineHacks 2024, please fill out the waiver below
+			<p>
+				In order to attend IrvineHacks 2024, all participants must complete the
+				Participation Waiver and review the Code of Conduct. The button below
+				will take you to a DocuSign form to sign the waiver. After signing the
+				waiver, please return to this Portal to confirm your attendance.
 			</p>
 			<Button
 				text="Sign Waiver to attend IrvineHacks 2024"

apps/site/src/app/(main)/portal/layout.tsx

@@ -16,7 +16,7 @@ async function PortalLayout({ admin, applicant }: PortalLayoutProps) {
 	const content = isAdminRole(role) ? admin : applicant;
 
 	return (
-		<section className=" w-full flex items-center flex-col min-h-screen">
+		<section className="w-full flex items-center flex-col min-h-screen">
 			<div className="m-24">
 				<h1
 					className={`${styles.title} font-display sm:text-[3rem] text-[#fffce2] text-6xl text-center`}