From 9ff2c742459a2195126783292c957dc0c5b4ae35 Mon Sep 17 00:00:00 2001
From: Lvyshnevska <lilia.vyshnevska@gmail.com>
Date: Mon, 25 Nov 2024 20:01:20 +0100
Subject: [PATCH] updated feedback form

---
 FrontEnd/src/components/Contact/Contact.jsx   | 178 +---------
 .../src/components/Contact/Contact.module.css | 332 +-----------------
 .../components/Contact/ContactFormContent.jsx | 206 +++++++++++
 .../Contact/ContactFormContent.module.css     | 228 ++++++++++++
 .../src/pages/CustomThemes/customTheme.js     |   1 +
 5 files changed, 462 insertions(+), 483 deletions(-)
 create mode 100644 FrontEnd/src/components/Contact/ContactFormContent.jsx
 create mode 100644 FrontEnd/src/components/Contact/ContactFormContent.module.css

diff --git a/FrontEnd/src/components/Contact/Contact.jsx b/FrontEnd/src/components/Contact/Contact.jsx
index 697e4d92b..f057ccd7c 100644
--- a/FrontEnd/src/components/Contact/Contact.jsx
+++ b/FrontEnd/src/components/Contact/Contact.jsx
@@ -1,28 +1,13 @@
 import { useState, useEffect, useRef } from 'react';
-import { useForm, Controller } from 'react-hook-form';
-import { Link } from 'react-router-dom';
-import axios from 'axios';
-import { Spin, Select, Space } from 'antd';
-
-import {
-    EMAIL_PATTERN,
-    MESSAGE_PATTERN
-} from '../../constants/constants';
-
+import { Spin } from 'antd';
 
+import SignUpComponentsPageLayout from '../../pages/SignUp/SignUp/SignUpComponentsPageLayout';
+import { ContactFormContent } from './ContactFormContent';
 import styles from './Contact.module.css';
 
