Kayla/submissions page

src/components/MenuBar/ButtonBar.js

@@ -1,104 +1,131 @@
-import React from 'react';
-import Button from '@material-ui/core/Button';
-import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/core/styles';
-import { Link as GatsbyLink } from 'gatsby';
-import { Link as MUILink } from '@material-ui/core';
+import React from "react"
+import Button from "@material-ui/core/Button"
+import PropTypes from "prop-types"
+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;
+	const menuBarAdaptiveThreshold = theme.breakpoints.values.sm * 1.3
 	return {
 		btn: {
-			fontWeight: 500
+			fontWeight: 500,
 		},
 		borderBtn: {
 			margin: 10,
-			color: '#FFFFFF',
-			transition: theme.transitions.create(['color', 'background'], {
-				duration: theme.transitions.duration.complex
+			color: "#FFFFFF",
+			transition: theme.transitions.create(["color", "background"], {
+				duration: theme.transitions.duration.complex,
 			}),
-			'&:hover': {
-				background: '#DB99FD'
+			"&:hover": {
+				background: "#DB99FD",
 			},
 			[theme.breakpoints.down(menuBarAdaptiveThreshold)]: {
 				// mobile
-				margin: 0
-			}
-		}
-	};
-});
+				margin: 0,
+			},
+		},
+	}
+})
 
 function ButtonBar({ isMobile }) {
-	const classes = useStyles();
+	const classes = useStyles()
 
-	const PoppinLink = ({ ...props }) =>
-		<Button component={GatsbyLink} role='link' fullWidth={isMobile} className={classes.btn} {...props} />;
+	const PoppinLink = ({ ...props }) => (
+		<Button
+			component={GatsbyLink}
+			role="link"
+			fullWidth={isMobile}
+			className={classes.btn}
+			{...props}
+		/>
+	)
 
-	const BorderLink = ({ ...props }) =>
+	const BorderLink = ({ ...props }) => (
 		<Button
 			component={MUILink}
-			role='link'
+			role="link"
 			className={classes.borderBtn}
-			style={{ margin: 10, textDecoration: 'none' }}
-			variant='contained'
+			style={{ margin: 10, textDecoration: "none" }}
+			variant="contained"
 			{...props}
-			color='secondary'
-		/>;
+			color="secondary"
+		/>
+	)
 
 	const links = [
 		{
-			name: 'Home',
-			to: '/'
+			name: "Home",
+			to: "/",
 		},
 		{
-			name: 'Announcements',
-			to: '/announcements'
+			name: "Announcements",
+			to: "/announcements",
 		},
 		{
-			name: 'Schedule',
-			to: '/schedule'
+			name: "Schedule",
+			to: "/schedule",
 		},
 		{
-			name: 'Workshops',
-			to: '/workshops'
+			name: "Workshops",
+			to: "/workshops",
 		},
 		{
-			name: 'Prizes',
-			to: '/prizes'
+			name: "Prizes",
+			to: "/prizes",
 		},
 		{
-			name: 'Gallery',
-			to: '/gallery/hoth-x' // need to update this link to be latest HOTH
-		}
-	];
+			name: "Gallery",
+			to: "/gallery/hoth-x", // need to update this link to be latest HOTH
+		},
+	]
 
 	return (
 		<>
-			{links.map((link, index) =>
+			{links.map((link, index) => (
 				<PoppinLink to={link.to} key={`nav-${index}`}>
 					{link.name}
-				</PoppinLink>)}
-			{
+				</PoppinLink>
+			))}
+
+			{Date.now() < hothStart.getTime() ? (
 				<BorderLink
-					disabled={Date.now() < applicationOpen.getTime() || Date.now() > applyDeadline.getTime()}
-					href={'https://forms.gle/VMhdCzMov8RvGUfP8'}
-					target='_blank'
+					disabled={
+						Date.now() < applicationOpen.getTime() ||
+						Date.now() > applyDeadline.getTime()
+					}
+					href={"https://forms.gle/VMhdCzMov8RvGUfP8"}
+					target="_blank"
 				>
 					Apply
 				</BorderLink>
-			}
+			) : (
+				<BorderLink
+					disabled={
+						Date.now() < hothStart.getTime() || Date.now() > hothEnd.getTime()
+					}
+					href="/submissions"
+				>
+					Submit
+				</BorderLink>
+			)}
 		</>
-	);
+	)
 }
 
 ButtonBar.propTypes = {
-	isMobile: PropTypes.bool
-};
+	isMobile: PropTypes.bool,
+}
 
 ButtonBar.defaultProps = {
-	isMobile: false
-};
+	isMobile: false,
+}
 
-export default ButtonBar;
+export default ButtonBar

src/components/SubmissionsPage/Submissions.js

@@ -0,0 +1,91 @@
+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"
+
+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{" "}
+				<a
+					href="https://hoth-xi.devpost.com/?ref_feature=challenge&ref_medium=discover"
+					target="_blank"
+					className={devPostClicked ? classes.linkClicked : classes.link}
+					onClick={handleDevPostClick}
+				>
+					devpost
+				</a>
+			</Typography>
+
+			<Typography className={classes.info}>
+				2{")"} Fill out the{" "}
+				<a
+					href="https://forms.gle/VPBHtLTyPo1pn7pn9"
+					target="_blank"
+					className={formClicked ? classes.linkClicked : classes.link}
+					onClick={handleFormClick}
+				>
+					HOTH XI Submission Form
+				</a>
+			</Typography>
+
+			<Typography
+				className={classes.info}
+				align="left"
+				variant="h6"
+				component="h3"
+			>
+				Thank You for Participating in HOTH XI!
+			</Typography>
+		</Container>
+	)
+}
+
+export default SubmissionsPage

src/components/constants.js

@@ -1,5 +1,5 @@
-export const hothStart = new Date('2024-03-02T08:00:00-08:00');
-export const hothEnd = new Date('2024-03-02T23:00:00-08:00');
-export const applyDeadline = new Date('2024-02-26T23:59:59-08:00');
+export const hothStart = new Date('2024-03-03T08:00:00-08:00');
+export const hothEnd = new Date('2024-03-03T23:00:00-08:00');
+export const applyDeadline = new Date('2024-02-28T23:59:59-08:00');
 export const applicationOpen = new Date('2024-01-29T08:00:00-08:00');
 export const scheduleAvailableTime = new Date('2024-02-26T08:00:00-08:00');

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;