Feature 288 org sign up screens

client/src/components/BannerSection.tsx

@@ -1,9 +1,10 @@
+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 { ModalContext } from './../providers/ModalProvider';
 
 const useStyles = makeStyles()((theme: Theme) => ({
   gridTitle: {
@@ -44,15 +45,23 @@ function BannerText() {
 
 function BannerSection() {
   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' }}>
         <Grid xs={6} item justifyContent="center" sx={{ display: 'flex' }}>
           <Box sx={{ width: '550px', mt: '180px', mb: '66px', ml: '40px' }}>
             <BannerText />
-            <CTAHeroButton text="Join Now" onClick={() => history.push('/signup-citizen')} />
+            <CTAHeroButton text="Join Now" onClick={() => handleOpenModal('SignUp')} />
           </Box>
         </Grid>
         <Grid

client/src/components/Buttons/CTAButton.tsx

 export function CTAHeroButton({ text, onClick }: Props) { 
 export function CTAHeroButton({ text, onClick }: Props) { 
@@ -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') {
@@ -489,12 +489,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>
             </>