Merge branch 'feature_291_marketing-text-context-creation' of https:/…

…/github.com/Nonprofit-Exchange-Hub/web-app into feature_291_marketing-text-context-creation

client/src/components/BannerSection.tsx

@@ -1,10 +1,12 @@
+import React, { useContext } from 'react';
 import { Grid, Typography, Box } from '@mui/material';
 import { makeStyles } from 'tss-react/mui';
 import type { Theme } from '@mui/material/styles';
 import MainImage from '../assets/banner-section-main.svg';
 import { CTAHeroButton } from './Buttons/Button';
 import { useHistory } from 'react-router-dom';
 import { useMarketingText } from './../providers/MarketingTextProvider';
+import { ModalContext } from './../providers/ModalProvider';
 
 const useStyles = makeStyles()((theme: Theme) => ({
   gridTitle: {
@@ -47,8 +49,16 @@ function BannerText() {
 function BannerSection() {
   const { banner } = useMarketingText();
   const { classes } = useStyles();
-  const history = useHistory();
+  const modalContext = useContext(ModalContext);
+  const { openModal } = modalContext;
 
+  const handleOpenModal = (modalType: 'SignIn' | 'SignUp') => {
+    if (modalType === 'SignIn') {
+      openModal('SignIn');
+    } else if (modalType === 'SignUp') {
+      openModal('SignUp');
+    }
+  };
   return (
     <Box>
       <Grid container spacing={3} sx={{ height: '600px' }}>

client/src/components/Buttons/CTAButton.tsx

@@ -0,0 +1,45 @@
+import { makeStyles } from 'tss-react/mui';
+import { Typography } from '@mui/material';
+import type { Theme } from '@mui/material/styles';
+import React, { useContext } from 'react';
+import { ModalContext } from '../../providers/ModalProvider';
+
+const useStyles = makeStyles()((theme: Theme) => ({
+  CTAButton: {
+    color: 'white',
+    backgroundColor: '#EF6A60',
+    borderRadius: '10px',
+    fontFamily: 'Poppins',
+    fontWeight: 'semi-bold',
+    border: 'none',
+    '&:hover': {
+      backgroundColor: '#EF6A60',
+      cursor: 'pointer',
+    },
+  },
+}));
+
+type Props = {
+  text: string;
+};
+
+function CTAButton({ text }: Props) {
+  const { classes } = useStyles();
+  const modalContext = useContext(ModalContext);
+  const { openModal } = modalContext;
+
+  return (
+    <button onClick={() => openModal('SignUp')} className={classes.CTAButton}>
+      <Typography
+        sx={{
+          fontSize: '22px',
+          padding: '15px 25px 15px 25px',
+        }}
+      >
+        {text}
+      </Typography>
+    </button>
+  );
+}
+
+export default CTAButton;

client/src/components/Header.tsx

@@ -109,7 +109,7 @@ function Header() {
   const modalContext = useContext(ModalContext);
   const { openModal } = modalContext;
 
-  const handleoOpenModal = (modalType: 'SignIn' | 'SignUp') => {
+  const handleOpenModal = (modalType: 'SignIn' | 'SignUp') => {
     if (modalType === 'SignIn') {
       openModal('SignIn');
     } else if (modalType === 'SignUp') {
@@ -423,12 +423,11 @@ function Header() {
                 aria-haspopup="true"
                 aria-expanded={isProfileMenuOpen ? 'true' : undefined}
                 onClick={handleClick}
-                sx={{ marginRight: '.5em', fill: 'black' }}
+                sx={{ marginRight: '.5em' }}
               >
                 <UserAvatar
                   userFirstName={user.firstName}
                   profileImageUrl={user.profile_image_url ?? ''}
-                  style={{ backgroundColor: 'black' }}
                 />
               </IconButton>
               <Menu
@@ -489,12 +488,11 @@ function Header() {
             </>
           ) : (
             <>
-              {/* TODO: Use () => handleoOpenModal('SignUp') when implemented */}
               <PrimaryCTAButton
                 text="Join Now"
-                onClick={() => history.push('/signup-citizen')}
+                onClick={() => handleOpenModal('SignUp')}
               ></PrimaryCTAButton>
-              <Button className={classes.signInButton} onClick={() => handleoOpenModal('SignIn')}>
+              <Button className={classes.signInButton} onClick={() => handleOpenModal('SignIn')}>
                 Sign In
               </Button>
             </>