From 6a3ba891f356c4f0230e0725fc10cd3875e99a87 Mon Sep 17 00:00:00 2001
From: kaylahama <146313133+kaylahama@users.noreply.github.com>
Date: Sun, 3 Mar 2024 01:26:48 -0800
Subject: [PATCH] Kayla/submissions page (#415)

* added submissions info page and button for when hoth xi starts

* changed format for links

* fixed issue

* link style change and format change

* lint fix again

* link tag change and format change

---------

Co-authored-by: Kayla Hamakawa <kaylahamakawa@MacBook-Pro.local>
---
 src/components/MenuBar/ButtonBar.js           | 41 ++++++--
 src/components/SubmissionsPage/Submissions.js | 94 +++++++++++++++++++
 src/pages/submissions.js                      | 15 +++
 3 files changed, 142 insertions(+), 8 deletions(-)
 create mode 100644 src/components/SubmissionsPage/Submissions.js
 create mode 100644 src/pages/submissions.js

diff --git a/src/components/MenuBar/ButtonBar.js b/src/components/MenuBar/ButtonBar.js
index afb48329..6415a3e7 100644
--- a/src/components/MenuBar/ButtonBar.js
+++ b/src/components/MenuBar/ButtonBar.js
@@ -5,7 +5,12 @@ import { makeStyles } from '@material-ui/core/styles';
 import { Link as GatsbyLink } from 'gatsby';
 import { Link as MUILink } from '@material-ui/core';
 
-import { applicationOpen, applyDeadline } from '../constants.js';
+import {
+	applicationOpen,
+	applyDeadline,
+	hothStart,
+	hothEnd
+} from '../constants.js';
 
 const useStyles = makeStyles(theme => {
 	const menuBarAdaptiveThreshold = theme.breakpoints.values.sm * 1.3;
@@ -34,19 +39,27 @@ function ButtonBar({ isMobile }) {
 	const classes = useStyles();
 
 	const PoppinLink = ({ ...props }) =>
-		<Button component={GatsbyLink} role='link' fullWidth={isMobile} className={classes.btn} {...props} />;
+		<Button
+			component={GatsbyLink}
+			role="link"
+			fullWidth={isMobile}
+			className={classes.btn}
+			{...props}
+		/>;
+
 
 	const BorderLink = ({ ...props }) =>
 		<Button
 			component={MUILink}
-			role='link'
+			role="link"
 			className={classes.borderBtn}
 			style={{ margin: 10, textDecoration: 'none' }}
-			variant='contained'
+			variant="contained"
 			{...props}
-			color='secondary'
+			color="secondary"
 		/>;
 
+
 	const links = [
 		{
 			name: 'Home',
@@ -80,13 +93,25 @@ function ButtonBar({ isMobile }) {
 				<PoppinLink to={link.to} key={`nav-${index}`}>
 					{link.name}
 				</PoppinLink>)}
-			{
+
+			{Date.now() < hothStart.getTime() ?
 				<BorderLink
-					disabled={Date.now() < applicationOpen.getTime() || Date.now() > applyDeadline.getTime()}
+					disabled={
+						Date.now() < applicationOpen.getTime() ||
+						Date.now() > applyDeadline.getTime()
+					}
 					href={'https://forms.gle/VMhdCzMov8RvGUfP8'}
-					target='_blank'
+					target="_blank"
 				>
 					Apply
+				</BorderLink>			 :
+				<BorderLink
+					disabled={
+						Date.now() < hothStart.getTime() || Date.now() > hothEnd.getTime()
+					}
+					href="/submissions"
+				>
+					Submit
 				</BorderLink>
 			}
 		</>
diff --git a/src/components/SubmissionsPage/Submissions.js b/src/components/SubmissionsPage/Submissions.js
new file mode 100644
index 00000000..1a33281e
--- /dev/null
+++ b/src/components/SubmissionsPage/Submissions.js
@@ -0,0 +1,94 @@
+import React, { useState } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Container from '@material-ui/core/Container';
+import Link from '@material-ui/core/Link';
+
+const useStyles = makeStyles(theme => ({
+	title: {
+		fontWeight: theme.typography.fontWeightBold,
+		paddingTop: theme.spacing(11),
+		[theme.breakpoints.down('sm')]: {
+			paddingTop: theme.spacing(4)
+		},
+		paddingBottom: theme.spacing(4)
+	},
+	info: {
+		paddingTop: theme.spacing(4)
+	},
+	link: {
+		color: theme.palette.secondary.main
+	},
+	linkClicked: {
+		color: theme.palette.secondary.dark
+	}
+}));
+
+const SubmissionsPage = () => {
+	const classes = useStyles();
+
+	const [formClicked, setFormClicked] = useState(false);
+	const [devPostClicked, setDevPostClicked] = useState(false);
+
+	const handleFormClick = () => {
+		setFormClicked(true);
+	};
+
+	const handleDevPostClick = () => {
+		setDevPostClicked(true);
+	};
+
+	return (
+		<Container maxWidth="md">
+			<Typography
+				align="left"
+				variant="h4"
+				component="h1"
+				className={classes.title}
+			>
+				Submission Info
+			</Typography>
+
+			<Typography align="left" variant="h5" component="h2">
+				Follow These 2 Final Steps to Submit Your Project:
+			</Typography>
+
+			<Typography className={classes.info}>
+				1{')'} Submit the project on the HOTH XI{' '}
+				<Link
+					href="https://hoth-xi.devpost.com/?ref_feature=challenge&ref_medium=discover"
+					target="_blank"
+					className={devPostClicked ? classes.linkClicked : classes.link}
+					onClick={handleDevPostClick}
+					rel="noopener noreferrer"
+				>
+					Devpost
+				</Link>
+			</Typography>
+
+			<Typography className={classes.info}>
+				2{')'} Fill out the HOTH XI{' '}
+				<Link
+					href="https://forms.gle/VPBHtLTyPo1pn7pn9"
+					target="_blank"
+					className={formClicked ? classes.linkClicked : classes.link}
+					onClick={handleFormClick}
+					rel="noopener noreferrer"
+				>
+					Submission Google Form
+				</Link>
+			</Typography>
+
+			<Typography
+				className={classes.info}
+				align="left"
+				variant="h6"
+				component="h3"
+			>
+				Thank You for Participating in HOTH XI!
+			</Typography>
+		</Container>
+	);
+};
+
+export default SubmissionsPage;
diff --git a/src/pages/submissions.js b/src/pages/submissions.js
new file mode 100644
index 00000000..fb369b6a
--- /dev/null
+++ b/src/pages/submissions.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+import Layout from '../components/layout';
+import SEO from '../components/seo';
+import Submissions from '../components/SubmissionsPage/Submissions';
+
+
+const SubmissionsPage = () => {
+	return <Layout>
+		<SEO title='Submissions' />
+		<Submissions/>
+	</Layout>;
+};
+
+export default SubmissionsPage;