diff --git a/src/features/AdditionalPages/ContactUsPage/MainBlock/ContactForm/ContactForm.component.tsx b/src/app/common/components/ContactForm/ContactForm.component.tsx similarity index 82% rename from src/features/AdditionalPages/ContactUsPage/MainBlock/ContactForm/ContactForm.component.tsx rename to src/app/common/components/ContactForm/ContactForm.component.tsx index 59a681391..4bebf8b19 100644 --- a/src/features/AdditionalPages/ContactUsPage/MainBlock/ContactForm/ContactForm.component.tsx +++ b/src/app/common/components/ContactForm/ContactForm.component.tsx @@ -10,7 +10,7 @@ import Email from '@/models/email/email.model'; const MAX_SYMBOLS = 500; -const ContactForm = () => { +const ContactForm = ({ customClass = "" }) => { const [formData, setFormData] = useState({ email: '', message: '' }); const [isVerified, setIsVerified] = useState(false); const messageLength = formData.message.length | 0; @@ -25,27 +25,27 @@ const ContactForm = () => { if (isVerified) { const newEmail: Email = { from: formData.email, content: formData.message }; EmailApi.send(newEmail) - .then(successMessage) - .catch(errorMessage); + .then(successMessage) + .catch(errorMessage); } }; const successMessage = () => { messageApi.open({ - type: 'success', - content: 'Лист успішно надісланий', + type: 'success', + content: 'Лист успішно надісланий', }); }; const errorMessage = () => { messageApi.open({ - type: 'error', - content: 'Щось пішло не так...', + type: 'error', + content: 'Щось пішло не так...', }); }; return ( -
+
{messageContextHolder}
Форма зворотного зв’язку
@@ -62,9 +62,11 @@ const ContactForm = () => { { onChange={handleChange} />

- {messageLength} + {messageLength} / {MAX_SYMBOLS}

void | undefined; +} + +export const ContactUsModal = ({ text, toggleState }: Props) => { + const [isActive, setActive] = useState(false); + const handleClick = () => { + setActive(true); + toggleState(); + }; + return ( + <> + handleClick()} className='text-white'>{text} + setActive(false)} width={"max-content"}> + + + + ) +} \ No newline at end of file diff --git a/src/app/common/components/modals/ContactUsModal/ContactUsModal.styles.scss b/src/app/common/components/modals/ContactUsModal/ContactUsModal.styles.scss new file mode 100644 index 000000000..5157ffe83 --- /dev/null +++ b/src/app/common/components/modals/ContactUsModal/ContactUsModal.styles.scss @@ -0,0 +1,24 @@ +@use "@sass/variables/_variables.colors.scss" as c; +@use "@sass/mixins/_utils.mixins.scss" as mut; + +.headerItem{ + background-color: transparent; + border: none; + text-align: left; + color: inherit; + text-decoration: none; +} + +.headerItem:hover { + cursor: pointer; + color: c.$dark-red-color; +} + +.headerItem:after { + content: ''; + background-color: c.$dark-red-color; + color: c.$dark-red-color; + + @include mut.sized(100%, 2px); + @include mut.positioned-as(absolute, $bottom: 0, $left: 0); +} \ No newline at end of file diff --git a/src/app/layout/footer/Footer.component.tsx b/src/app/layout/footer/Footer.component.tsx index b2c1c4c74..a61b8c27b 100644 --- a/src/app/layout/footer/Footer.component.tsx +++ b/src/app/layout/footer/Footer.component.tsx @@ -13,6 +13,7 @@ import useWindowSize from '@hooks/stateful/useWindowSize.hook'; import JobApi from '@/app/api/job/Job.api'; import FRONTEND_ROUTES from '@/app/common/constants/frontend-routes.constants'; +import { ContactUsModal } from '@/app/common/components/modals/ContactUsModal/ContactUsModal.component'; import scrollWithOffset from '@/app/common/utils/window.utility'; const Footer = () => { @@ -57,7 +58,7 @@ const Footer = () => {
    diff --git a/src/app/layout/footer/Footer.styles.scss b/src/app/layout/footer/Footer.styles.scss index 26481a09b..61567e5d6 100644 --- a/src/app/layout/footer/Footer.styles.scss +++ b/src/app/layout/footer/Footer.styles.scss @@ -66,6 +66,12 @@ a{ color: c.$pure-white-color; } + + li{ + .ant-typography.text-white{ + color: white; + } + } } .socialIconContainer { diff --git a/src/app/layout/header/HeaderDrawer/HeaderDrawer.component.tsx b/src/app/layout/header/HeaderDrawer/HeaderDrawer.component.tsx index 1fbcc6f30..872eb99ec 100644 --- a/src/app/layout/header/HeaderDrawer/HeaderDrawer.component.tsx +++ b/src/app/layout/header/HeaderDrawer/HeaderDrawer.component.tsx @@ -15,6 +15,7 @@ import FRONTEND_ROUTES from '@/app/common/constants/frontend-routes.constants'; import HeaderDrawerItem from '@/app/layout/header/HeaderDrawer/HeaderDrawerItem/HeaderDrawerItem.component'; import SocialMediaLinks from './SocialMediaLinks/SocialMediaLinks.component'; +import { ContactUsModal } from '@/app/common/components/modals/ContactUsModal/ContactUsModal.component'; const mobileOptions = 8; const desktopOptions = 6; @@ -172,13 +173,9 @@ const HeaderDrawer = () => { text="Політика конфіденційності" link={FRONTEND_ROUTES.OTHER_PAGES.PRIVACY_POLICY} /> - + text="Зворотний зв'язок" />
diff --git a/src/features/AdditionalPages/ContactUsPage/MainBlock/ContactForm/ContactForm.styles.scss b/src/features/AdditionalPages/ContactUsPage/MainBlock/ContactForm/ContactForm.styles.scss deleted file mode 100644 index 9cb2e544c..000000000 --- a/src/features/AdditionalPages/ContactUsPage/MainBlock/ContactForm/ContactForm.styles.scss +++ /dev/null @@ -1,190 +0,0 @@ -@use "@sass/_utils.functions.scss" as f; -@use "@sass/mixins/_utils.mixins.scss" as mut; -@use "@assets/sass/variables/_variables.fonts.scss" as ft; -@use "@assets/sass/variables/_variables.colors.scss" as c; - -.contactUsContainer{ - .ant-input-affix-wrapper, .ant-input-affix-wrapper-focused{ - border: none; - box-shadow: none !important; - } - - .formContainer{ - width: f.pxToRem(568px); - padding: f.pxToRem(24px); - - background-color: #FFFFFF; - box-shadow: 0px 5.57966px 5.57966px rgba(0, 0, 0, 0.25); - - @include mut.full-rounded(20px); - text-align: center; - - .formTitleContainer{ - @include mut.flexed($direction: column, $gap: 24px); - margin-bottom: 24px; - .formTitle{ - @include mut.with-font($font-family: ft.$closer-text-font, $font-weight: 500, $font-size: 20px); - line-height: 26px; - color: #891F16; - } - .formSubTitle{ - @include mut.with-font($font-family: ft.$roboto-font, $font-weight: 300, $font-size: 20px); - line-height: 23px; - color: c.$lighter-black-color; - text-align: left; - } - } - - .contactForm{ - @include mut.flexed($direction: column, $gap: 24px); - - .custom-character-counter{ - margin-bottom: -12px; - text-align: right; - font-family: "Roboto", "Helvetica Neue", sans-serif !important; - font-size: 16px; - color: #00000073; - } - textarea{ - resize: none; - outline: none; - height: f.pxToRem(140px); - } - textarea, input:focus{ - outline: none; - } - textarea, input{ - width: 100%; - padding: f.pxToRem(12px) f.pxToRem(24px); - border: 1px solid #D3CDCA; - @include mut.full-rounded(14px); - @include mut.with-font($font-family: ft.$roboto-font, $font-weight: 300, $font-size: 20px); - line-height: 27px; - - overflow: auto !important; - } - - .textareaBlock{ - position: relative; - .amountSymbols{ - position: absolute; - bottom: f.pxToRem(10px); - right: f.pxToRem(10px); - color: #C4C4C4; - } - } - - .ant-input:hover, .ant-input:focus{ - border: f.pxToRem(1px) solid #D3CDCA; - box-shadow: none; - } - .ant-form-item{ - margin-bottom: 0; - } - .ant-form-item:focus{ - outline: none; - } - .ant-input-textarea-show-count::after{ - position: absolute; - top: f.pxToRem(134px); - right: f.pxToRem(10px); - } - .ant-btn-primary:not(:disabled):hover{ - background-color: #E04031; - } - .ant-form-item .ant-form-item-explain-error { - display: none; - } - - button{ - @include mut.with-font($font-family: ft.$roboto-font, $font-weight: 500, $font-size: 20px); - line-height: 23px; - color: #FFFFFF; - - padding: f.pxToRem(25px) f.pxToRem(56px); - height: 100%; - background-color: c.$accented-red-color; - box-shadow: 0px 4px 4px rgba(219, 52, 36, 0.18); - @include mut.full-rounded(14px); - border: none; - cursor: pointer; - - &:hover { - background-color: c.$dark-red-color; - } - } - - .required-input { - position: relative; - } - .required-input::before { - content: '*'; - position: absolute; - top: 0; - left: f.pxToRem(-8px); - transform: translate(-50%, -50%); - color: red; - font-size: 20px; - } - - .captchaBlock{ - @include mut.flexed($direction: column, $justify-content: center, $align-items: center); - } - } - } -} - -@media screen and (max-width: 1024px){ - .contactUsContainer{ - .formContainer{ - width: 100%; - - padding: f.pxToRem(16px); - margin-top: f.pxToRem(60px); - - .formTitleContainer{ - @include mut.flexed($direction: column, $gap: 16px); - margin-bottom: f.pxToRem(16px); - - .formTitle{ - @include mut.with-font($font-family: ft.$closer-text-font, $font-weight: 500, $font-size: 14px); - text-align: left; - line-height: 18px; - } - .formSubTitle{ - @include mut.with-font($font-family: ft.$roboto-font, $font-weight: 300, $font-size: 14px); - line-height: 16px; - } - } - - .contactForm{ - @include mut.flexed($direction: column, $gap: 16px); - - button{ - width: 100%; - padding: f.pxToRem(15px) 0; - } - - textarea, input{ - @include mut.with-font($font-family: ft.$roboto-font, $font-weight: 300, $font-size: 16px); - line-height: 21px; - } - - .ant-input-textarea-show-count::after{ - top: f.pxToRem(110px); - } - - .ant-input-textarea-show-count .ant-input-data-count{ - margin-bottom: f.pxToRem(-18px); - } - } - } - } -} - -@media screen and (max-width: 480px) { - .contactUsContainer .formContainer - .formTitleContainer .formTitle{ - text-align: center; - } -} diff --git a/src/features/AdditionalPages/ContactUsPage/MainBlock/MainBlock.component.tsx b/src/features/AdditionalPages/ContactUsPage/MainBlock/MainBlock.component.tsx index 38a713a96..591112349 100644 --- a/src/features/AdditionalPages/ContactUsPage/MainBlock/MainBlock.component.tsx +++ b/src/features/AdditionalPages/ContactUsPage/MainBlock/MainBlock.component.tsx @@ -1,7 +1,7 @@ import './MainBlock.styles.scss'; import ContactBlock from './ContactBlock/ContactBlock.component'; -import ContactForm from './ContactForm/ContactForm.component'; +import ContactForm from '@/app/common/components/ContactForm/ContactForm.component'; const MainBlock = () => (