fix ticket 9,13

package.json

@@ -31,6 +31,7 @@
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@mdxeditor/editor": "^2.20.7",
     "@popperjs/core": "^2.11.8",
     "@uiw/react-markdown-editor": "^5.12.1",
     "axios": "^1.6.8",

src/assets/styles/components/myButton.module.scss

@@ -4,9 +4,19 @@
         font-size: 15px;
         height: 100%;
         padding: .40em 1.2rem;
-        color: white;
-        background-color: rgb(150, 209, 158);
         border-radius: 5px;
         font-family: "Montserrat", sans-serif;
     }
+    &__green {
+        color: white;
+        background-color: rgb(150, 209, 158);
+    }
+    &__white {
+        color: black;
+        background-color: white;
+        border: 1px solid rgba(0, 0, 0, 0.2);
+        &:hover {
+            border: 1px solid rgba(0, 0, 0, 0.3);
+        }
+    }
 }

src/assets/styles/viewForm.module.scss

@@ -68,7 +68,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 10px 20px;
+    padding: 8px 20px;
     border: 2px solid rgb(220, 220, 220);
     border-top: none;
 }

src/components/MarkDown.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import MarkdownEditor from '@uiw/react-markdown-editor';
 import classes from "../assets/styles/components/markDown.module.scss"
