Merge pull request #2836 from Northeastern-Electric-Racing/#2794-Crea…

…te-Member-Encouragement

#2794 Component with button to encourage memberst to go to teams

src/frontend/src/pages/HomePage/GuestHomePage.tsx

@@ -3,6 +3,7 @@ import PageLayout from '../../components/PageLayout';
 import { AuthenticatedUser } from 'shared';
 import ImageWithButton from './components/ImageWithButton';
 import emitter from '../../app/EventBus';
+import MemberEncouragement from './components/MemberEncouragement';
 
 interface GuestHomePageProps {
  user: AuthenticatedUser;
@@ -20,6 +21,7 @@ const GuestHomePage = ({ user, setOnMemberHomePage }: GuestHomePageProps) => {
  <Typography variant="h3" textAlign="center" sx={{ mt: 2, pt: 3 }}>
  {user ? `Welcome, ${user.firstName}!` : 'Welcome, Guest!'}
  </Typography>
+ <MemberEncouragement />
  <Box sx={{ display: 'flex', mt: 4 }}>
  <Box sx={{ display: 'flex', padding: '50px', gap: 5 }}>
  <ImageWithButton

src/frontend/src/pages/HomePage/components/MemberEncouragement.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Box, Alert, Typography, Grid } from '@mui/material';
+import { routes } from '../../../utils/routes';
+import { NERButton } from '../../../components/NERButton';
+import { useHistory } from 'react-router-dom';
+
+const MemberEncouragement: React.FC = () => {
+ const history = useHistory();
+ return (
+ <Box sx={{ width: '100%', my: 2, mx: 'auto' }}>
+ <Alert
+ variant="filled"
+ severity="info"
+ icon={false}
+ sx={{
+ '& .MuiAlert-message': {
+ width: '100%'
+ }
+ }}
+ >
+ <Grid container alignItems="center" justifyContent="space-between">
+ <Grid item>
+ <Typography variant="h6" color="white">
+ Already a member?
+ </Typography>
+ <Typography variant="body2" color="white">
+ Talk to the head of your team to become a member and get added to the team on FinishLine!
+ </Typography>
+ </Grid>
+ <Grid item>
+ <NERButton
+ variant="contained"
+ size="small"
+ sx={{ color: 'white' }}
+ onClick={() => {
+ history.push(routes.TEAMS);
+ }}
+ >
+ See Teams &gt;
+ </NERButton>
+ </Grid>
+ </Grid>
+ </Alert>
+ </Box>
+ );
+};
+
+export default MemberEncouragement;