Kaylin/making nav bar buttons interesting

src/components/LinkNoStyle/LinkNoStyle.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'gatsby';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+
+const styles = () => ({
+	link: {
+		textDecoration: 'inherit',
+		color: 'inherit'
+	}
+});
+
+
+function LinkNoStyle({ classes, className, ...props }) {
+	return <Link className={classNames(classes.link, className)} {...props} />;
+}
+
+LinkNoStyle.propTypes = {
+	classes: PropTypes.object.isRequired,
+	className: PropTypes.string
+};
+// type checking
+
+export default withStyles(styles)(LinkNoStyle);

src/components/MenuBar/ButtonBar.js

@@ -2,50 +2,80 @@ 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 LinkNoStyle from '../LinkNoStyle/LinkNoStyle.js';
 import { applicationOpen, applyDeadline } 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
+		link: {
+			fontWeight: 500,
+			color: 'black',
+			margin: '0 13px',
+			position: 'relative',
+			textDecoration: 'none',
+			'&::after': {
+				content: '""',
+				position: 'absolute',
+				height: '2px',
+				width: '100%',
+				left: '0px',
+				bottom: '-5px',
+				backgroundColor: theme.palette.primary.dark,
+				transform: 'scaleX(0)',
+				transformOrigin: 'bottom right',
+				transition: 'transform 0.3s ease-in-out'
+			},
+			'&:hover::after': {
+				transform: 'scaleX(1)',
+				transformOrigin: 'bottom left'
+			}
+		},
+		mobileLink: {
+			fontFamily: theme.typography.fontFamily,
+			fontWeight: 500,
+			margin: '25px 0px 0px',
+			textAlign: 'center',
+			color: 'black'
 		},
-		borderBtn: {
-			margin: 10,
-			color: '#FFFFFF',
-			transition: theme.transitions.create(['color', 'background'], {
-				duration: theme.transitions.duration.complex
-			}),
+		applyLink: {
+			fontFamily: theme.typography.fontFamily,
+			fontWeight: 600,
+			backgroundColor: theme.palette.primary.main,
+			margin: props => props.isMobile ? '10px auto 0' : '0 25px 0 0',
+			padding: '7px 20px',
+			borderRadius: '20px',
+			color: 'white',
 			'&:hover': {
-				background: '#DB99FD'
-			},
-			[theme.breakpoints.down(menuBarAdaptiveThreshold)]: {
-				// mobile
-				margin: 0
+				backgroundColor: theme.palette.primary.light
 			}
 		}
 	};
 });
 
+
 function ButtonBar({ isMobile }) {
 	const classes = useStyles();
 
-	const PoppinLink = ({ ...props }) =>
-		<Button component={GatsbyLink} role='link' fullWidth={isMobile} className={classes.btn} {...props} />;
+	const PoppinLink = ({ to, ...props }) => {
+		return !isMobile ?
+			<LinkNoStyle to={to} fullWidth={isMobile} className={classes.link} {...props} /> :
+			<LinkNoStyle to={to} fullWidth={isMobile} className={classes.mobileLink} {...props} />;
+	};
 
-	const BorderLink = ({ ...props }) =>
-		<Button
-			component={MUILink}
-			role='link'
-			className={classes.borderBtn}
-			style={{ margin: 10, textDecoration: 'none' }}
-			variant='contained'
-			{...props}
-			color='secondary'
-		/>;
+	PoppinLink.propTypes = {
+		to: PropTypes.string.isRequired
+	};
+
+	const ApplyLink = ({ to, ...props }) => {
+		return <LinkNoStyle to={to}>
+			<Button fullWidth={isMobile} className={classes.applyLink} {...props} />
+		</LinkNoStyle>;
+	};
+
+	ApplyLink.propTypes = {
+		to: PropTypes.string.isRequired
+	};
 
 	const links = [
 		{
@@ -70,7 +100,7 @@ function ButtonBar({ isMobile }) {
 		},
 		{
 			name: 'Gallery',
-			to: '/gallery/hoth-x' // need to update this link to be latest HOTH
+			to: '/gallery/hoth-xi' // need to update this link to be latest HOTH
 		}
 	];
 
@@ -81,13 +111,13 @@ function ButtonBar({ isMobile }) {
 					{link.name}
 				</PoppinLink>)}
 			{
-				<BorderLink
+				<ApplyLink
 					disabled={Date.now() < applicationOpen.getTime() || Date.now() > applyDeadline.getTime()}
 					href={'https://forms.gle/VMhdCzMov8RvGUfP8'}
 					target='_blank'
 				>
 					Apply
-				</BorderLink>
+				</ApplyLink>
 			}
 		</>
 	);
@@ -101,4 +131,5 @@ ButtonBar.defaultProps = {
 	isMobile: false
 };
 
+
 export default ButtonBar;