Custom 404

src/components/button.js

@@ -0,0 +1,32 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import { Link } from './link'
+import { Typography, Button as MUIButton } from '@mui/material'
+import { useTheme } from '@mui/material/styles'
+
+
+
+export const Button = ({to, color, children,  sx = [], ...props}) => {
+  const theme = useTheme();
+
+  return (
+    <MUIButton
+    to={to}
+    variant="contained"
+    size="medium"
+    color={ color }
+    sx={[{
+      textTransform: "none",
+      padding: "0.5rem 2rem"
+    },
+    ...(Array.isArray(sx) ? sx : [sx]),
+  ]}
+    {...props}
+  >
+    <Typography variant="body2">
+      {children}
+    </Typography>
+  </MUIButton>
+
+  )
+}

src/components/feedback-form/config.js

@@ -22,8 +22,7 @@ export const schema = yup.object().shape({
     .email('Invalid email format'),
   subject: yup
     .string()
-    .oneOf(subjectOptions.map(option => option.value))
-    .required('Please select the most applicable subject.'),
+    .required('Please enter a subject.'),
   message: yup
     .string()
     .required('Please enter a message.'),

src/components/feedback-form/fields.js

@@ -65,39 +65,22 @@ export const EmailField = () => {
 //
 
 export const SubjectField = () => {
-  const { control, formState } = useFormContext()
+  const { formState, register } = useFormContext()
   const theme = useTheme();
 
   return (
-    <FormControl sx={{
-      '.MuiFormLabel-root': {
-        color: theme.palette.primary.main
-      },
-    }}>
-      <InputLabel id="subject-select-label" color="primary">Subject</InputLabel>
-      <Controller
+    <FormControl>
+      <TextField
         name="subject"
-        control={ control }
-        render={ ({ field }) => (
-          <Select
-            labelId="subject-select-label"
-            name="subject"
-            label="Subject"
-            variant="outlined"
-            { ...field }
-            error={ !!formState.errors.subject }
-
-          >
-            {
-              subjectOptions.map(option => (
-                <MenuItem
-                  key={ `subject-option-${ option.value }` }
-                  value={ option.value }
-                >{ option.displayText }</MenuItem>
-              ))
-            }
-          </Select>
-        ) }
+        label="Subject"
+        variant="outlined"
+        { ...register('subject')}
+        error={ !!formState.errors.subject }
+        sx={{
+          '.MuiFormLabel-root': {
+            color: theme.palette.primary.main
+          },
+        }}
       />
       {
         'subject' in formState.errors && <FormHelperText>{ formState.errors.subject.message }</FormHelperText>

src/components/feedback-form/form.js

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import PropTypes from 'prop-types'
-import { Box, Button, Divider, Stack, Typography } from '@mui/material'
+import { Box, Divider, Stack, Typography } from '@mui/material'
+import { Button } from '../button'
 import {
   Check as CheckIcon,
   Refresh as ResetIcon,
@@ -161,7 +162,8 @@ export const FeedbackForm = ({ presets }) => {
 
       <Stack
         direction="row"
-        gap={ 4 }
+        gap={ 8 }
+        justifyContent="center"
         sx={{
           '& > button': { flex: 1 },
           minWidth: '100%',

src/components/hero/homeHero.js

@@ -1,8 +1,9 @@
 import * as React from "react";
-import { Box, Typography, Button } from "@mui/material";
+import { Box, Typography } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 import { MaxWidthWrapper } from "../layout/maxWidthWrapper";
-import { Link } from "gatsby";
+import { Link } from "../link";
+import { Button } from "../button";
 
 const BREAKPOINT = 875;
 
@@ -40,25 +41,16 @@ export const HomeHero = ({ content }) => {
         <Typography 
           variant="body2" 
           color={theme.palette.branding.offWhite}
+          sx={{marginBottom: '120px'}}
         >
           {content.subheading}
         </Typography>
         <Button
-          variant="filled"
-          size="medium"
           component={Link}
           to="/features"
-          sx={{
-            marginTop: '100px',
-            textTransform: "none",
-            backgroundColor: theme.palette.secondary.main,
-            filter: `drop-shadow(5px 5px 5px ${theme.palette.branding.darkGranite} )`,
-            "&:hover": {
-              backgroundColor: theme.palette.secondary.light,
-            },
-          }}
+          color="secondary"
         >
-          <Typography variant="body2">Why use Helx?</Typography>
+          Why use Helx?
         </Button>
       </Box>
 

src/components/layout/footer.js

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Box, Typography, Link, Stack } from '@mui/material'
+import { Box, Typography, Stack } from '@mui/material'
+import { Link } from '../link'
 import { useTheme } from '@mui/material/styles'
 import GitHubIcon from '@mui/icons-material/GitHub';
 import './layout.css'
@@ -25,12 +26,12 @@ export const Footer = () => {
         spacing={{ xs: 1, md: 4 }}
         sx={{padding: '2rem 0 1.5rem'}}
       >
-        <Link href="https://renci.org" target="_blank" rel="noopener" underline="hover">
+        <Link to="https://renci.org">
           <Typography paragraph>
             &copy; { new Date().getFullYear() }  Renaissance Computing Institute
           </Typography>
         </Link>      
-        <Link href="https://github.com/helxplatform" target="_blank" rel="noopener" underline="hover" >
+        <Link to="https://github.com/helxplatform">
           <Stack
             direction="row"
             spacing={1}

src/components/layout/header.js

@@ -24,7 +24,7 @@ const mainMenuLinks = [
   }
 ]
 
-const Brand = props => {
+export const Brand = props => {
   const style = {
     alignItems: 'center',
     display: 'inline-flex',

src/components/layout/subfooter.js

@@ -1,17 +1,18 @@
 import React from 'react'
-import { Box, Typography, Stack, Button, Container } from '@mui/material'
+import { Box, Typography, Stack, Container } from '@mui/material'
 import { useTheme } from '@mui/material/styles'
 import './layout.css'
-import { Link } from 'gatsby'
+import { Link } from "../link"
+import { Button } from "../button"
 
 export const Subfooter = () => {
   const theme = useTheme()
 
   return (
-    <Container maxWidth="md">
+    <Container>
       <Stack
         direction={{ xs: 'column', md: 'row' }}
-        spacing={{ xs: 1, md: 2 }}
+        spacing={{ xs: 3, md: 4 }}
         sx={{
           display: 'flex',
           justifyContent: 'space-between',
@@ -20,7 +21,7 @@ export const Subfooter = () => {
         }}
       >
         <Box sx={{
-          flex: '4'
+          flex: '3'
         }}>
           <Typography variant='h3'>
             Have more questions about HeLx? Reach out to the team to learn more.
@@ -29,24 +30,14 @@ export const Subfooter = () => {
         <Box sx={{
           flex: '1',
           display: 'flex',
-          justifyContent: 'center',
+          justifyContent: 'flex-end',
         }}>
         <Button
           component={Link}
           to='/contact'
-          variant="contained"
           color="secondary"
-          sx={{
-            textTransform: "revert", 
-            margin:"1.7rem auto",
-            '&:hover': {
-              backgroundColor: `${ theme.palette.secondary.main }70`,
-            }
-          }}
         >
-          <Typography variant='body2'>
             Contact Us
-          </Typography>
         </Button>
         </Box>
       </Stack>

src/components/link.js

@@ -1,15 +1,31 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import { Link as GatsbyLink } from 'gatsby'
+import { Link as MUILink } from '@mui/material'
 
 const ExternalLink = ({ to, children, ...props }) => {
   return (
-    <a
+    <MUILink
       href={ to }
       target="_blank"
       rel="noopener noreferrer"
-      style={{textDecoration: "none"}}
-      >{ children }</a>
+      underline="hover"
+      sx={{ textDecoration: "none" }}
+      >{ children }</MUILink>
+  )
+}
+
+const InternalLink = ({ to, children, ...props }) => {
+  return (
+    <MUILink
+      component={ GatsbyLink }
+      to={ to } 
+      underline="hover"
+      { ...props } 
+      sx={{ textDecoration: 'none' }}
+    >
+      {children}
+    </MUILink>
   )
 }
 
@@ -20,9 +36,9 @@ export const Link = ({ to, children, ...props }) => {
   const externalUrlPattern = new RegExp(/^https?:\/\//)
   const externalUrlMatch = externalUrlPattern.exec(to)
 
-  const LinkComponent = externalUrlMatch || mailtoMatch ? ExternalLink : GatsbyLink
+  const LinkComponent = externalUrlMatch || mailtoMatch ? ExternalLink : InternalLink
 
-  return <LinkComponent to={ to } { ...props } style={{textDecoration: 'none',}}>{ children }</LinkComponent>
+  return <LinkComponent to={ to } { ...props }>{ children }</LinkComponent>
 }
 
 Link.propTypes = {

src/components/sections/institutionList.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { Typography, Stack, Box } from "@mui/material";
+import { Link } from '../link'
 import { MaxWidthWrapper } from "../layout/maxWidthWrapper"
 import { useTheme } from '@mui/material/styles'
 
@@ -31,14 +32,14 @@ export const InstitutionList = ({ content }) => {
                 },
               }}
             >
-              <a href={institution.link} target="_blank" rel="noreferrer">
+              <Link to={institution.link}>
                 <img
                   src={institution.image}
                   alt={institution.institutionName}
                   style={{ display: "block", maxHeight: 100 }}
                   loading="lazy"
                 />
-              </a>
+              </Link>
             </Box>
           ))}
         </Stack>

src/components/sections/resourceCards.js

@@ -1,8 +1,9 @@
 import React from "react";
-import { Typography, Box, Grid, Button, Link as MUILink} from "@mui/material";
+import { Typography, Box, Grid, Button } from "@mui/material";
 import { MaxWidthWrapper } from "../layout/maxWidthWrapper"
 import { ExternalLinkIcon } from "../icons"
 import { useTheme } from "@emotion/react";
+import { Link } from "../link"
 
 export const ResourceCardSection = ({ content }) => {
   const theme = useTheme();
@@ -24,7 +25,7 @@ export const ResourceCardSection = ({ content }) => {
       <Grid container spacing={4} my="2rem" sx={{display: "flex", justifyContent: "center"}}>
         {content.map((resource, index) => (
           <Grid item md={4} sm={12} xs={12} key={index}>
-            <MUILink href={resource.link} target="_blank" rel="noopener">
+            <Link to={resource.link}>
               <Box
                 display="flex"
                 flexDirection={{ md: "column", sm: "row" }}
@@ -65,7 +66,7 @@ export const ResourceCardSection = ({ content }) => {
                   />
                 </Typography>
               </Box>
-            </MUILink>
+            </Link>
           </Grid>
         ))}
       </Grid>