+import '@mdxeditor/editor/style.css';
 
 const MarkDown = ({mkValue, setMkValue}) => {
     return (
@@ -12,7 +13,6 @@ const MarkDown = ({mkValue, setMkValue}) => {
                 visibleDragbar={false}
             />
         </div>
-        
     )
 }
 

src/components/MyButton.jsx

@@ -7,12 +7,13 @@ const MyButton = (props) => {
         <div className={classes.main}>
             <button 
                 type="button"
-                class={props.class} 
+                className={classes[props.class]} 
                 onClick={props.click}
                 data-bs-target={props.target}
                 data-bs-toggle={props.toggle}
                 data-bs-dismiss={props.dismiss}
-                style={{backgroundColor: props.backgroundColor, ...props.otherStyle}}>
+                style={{backgroundColor: props.backgroundColor, ...props.otherStyle}}
+                >
                     {props.text}
             </button>
         </div>

src/pages/EnterAccount.jsx

@@ -108,6 +108,7 @@ const EnterAccount = () => {
                             <div className={classes.content__wrapper__login__footer}>
                                 <MyButton 
                                     text={"Войти"} 
+                                    class={"main__green"}
                                     otherStyle={{height: "50%", width: "20%"}} 
                                     click={logInToAccount}
                                 />
@@ -139,6 +140,7 @@ const EnterAccount = () => {
                             <div className={classes.content__wrapper__register__footer}>
                                 <MyButton
                                     text={"Создать"}
+                                    class={"main__green"}
                                     otherStyle={{ height: "100%", width: "20%" }}
                                     click={() => createUser()}
                                 />

src/pages/Forms.jsx

@@ -91,7 +91,7 @@ const Forms = () => {
             <div className={classes.wrapper}>
                 <div className={classes.panel}>
                     {/* <MyInput placeholder={'Поиск...'}/> */}
-                    <MyButton click={createForm} otherStyle={{width: '200px'}} text={
+                    <MyButton click={createForm} class={"main__green"} otherStyle={{width: '200px'}} text={
                         stateLoading ? <div class="spinner-border text-light" role="status">
                             <span class="visually-hidden">Загрузка...</span>
                         </div> : 'Создать'

src/pages/Home.jsx

@@ -41,6 +41,7 @@ const Home = () => {
             <div className={classes.content__search__wrapper}>
               <MyButton
                 text={"Найти форму"}
+                class={"main__green"}
                 click={() => navigate(`/forms/${token}`)}
               />
             </div>

src/pages/NewForm.jsx

@@ -235,12 +235,13 @@ const NewForm = () => {
                         <MyButton 
                             text={<i class="fa-solid fa-floppy-disk"></i>} 
                             click={() => updateTitleForm()}
+                            class={"main__green"}
                             otherStyle={{paddingLeft: "0.9rem", paddingRight: "0.9rem"}}>
                         </MyButton>
                     </div>
                     <div className={classes.header__listBtn}>
-                        <MyButton text={'Предпросмотр'} backgroundColor={'rgb(225, 225, 225)'} toggle={"modal"} target={"#previewModal"}/>
+                        <MyButton text={'Предпросмотр'} class={"main__white"} toggle={"modal"} target={"#previewModal"}/>
-                        <MyButton text={'Опубликовать'} click={location.state ? updateFormByForms : saveForm}/>
+                        <MyButton text={'Опубликовать'} class={"main__green"} click={location.state ? updateFormByForms : saveForm}/>
                     </div>                   
                 </div>
                 <div className={classes.content}>

src/pages/ViewForm.jsx

@@ -5,8 +5,7 @@ import classes from "../assets/styles/viewForm.module.scss";
 import { FormsData, TypeAnswerData, answersData, UserData } from "../context";
 import GeneratingFormFields from "../components/GeneratingFormFields.jsx";
 import MyButton from "../components/MyButton.jsx";
-import { listFormBlockApi, listFormBlockByTokenApi, saveAnswersApi } from "../hooks/api/formApi.js";
+import { listFormBlockByTokenApi, saveAnswersApi } from "../hooks/api/formApi.js";
-import { listFormsApi } from "../hooks/api/listFormsApi.js";
 import { responseDataToListBlock } from "../hooks/sundry/parseListBlock.js";
 
 const ViewForm = () => {
@@ -19,21 +18,22 @@ const ViewForm = () => {
     const [cookies, setCookies, __] = useCookies(["user"]);
     const [questions, setQuestions] = useState([]);
     const [answers, setAnswers] = useState([]);
+    const [responseStatus, setResponseStatus] = useState(200);
 
     useEffect(() => {
         async function getForm() {
             const responseBlocks = await listFormBlockByTokenApi(cookies.token, formId);
 
-            if (responseBlocks.status === 200 && responseBlocks.data) {
+            if (responseBlocks.status === 200 && responseBlocks.data.blocks) {
                 const listBlocks = responseDataToListBlock(responseBlocks.data.blocks);
 
-                setQuestions(listBlocks)
+                setQuestions(listBlocks);
                 setAnswers(listBlocks.map(item => (
                     {id: item.id, answer: []}
-                )))
+                )));
             }
             else {
-                console.log(responseBlocks)
+                setResponseStatus(responseBlocks.status)
             }
         };
 
@@ -70,7 +70,7 @@ const ViewForm = () => {
 
     return (
         <div className={classes.main}>
-            {questions ? 
+            {questions.length ? 
             <div className={classes.wrapper}>
                 <div className={classes.form}>
                     <div className={classes.form__header}>
@@ -83,8 +83,8 @@ const ViewForm = () => {
                     </div>
                 </div>
                 <div className={classes.footer}>
-                    <MyButton text={"Отправить"} click={saveAnswers}/>
+                    <MyButton text={"Отправить"} class={"main__green"} click={saveAnswers}/>
-                    <MyButton text={"Отмена"} backgroundColor={"rgb(180, 180, 180)"} click={() => {
+                    <MyButton text={"Отмена"} class={"main__white"} click={() => {
                         setAnswers([]);
                         navigate("/");
                     }}/>
@@ -93,7 +93,11 @@ const ViewForm = () => {
             <div className={classes.wrapper}>
                 <div className={classes.form}>
                     <div className={classes.form__unexists}>
-                        <span>Форма с идентификатором #{formId} отсутствует.</span>
+                        <span>
+                            {responseStatus === 200 ? 
+                            `Форма с идентификатором #${formId} пустая.` : 
+                            `Форма с идентификатором #${formId} отсутствует.`}
+                        </span>
                     </div>
                 </div>                 
             </div>}