diff --git a/src/components/client/index/sections/SubscriptionSection/SubscriptionSection.tsx b/src/components/client/index/sections/SubscriptionSection/SubscriptionSection.tsx index 2ccb0603b..0022421ee 100644 --- a/src/components/client/index/sections/SubscriptionSection/SubscriptionSection.tsx +++ b/src/components/client/index/sections/SubscriptionSection/SubscriptionSection.tsx @@ -1,23 +1,20 @@ import React, { useState } from 'react' import * as yup from 'yup' import { useTranslation } from 'next-i18next' -import { Trans } from 'react-i18next' import { useMutation } from '@tanstack/react-query' import { AxiosError, AxiosResponse } from 'axios' import { ApiError } from 'next/dist/server/api-utils' import { AlertStore } from 'stores/AlertStore' -import GenericForm from 'components/common/form/GenericForm' -import SubmitButton from 'components/common/form/SubmitButton' -import EmailField from 'components/common/form/EmailField' -import CloseModalButton from 'components/common/CloseModalButton' import { email } from 'common/form/validation' import { Heading } from '../../IndexPage.styled' -import { InfoText, SubscribeGrid } from './SubscriptionSection.styled' -import { Dialog, DialogContent, DialogTitle, Grid, Typography } from '@mui/material' +import { InfoText } from './SubscriptionSection.styled' +import { Grid } from '@mui/material' import ArrowForwardSharp from '@mui/icons-material/ArrowForwardSharp' -import ThumbUpIcon from '@mui/icons-material/ThumbUp' import { useSendConfirmationEmail } from 'service/notification' import { SendConfirmationEmailResponse, SendConfirmationEmailInput } from 'gql/notification' +import EmailIcon from '@mui/icons-material/Email' +import RenderSubscribeModal from 'components/client/notifications/GeneralSubscribeModal' +import { SectionGridWrapper, SubscribeButton, SubscribeHeading, Subtitle } from '../PlatformStatisticsSection/PlatformStatisticsSection.styled' export type SubscribeToNotificationsInput = { email: string @@ -32,6 +29,7 @@ const SubscriptionSection = () => { const [loading, setLoading] = useState(false) const [open, setOpen] = useState(false) const [email, setEmail] = useState('') + const [subscribeIsOpen, setSubscribeOpen] = useState(false) async function onSubmit(values: { email: string }) { setLoading(true) @@ -66,78 +64,39 @@ const SubscriptionSection = () => { }) return ( - <> - {t('index:subscription-section.heading')} - {t('index:subscription-section.content')} - - - ({ - textAlign: 'end', - [theme.breakpoints.down(768)]: { textAlign: 'center' }, - })}> - - - ({ - textAlign: 'center', - [theme.breakpoints.up('md')]: { - textAlign: 'start', - }, - })}> - ({ - width: '50%', - backgroundColor: theme.palette.primary.light, - boxShadow: - '0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px rgba(0, 0, 0, 0.14), 0px 1px 5px rgba(0, 0, 0, 0.12)', - })} - label="campaigns:subscribe.subscribe-button" - loading={loading} - endIcon={} - /> - - - - {open && ( - - - - <> - - - - {t('campaigns:subscribe.confirm-subscribe')} - - - - - - - - - )} - + ({ + marginBottom: theme.spacing(5), + })}> + ({ + margin: '0 auto', + maxWidth: theme.spacing(95), + textAlign: "center" + })}> + {t('index:subscription-section.heading')} + {t('index:subscription-section.content')} + {subscribeIsOpen && } + + setSubscribeOpen(true)} + cursor="pointer" + /> + setSubscribeOpen(true)}> + {t('campaigns:cta.subscribe-monthly-newsletter')} + + + {t('campaigns:cta.subscribe-general-monthly-newsletter')} + setSubscribeOpen(true)} + variant="contained" + endIcon={}> + {t('campaigns:cta.subscribe-general-newsletter-button')} + + + ) } diff --git a/src/components/client/index/sections/TeamMembersSection/TeamMembersSection.tsx b/src/components/client/index/sections/TeamMembersSection/TeamMembersSection.tsx index 3d8e402c6..dcfd2219a 100644 --- a/src/components/client/index/sections/TeamMembersSection/TeamMembersSection.tsx +++ b/src/components/client/index/sections/TeamMembersSection/TeamMembersSection.tsx @@ -3,24 +3,14 @@ import Image from 'next/image' import { useTranslation } from 'next-i18next' import ChevronRightIcon from '@mui/icons-material/ChevronRight' import { Box, Grid } from '@mui/material' -import ArrowForwardSharp from '@mui/icons-material/ArrowForwardSharp' -import EmailIcon from '@mui/icons-material/Email' import { routes } from 'common/routes' import { Heading, InfoText, OutlinedButton } from '../../IndexPage.styled' import { Root } from './TeamMembersSection.styled' -import RenderSubscribeModal from 'components/client/notifications/GeneralSubscribeModal' -import { - SubscribeHeading, - SubscribeButton, - Subtitle, - SectionGridWrapper, -} from '../PlatformStatisticsSection/PlatformStatisticsSection.styled' +import { SectionGridWrapper } from '../PlatformStatisticsSection/PlatformStatisticsSection.styled' export default function TeamMembersSection() { const { t } = useTranslation('index') - const [subscribeIsOpen, setSubscribeOpen] = useState(false) - const teamImagePath = '/img/team-photos/team-image.png' return ( @@ -46,26 +36,6 @@ export default function TeamMembersSection() { }> {t('team-section.meet-our-team')} - {subscribeIsOpen && } - - setSubscribeOpen(true)} - cursor="pointer" - /> - setSubscribeOpen(true)}> - {t('campaigns:cta.subscribe-monthly-newsletter')} - - - {t('campaigns:cta.subscribe-general-monthly-newsletter')} - setSubscribeOpen(true)} - variant="contained" - endIcon={}> - {t('campaigns:cta.subscribe-general-newsletter-button')} -