Use new standard CTA buttons

Nonprofit-Exchange-Hub · Sep 16, 2023 · 8155995 · 8155995
1 parent 8565dfa
commit 8155995
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 17 deletions.
diff --git a/client/src/components/BannerSection.tsx b/client/src/components/BannerSection.tsx
@@ -2,7 +2,8 @@ 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 CTAButton from './Buttons/CTAButton';
+import { CTAHeroButton } from './Buttons/Button';
+import { useHistory } from 'react-router-dom';
 
 const useStyles = makeStyles()((theme: Theme) => ({
   gridTitle: {
@@ -43,14 +44,15 @@ function BannerText() {
 
 function BannerSection() {
   const { classes } = useStyles();
+  const history = useHistory();
 
   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 />
-            <CTAButton text="Join Now" />
+            <CTAHeroButton text="Join Now" onClick={() => history.push('/signup-citizen')} />
           </Box>
         </Grid>
         <Grid

diff --git a/client/src/components/Header.tsx b/client/src/components/Header.tsx
@@ -30,6 +30,7 @@ import routes from '../routes/routes';
 import { APP_API_BASE_URL } from '../configs';
 import { UserAvatar } from './Users/UserAvatar';
 import { ModalContext } from './../providers/ModalProvider';
+import { PrimaryCTAButton } from './Buttons/Button';
 
 const useStyles = makeStyles()((theme: Theme) => ({
   home: {
@@ -74,18 +75,6 @@ const useStyles = makeStyles()((theme: Theme) => ({
   logo: {
     height: '30px',
   },
-  signUpButton: {
-    textTransform: 'capitalize',
-    backgroundColor: theme.palette.primary.main,
-    color: `${theme.palette.primary.contrastText}`,
-    borderRadius: '10px',
-    border: `1px solid ${theme.palette.primary.main}`,
-    marginLeft: '0px',
-    width: '100px',
-    '&:hover': {
-      color: `${theme.palette.text.primary}`,
-    },
-  },
   signInButton: {
     textTransform: 'capitalize',
     backgroundColor: `${theme.palette.primary.contrastText}`,
@@ -476,9 +465,11 @@ function Header() {
             </>
           ) : (
             <>
-              <Button className={classes.signUpButton} onClick={() => handleoOpenModal('SignUp')}>
-                Join Now
-              </Button>
+              {/* TODO: Use () => handleoOpenModal('SignUp') when implemented */}
+              <PrimaryCTAButton
+                text="Join Now"
+                onClick={() => history.push('/signup-citizen')}
+              ></PrimaryCTAButton>
               <Button className={classes.signInButton} onClick={() => handleoOpenModal('SignIn')}>
                 Sign In
               </Button>