-const CATEGORY_OPTIONS = [
-    { value: 'Технічне питання', label: 'Технічне питання' },
-    { value: 'Рекомендації', label: 'Рекомендації' },
-    { value: 'Питання', label: 'Питання' },
-    { value: 'Інше', label: 'Інше' },
-];
-
 const Contact = () => {
-    const [loading, setLoading] = useState(false);
-    const [modalMessage, setModalMessage] = useState('');
     const [percent, setPercent] = useState(-50);
+    const [isLoading, setIsLoading] = useState(false);
     const timerRef = useRef();
 
     useEffect(() => {
@@ -35,149 +20,24 @@ const Contact = () => {
         return () => clearTimeout(timerRef.current);
     }, [percent]);
 
-    const {
-        register,
-        handleSubmit,
-        reset,
-        control,
-        formState: { errors },
-      } = useForm({
-        mode: 'all',
-        defaultValues: {
-            'message': '',
-            'email': '',
-            },
-      });
-
-    const onSubmit = async (value) => {
-        setLoading(true);
-        try {
-            const response = await axios.post(`${process.env.REACT_APP_BASE_API_URL}/api/admin/feedback/`, {
-                email: value.email,
-                message: value.message,
-                category: value.category,
-            });
-
-            if (response.status === 200 || response.status === 201) {
-                setModalMessage('Повідомлення успішно надіслано!');
-                reset();
-            }
-        } catch (error) {
-            setModalMessage('Щось пішло не так! Будь ласка, спробуйте ще раз!');
-        } finally {
-            setLoading(false);
-        }
-    };
-    const closeModal = () => {
-        setModalMessage('');
+    const handleLoading = (loadingState) => {
+        setIsLoading(loadingState);
     };
 
     return (
-        <div className={styles['contact_container']}>
-            <div className={styles['contact__text_container']}>
-                <h2 className={styles['contact__title']}>Зворотній зв&apos;язок</h2>
-                <h4 className={styles['contact__info']}><a className={styles['contact__red__star']}>*</a> Обов&apos;язкові поля позначені зірочкою</h4>
-                <form onSubmit={handleSubmit(onSubmit)} noValidate>
-                  <div className={styles['contact__form']}>
-                    <div className={styles['contact__field']}>
-                        <label className={styles['contact__label']} htmlFor="email"><a className={styles['contact__red__star']}>*</a>   Електронна пошта:</label>
-                        <input className={styles['contact__input']}
-                            id="email"
-                            type="email"
-                            placeholder="Введіть свою електронну пошту"
-                            {...register('email', {
-                                required: 'Обов’язкове поле',
-                                pattern: {
-                                    value: EMAIL_PATTERN,
-                                    message: 'Електронна пошта не відповідає вимогам',
-                                }
-                            })}
-                        />
-                        {errors.email && <p className={styles['contact__error']}>{errors.email.message}</p>}
-                    </div>
-                    <div className={styles['contact__field']}>
-                        <label className={styles['contact__label']} htmlFor="message"><a className={styles['contact__red__star']}>*</a> Категорія:</label>
-                        <Controller
-                            name="category"
-                            control={control}
-                            rules={{
-                                required: 'Будь ласка, оберіть тип повідомлення',
-                            }}
-                            render={({ field, fieldState: { error } }) =>
-                                <Space direction="vertical" style={{ width: '100%', gap: '0px', }}>
-                                  <Select
-                                      placeholder="Оберіть"
-                                      {...field}
-                                      style={{
-                                          width: '100%',
-                                          padding: 0,
-                                      }}
-                                      dropdownStyle={{
-                                          width: 257,
-                                          paddingLeft: 0,
-                                          paddingRight: 0,
-                                          borderRadius: '2px',
-                                      }}
-                                      variant="borderless"
-                                      className={styles['contact__select']}
-                                      options={CATEGORY_OPTIONS}
-                                      onChange={(value) => field.onChange(value)}
-                                  />
-                                    {error && <p className={styles['contact__error']}>{error.message}</p>}
-                                </Space>
-                            }
-                        />
-                    </div>
-                    <div className={`${styles['contact__field_textarea']}`}>
-                        <label className={styles['contact__label']} htmlFor="message"><a className={styles['contact__red__star']}>*</a> Повідомлення:</label>
-                        <textarea
-                            id="message"
-                            className={styles['contact__textarea']}
-                            placeholder="Введіть ваше повідомлення"
-                            {...register('message', {
-                                required: 'Обов’язкове поле',
-                                pattern: {
-                                    value: MESSAGE_PATTERN,
-                                    message: 'Повідомлення не може бути коротшим за 10 символів',
-                                }
-                            })}
-                            spellCheck={false}
-                            />
-                        {errors.message && <p className={styles['contact__error']}>{errors.message.message}</p>}
-                    </div>
-                    </div>
-                    <div className={styles['contact__button_container']}>
-                      <button type="submit" className={styles['contact__button_send']}>
-                        {loading ? <Spin percent={percent}/> : 'Надіслати'}
-                      </button>
-                </div>
-                </form>
-
-            </div>
-            {modalMessage && (
-                <div className={styles['modal_feedback']}>
-                    <div className={styles['modal_feedback_content']}>
-                  <button
-                    className={styles['modal_feedback_close']}
-                    onClick={closeModal}
-                    aria-label="Закрити модальне вікно"
-                  >
-                    <img src={`${process.env.REACT_APP_PUBLIC_URL}/svg/cross-btn.svg`} alt="Close button" />
-                  </button>
-
-                        <h2 className={styles['modal_feedback__title']}>{modalMessage}</h2>
-                        <h2 className={styles['modal_feedback__info']}>Ваше повідомлення буде опрацьовано</h2>
-                       <div className={styles['contact__button_modal_container']}>
-                        <Link to="/">
-                            <button type="button" className={styles['contact__button_modal_send']}>
-                                На головну
-                            </button>
-                        </Link>
-                       </div>
-                    </div>
-                </div>
-            )}
-        </div>
+        <SignUpComponentsPageLayout
+            header={'Зворотній зв\'язок'}
+            content={<ContactFormContent onLoading={handleLoading}/>}
+            footer={
+                <button
+                    form="contactForm"
+                    className={styles['contact__button_send']}
+                    type="submit"
+                >
+                {isLoading ? <Spin percent={percent}/> : 'Надіслати'}
+              </button>
+            }
+        />
     );
 };
 
diff --git a/FrontEnd/src/components/Contact/Contact.module.css b/FrontEnd/src/components/Contact/Contact.module.css
index 3a61fcec8..8c9b99eb8 100644
--- a/FrontEnd/src/components/Contact/Contact.module.css
+++ b/FrontEnd/src/components/Contact/Contact.module.css
@@ -1,334 +1,18 @@
-.contact_container {
-    background-color: #f9f5ec;
-    font-family: var(--font-main);
-    font-size: 16px;
-    font-weight: 600;
-    line-height: 20px;
-    letter-spacing: -0.01em;
-    text-align: left;
-    text-underline-position: from-font;
-    text-decoration-skip-ink: none;
-    width: 375px;
-    height: 659px;
-    gap: var(--margintop-bottom2);
-    opacity: 0px;
-    display: flex;
-    align-items: center;
-
-}
-
-.contact__text_container {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    width: 375px;
-    height: 499px;
-    background-color: #FFFFFF;
-    min-width: 345px;
-    max-width: 572px;
-    gap: 24px;
-}
-
-.contact__form {
-  width: 327px;
-  height: 317px;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  gap: 24px;
-  opacity: 0px;
-
-}
-
-.contact__title {
-    width: 327px;
-    height: 52px;
-    padding: 16px 24px;
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    gap: 36px;
-    opacity: 0px;
-    box-shadow: 0px -1px 0px 0px #F0F0F0 inset;
-    font-size: 16px;
-    font-weight: 600;
-    line-height: 20px;
-    letter-spacing: -0.01em;
-    text-align: left;
-    text-underline-position: from-font;
-    text-decoration-skip-ink: none;
-}
-
-.contact__info{
-    font-family: var(--font-main);
-    font-size: 14px;
-    font-weight: 400;
-    width: 327px;
-    line-height: 20px;
-    letter: -1%;
-    padding: 0px 24px;
-}
-
-.contact__button_container {
-    width: 327px;
-    height: 60px;
-    padding: 10px 24px;
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    gap: 8px;
-    opacity: 0px;
-    box-shadow: 0px 1px 0px 0px #F0F0F0 inset;
-}
-
-.text_content {
-    font-family: var(--font-main);
-    font-size: 14px;
-    font-weight: 375;
-    line-height: 22px;
-}
-
-.contact__field {
-    width: 327px;
-    height: 67px;
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    gap: 4px;
-    opacity: 0px;
-    padding: 0px 24px;
-}
-
-.contact__field_textarea {
-    width: 327px;
-    height: 112px;
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    gap: 4px;
-    opacity: 0px;
-    padding: 0px 24px;
-
-}
-
-.contact__label {
-    width: 327px;
-    height: 22px;
-    gap: 4px;
-    opacity: 0px;
-    angle: 0 deg;
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 22px;
-    letter-spacing: -0.01em;
-    text-align: left;
-    text-underline-position: from-font;
-    text-decoration-skip-ink: none;
-}
-
-.contact__input {
-    width: 309px;
-    height: 41px;
-    padding: 9px 6px 8px 12px;
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    gap: 0px;
-    border-radius: 2px 0px 0px 0px;
-    border: 1px 0px 0px 0px;
-    opacity: 0px;
-    border: 1px solid #D9D9D9
-}
-
-.contact__select {
-    width: 309px;
-    height: 41px;
-    padding: 9px 6px 8px 12px;
-    gap: 0px;
-    border-radius: 2px 0px 0px 0px;
-    border: 1px 0px 0px 0px;
-    opacity: 0px;
-    border: 1px solid #D9D9D9
-}
-
-.contact__textarea {
-    width: 309px;
-    height: 86px;
-    gap: 0px;
-    border-radius: 2px 0px 0px 0px;
-    border: 1px 0px 0px 0px;
-    opacity: 0px;
-    border: 1px solid #D9D9D9;
-    padding: 9px 6px 8px 12px;
-}
-
-.contact__input::placeholder,
-.contact__textarea::placeholder {
-    color: #adb3b9;
-    font-family: var(--font-main);
-    font-size: 14px;
-    line-height: 20px;
-    letter-spacing: -0.14px;
-}
-
-.contact__input:focus,
-.contact__textarea:focus,
-.contact__select:focus {
-    border: 1px solid var(--border-color);
-}
-
 .contact__button_send {
-    width: 114px;
-    height: 40px;
-    background-color: black;
-    color: white;
-    cursor: pointer;
-    transition: background-color 0.3s;
-    padding: 9px 16px 9px 16px;
+    min-width: 114px;
+    padding: 9px 16px;
     border-radius: 4px;
-    opacity: 0px;
-    font-size: 16px;
-    font-weight: 600;
-    line-height: 20px;
-    letter-spacing: -0.01em;
-    text-align: center;
-    text-underline-position: from-font;
-    text-decoration-skip-ink: none;
-}
-
-.contact__error {
-    display: flex;
-    align-items: flex-start;
-    align-self: stretch;
-    color: var(--red-red-100, #f34444);
-    font-family: var(--font-messages);
-    font-size: 12px;
-    line-height: 16px;
-}
-
-.modal_feedback {
-    position: absolute;
-    top: -200px;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: rgba(0, 0, 0, 0.5);
-    z-index: 1000;
-    gap: 10px;
-    opacity: 0px;
-
-}
-
-.modal_feedback_content {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    position: relative;
-    background-color: #FFFFFF;
-    width: 345px;
-    height: 180px;
-    min-width: 345px;
-    max-width: 572px;
-    gap: 24px;
-    border-radius: 6px;
-    opacity: 0px;
-
-}
-
-.modal_feedback_close {
-    position: absolute;
-    top: 16px;
-    right: 16px;
-    background: transparent;
-    border: none;
-    cursor: pointer;
-}
+    background: #000000;
 
-.contact__button_modal_container {
-    width: 297px;
-    height: 58px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    padding: 10px 24px 10px 24px;
-    gap: 8px;
-    opacity: 0px;
-    background: #FFFFFF;
-    box-shadow: 0px 1px 0px 0px #F0F0F0 inset;
-    border-radius: 6px;
-    box-shadow: 0px 1px 0px 0px #F0F0F0 inset;
-}
+    color: var(--light-button-text-color);
+    text-align: center;
+    font-feature-settings: "calt" off;
 
-.modal_feedback__title {
-    width: 297px;
-    height: 52px;
-    padding: 16px 24px 16px 24px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    gap: 36px;
-    opacity: 0px;
-    box-shadow: 0px -1px 0px 0px #F0F0F0 inset;
     font-family: var(--font-main);
     font-size: 16px;
     font-weight: 600;
     line-height: 20px;
-    letter-spacing: -0.01em;
-    text-align: left;
-    text-underline-position: from-font;
-    text-decoration-skip-ink: none;
-    color: #000000D9;
-
-   }
-
-.modal_feedback__info {
-    width: 345px;
-    height: 70px;
-    padding: 0px 24px 0px 24px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    gap: 10px;
-    opacity: 0px;
-    font-family: var(--font-main);
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 22px;
-    letter-spacing: -0.01em;
-    text-align: left;
-    text-underline-position: from-font;
-    text-decoration-skip-ink: none;
-    color: #292E32;
-}
-
-.modal_feedback_close img {
-    width: 16px;
-    height: 16px;
-}
+    letter-spacing: -0.16px;
 
-.contact__red__star {
-    color: red;
-}
-
-.contact__button_modal_send {
-    width: 122px;
-    height: 38px;
-    padding: 9px 16px 9px 16px;
-    border-radius: 4px;
-    gap: 4px;
-    opacity: 0px;
-    background: #000000;
-    color: #FFFFFF;
-    font-family: sans-serif;
-    font-size: 16px;
-    font-weight: 600;
-    line-height: 20px;
-    letter-spacing: -1%;
-    text-align: center;
-    text-underline-position: from-font;
-    text-decoration-skip-ink: none;
+    cursor: pointer;
 }
-
diff --git a/FrontEnd/src/components/Contact/ContactFormContent.jsx b/FrontEnd/src/components/Contact/ContactFormContent.jsx
new file mode 100644
index 000000000..bc7ce9aba
--- /dev/null
+++ b/FrontEnd/src/components/Contact/ContactFormContent.jsx
@@ -0,0 +1,206 @@
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { useForm, Controller } from 'react-hook-form';
+import axios from 'axios';
+import { Select, Space } from 'antd';
+
+import {
+    EMAIL_PATTERN,
+    MESSAGE_PATTERN
+} from '../../constants/constants';
+
+import MyModal from '../../pages/ProfilePage/UI/MyModal/MyModal';
+import styles from './ContactFormContent.module.css';
+
+const CATEGORY_OPTIONS = [
+    { value: 'Технічне питання', label: 'Технічне питання' },
+    { value: 'Рекомендації', label: 'Рекомендації' },
+    { value: 'Питання', label: 'Питання' },
+    { value: 'Інше', label: 'Інше' },
+];
+
+export function ContactFormContent ({ onLoading }) {
+    const [modal, setModal] = useState(false);
+    const [modalMessage, setModalMessage] = useState('');
+
+    const {
+        register,
+        handleSubmit,
+        reset,
+        control,
+        formState: { errors },
+      } = useForm({
+        mode: 'all',
+        defaultValues: {
+            'message': '',
+            'email': '',
+            },
+      });
+
+    const onSubmit = async (value) => {
+        onLoading(true);
+        try {
+            const response = await axios.post(`${process.env.REACT_APP_BASE_API_URL}/api/admin/feedback/`, {
+                email: value.email,
+                message: value.message,
+                category: value.category,
+            });
+
+            if (response.status === 200 || response.status === 201) {
+                setModalMessage('Повідомлення успішно надіслано!');
+                setModal(true);
+                reset();
+            }
+        } catch (error) {
+            setModalMessage('Щось пішло не так! Будь ласка, спробуйте ще раз!');
+            setModal(true);
+        } finally {
+            onLoading(false);
+        }
+    };
+
+    const closeModal = () => {
+        setModalMessage('');
+        setModal(false);
+    };
+
+    return (
+        <div className={styles['contact-form']}>
+            <div className={styles['contact-form__label']}>
+                <label className={styles['contact-form__label--required']}
+                >
+                 *
+                </label>
+                <label className={styles['contact-form__label--text']}>
+                    Обов&apos;язкові поля позначені зірочкою</label>
+                </div>
+            <form
+                id="contactForm"
+                className={styles['contact-form__container']}
+                onSubmit={handleSubmit(onSubmit)}
+                noValidate
+            >
+                <div className={styles['contact__field']}>
+                    <div className={styles['contact-form__label']}>
+                        <label className={styles['contact-form__label--required']}
+                        >
+                        *
+                        </label>
+                        <label className={styles['contact-form__label--text']}>
+                            Електронна пошта:
+                        </label>
+                    </div>
+                    <div className={styles['contact-form__field']}>
+                        <input className={styles['contact__input']}
+                            id="email"
+                            type="email"
+                            placeholder="Введіть свою електронну пошту"
+                            {...register('email', {
+                                required: 'Обов’язкове поле',
+                                pattern: {
+                                    value: EMAIL_PATTERN,
+                                    message: 'Електронна пошта не відповідає вимогам',
+                                }
+                            })}
+                        />
+                     </div>
+                    <div className={styles['contact-form__error']}>
+                        {errors.email && errors.email.message}
+                    </div>
+                </div>
+                <div className={styles['contact__field']}>
+                    <div className={styles['contact-form__label']}>
+                        <label className={styles['contact-form__label--required']}
+                        >
+                        *
+                        </label>
+                        <label className={styles['contact-form__label--text']}>
+                        Категорія:
+                        </label>
+                    </div>
+                    <Controller
+                        name="category"
+                        control={control}
+                        rules={{
+                            required: 'Будь ласка, оберіть тип повідомлення',
+                        }}
+                        render={({ field, fieldState: { error } }) =>
+                            <Space direction="vertical" style={{ width: '100%', gap: '0px', }}>
+                                <Select
+                                    placeholder="Оберіть"
+                                    {...field}
+                                    style={{
+                                        width: '100%',
+                                        padding: 0,
+                                    }}
+                                    dropdownStyle={{
+                                        width: 257,
+                                        paddingLeft: 0,
+                                        paddingRight: 0,
+                                        borderRadius: '2px',
+                                    }}
+                                    variant="borderless"
+                                    className={styles['contact__select']}
+                                    options={CATEGORY_OPTIONS}
+                                    onChange={(value) => field.onChange(value)}
+                                />
+                                <div className={styles['contact-form__error']}>
+                                    {error && error.message}
+                                </div>
+                            </Space>
+                        }
+                    />
+                </div>
+                <div className={`${styles['contact__field']}`}>
+                    <div className={styles['contact-form__label']}>
+                        <label className={styles['contact-form__label--required']}
+                        >
+                            *
+                        </label>
+                        <label className={styles['contact-form__label--text']}>
+                            Повідомлення:
+                        </label>
+                    </div>
+                    <div className={styles['contact-form__field']}>
+                        <textarea
+                            id="message"
+                            className={styles['contact__textarea']}
+                            placeholder="Введіть ваше повідомлення"
+                            {...register('message', {
+                                required: 'Обов’язкове поле',
+                                pattern: {
+                                    value: MESSAGE_PATTERN,
+                                    message: 'Повідомлення не може бути коротшим за 10 символів',
+                                }
+                            })}
+                            spellCheck={false}
+                            />
+                    </div>
+                    <div className={styles['contact-form__error']}>
+                        {errors.message && errors.message.message}
+                    </div>
+                </div>
+            </form>
+        <MyModal visible={modal}>
+                <div className={styles['modal_feedback_content']}>
+                    <button
+                        className={styles['modal_feedback_close']}
+                        onClick={closeModal}
+                        aria-label="Закрити модальне вікно"
+                    >
+                        <img src={`${process.env.REACT_APP_PUBLIC_URL}/svg/cross-btn.svg`} alt="Close button" />
+                    </button>
+                    <h2 className={styles['modal_feedback__title']}>{modalMessage}</h2>
+                    <h2 className={styles['modal_feedback__info']}>Ваше повідомлення буде опрацьовано</h2>
+                    <div className={styles['contact__button_modal_container']}>
+                        <Link to="/">
+                            <button type="button" className={styles['contact__button_send']}>
+                                На головну
+                            </button>
+                        </Link>
+                    </div>
+                </div>
+        </MyModal>
+    </div>
+    );
+}
\ No newline at end of file
diff --git a/FrontEnd/src/components/Contact/ContactFormContent.module.css b/FrontEnd/src/components/Contact/ContactFormContent.module.css
new file mode 100644
index 000000000..f477b7b9c
--- /dev/null
+++ b/FrontEnd/src/components/Contact/ContactFormContent.module.css
@@ -0,0 +1,228 @@
+.contact-form {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 24px;
+    align-self: stretch;
+}
+
+.contact__field {
+    display: flex;
+    padding-bottom: 0px;
+    flex-direction: column;
+    align-items: flex-start;
+    width: 100%;
+}
+
+.contact-form__field {
+    display: flex;
+    align-items: center;
+    align-self: stretch;
+    border-radius: 2px;
+    background: var(--main-white, #fff);
+}
+
+.contact-form__label {
+    display: flex;
+    gap: 4px;
+    align-self: stretch;
+    color: var(--main-text-color);
+    font-feature-settings: "calt" off;
+    font-family: var(--font-main);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+    letter-spacing: -0.14px;
+    text-align: left;
+}
+
+.contact-form__label--required {
+    color: var(--dust-red-5, #ff4d4f);
+    text-align: right;
+    font-family: var(--font-messages);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22.001px;
+}
+
+.contact-form__label--text {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    flex: 1 0 0;
+}
+
+.contact-form__container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    align-self: stretch;
+    gap: 24px;
+    width: 100%;
+}
+
+.contact__input {
+    display: flex;
+    height: 22px;
+    padding: 9px 12px;
+    align-items: center;
+    gap: 4px;
+    flex: 1 0 0;
+    border-radius: 2px;
+    border: 1px solid var(--neutral-5, #d9d9d9);
+    background: var(--main-white, #fff);
+    color: var(--character-title-85, rgba(0, 0, 0, 0.85));
+
+    font-family: var(--font-main);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+}
+
+.contact-form__error {
+    display: flex;
+    padding: 1px 0px;
+    align-items: flex-start;
+    gap: 10px;
+    align-self: stretch;
+    color: var(--error-text-color);
+    font-family: var(--font-main);
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 16px;
+}
+
+.contact__select {
+    width: 309px;
+    height: 41px;
+    padding: 9px 6px 8px 12px;
+    gap: 0px;
+    border-radius: 2px 0px 0px 0px;
+    border: 1px 0px 0px 0px;
+    opacity: 0px;
+    border: 1px solid #D9D9D9
+}
+
+.contact__textarea {
+    width: 100%;
+    height: 86px;
+    border-radius: 2px 0px 0px 0px;
+    border: 1px solid #D9D9D9;
+    padding: 9px 6px 8px 12px;
+}
+
+.contact__input::placeholder,
+.contact__textarea::placeholder {
+    color: #adb3b9;
+    font-family: var(--font-main);
+    font-size: 14px;
+    line-height: 20px;
+    letter-spacing: -0.14px;
+}
+
+.contact__input:focus,
+.contact__textarea:focus,
+.contact__select:focus {
+    outline: none;
+    border: 1px solid var(--border-color);
+}
+
+.contact__button_send {
+    min-width: 114px;
+    padding: 9px 16px;
+    border-radius: 4px;
+    background: #000000;
+
+    color: var(--light-button-text-color);
+    text-align: center;
+    font-feature-settings: "calt" off;
+
+    font-family: var(--font-main);
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 20px;
+    letter-spacing: -0.16px;
+
+    cursor: pointer;
+}
+
+.modal_feedback_content {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    position: relative;
+    background-color: #FFFFFF;
+    height: 180px;
+    min-width: 345px;
+    max-width: 572px;
+    gap: 24px;
+    border-radius: 6px;
+}
+
+.modal_feedback_close {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+}
+
+.modal_feedback_close img {
+    width: 16px;
+    height: 16px;
+}
+
+.contact__button_modal_container {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    padding: 10px 24px 10px 24px;
+    gap: 8px;
+    background: #FFFFFF;
+    box-shadow: 0px 1px 0px 0px #F0F0F0 inset;
+    border-radius: 6px;
+}
+
+.modal_feedback__title {
+    height: 52px;
+    padding: 16px 24px 16px 24px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    gap: 36px;
+    opacity: 0px;
+    box-shadow: 0px -1px 0px 0px #F0F0F0 inset;
+    font-family: var(--font-main);
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 20px;
+    letter-spacing: -0.16px;
+    text-align: left;
+    text-underline-position: from-font;
+    text-decoration-skip-ink: none;
+    color: #000000D9;
+
+}
+
+.modal_feedback__info {
+    height: 70px;
+    padding: 0px 24px 0px 24px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    gap: 10px;
+    font-family: var(--font-main);
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 22px;
+    letter-spacing: -0.01em;
+    text-align: left;
+    text-underline-position: from-font;
+    text-decoration-skip-ink: none;
+    color: #292E32;
+}
diff --git a/FrontEnd/src/pages/CustomThemes/customTheme.js b/FrontEnd/src/pages/CustomThemes/customTheme.js
index 66f10d9f5..26d32663d 100644
--- a/FrontEnd/src/pages/CustomThemes/customTheme.js
+++ b/FrontEnd/src/pages/CustomThemes/customTheme.js
@@ -53,6 +53,7 @@ const customTheme = {
       }
     },
     token: {
+      fontFamily: 'Geologica',
       screenXLMin: 1512, // for grid (row/col)
       screenXL: 1512, // for List
     }