design update, bug fixes

src/assets/styles/adminPanel.module.scss

@@ -14,7 +14,9 @@
 .admin {
   width: 70%;
   height: 70%;
-    box-shadow: 0 0 5px 1px rgb(200, 200, 200);
+  background: #fff;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 16px;
   padding: 1.5%;
   position: relative;
   &__linkProfile {

src/assets/styles/answersForm.module.scss

@@ -20,16 +20,16 @@
   &__body {
     // margin-top: 100px;
     span {
-
     }
   }
 }
 
-
 .answers {
   width: 70%;
   height: 70%;
-    box-shadow: 0 0 5px 1px rgb(200, 200, 200);
+  background: #fff;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 16px;
   padding: 1.5%;
   &__linkAdmin {
     position: absolute;
@@ -111,7 +111,6 @@
             }
           }
           &__date {
-
           }
           i {
             font-size: 13px;
@@ -123,7 +122,6 @@
             }
           }
         }
-                
       }
     }
   }

src/assets/styles/app.module.scss

@@ -1,5 +1,9 @@
-@import url('./base.css');
+@import url("./base.css");
-@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
+
+body {
+  background: #9dccf6 !important;
+}
 
 .main {
   width: 100%;
@@ -12,10 +16,11 @@
 }
 
 .header {
-    background-color: rgb(240, 240, 240);
+  background-color: #fff;
   width: 100%;
-    height: 10%;
+  height: 50px;
-    box-shadow: 0 0 5px 1px rgb(210, 210, 210);
+  box-sizing: border-box;
+  //   box-shadow: 0 0 5px 1px rgb(210, 210, 210);
 }
 
 .content {

src/assets/styles/base.css

@@ -1,23 +1,36 @@
 * {
   padding: 0;
   margin: 0;
-    border: 0; }
+  border: 0;
+}
 
-*, *:before, *:after {
+*,
+*:before,
+*:after {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
-    box-sizing: border-box; }
+  box-sizing: border-box;
+}
 
-:focus, :active {
+:focus,
-    outline: none; }
+:active {
+  outline: none;
+}
 
-a:focus, a:active {
+a:focus,
-    outline: none; }
+a:active {
+  outline: none;
+}
 
-nav, footer, header, aside {
+nav,
-    display: block; }
+footer,
+header,
+aside {
+  display: block;
+}
 
-html, body {
+html,
+body {
   height: 100%;
   width: 100%;
   font-size: 100%;
@@ -25,33 +38,51 @@ html, body {
   font-size: 14px;
   -ms-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
-    -webkit-text-size-adjust: 100%; }
+  -webkit-text-size-adjust: 100%;
+}
 
-input, button, textarea {
+input,
-    font-family: inherit; }
+button,
+textarea {
+  font-family: inherit;
+}
 
 input::-ms-clear {
-    display: none; }
+  display: none;
+}
 
-  button {
+button {
-    cursor: pointer; }
+  cursor: pointer;
+}
 
-  button::-moz-focus-inner {
+button::-moz-focus-inner {
   padding: 0;
-    border: 0; }
+  border: 0;
+}
 
-  a, a:visited {
+a,
-    text-decoration: none; }
+a:visited {
+  text-decoration: none;
+}
 
-  a:hover {
+a:hover {
-    text-decoration: none; }
+  text-decoration: none;
+}
 
-  ul li {
+ul li {
-    list-style: none; }
+  list-style: none;
+}
 
-  img {
+img {
-    vertical-align: top; }
+  vertical-align: top;
+}
 
-  h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   font-size: inherit;
-    font-weight: 400; }
+  font-weight: 400;
+}

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

@@ -1,12 +1,15 @@
 .main {
-    // height: 100%;
   max-height: 40px;
   button {
     font-size: 15px;
     height: 100%;
-        padding: .40em 1.2rem;
+    padding: 0.4em 1.2rem;
     border-radius: 5px;
     font-family: "Montserrat", sans-serif;
+    transition: 0.2s;
+    &:hover {
+      filter: brightness(1.1);
+    }
   }
   &__red {
     color: white;
@@ -16,6 +19,10 @@
     color: white;
     background-color: rgb(150, 209, 158);
   }
+  &__blue {
+    color: white;
+    background-color: #1379c1;
+  }
   &__white {
     color: black;
     background-color: white;

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

@@ -1,12 +1,18 @@
 .main {
   max-height: 40px;
   input {
-        border: 1px solid rgb(180, 180, 180);
+    border: 1px solid rgba(0, 0, 0, 0.1);
     height: 100%;
     border-radius: 5px;
     font-family: "Montserrat", sans-serif;
-        padding: .40em 3px;
+    box-sizing: border-box;
+    padding: 8px 8px 8px 10px;
     color: rgb(40, 40, 40);
     font-size: 15px;
+    transition: 0.2s;
+    &:hover,
+    &:focus {
+      border: 1px solid rgba(0, 0, 0, 0.3);
+    }
   }
 }

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

@@ -19,13 +19,12 @@
     display: flex;
     align-items: center;
     span {
-            margin-left: 2%;
+      margin-left: 30px;
       display: block;
       font-size: 15px;
       color: rgb(80, 80, 80);
       cursor: pointer;
       &:hover {
-                color: rgb(66, 68, 189);
         text-decoration: underline;
       }
     }
@@ -33,8 +32,8 @@
 }
 
 .profile {
-    width: 20%;
   height: 100%;
+  margin-right: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -44,7 +43,6 @@
       color: rgb(80, 80, 80);
       cursor: pointer;
       &:hover {
-                color: rgb(66, 68, 189);
         text-decoration: underline;
       }
     }
@@ -56,10 +54,8 @@
       color: rgb(80, 80, 80);
       cursor: pointer;
       i {
-
       }
       &:hover {
-                color: rgb(66, 68, 189);
         text-decoration: underline;
       }
     }

src/assets/styles/enterAccount.module.scss

@@ -7,8 +7,7 @@
 }
 
 .wrapper {
-    width: 50%;
+  width: 500px;
-    height: 70%;
 }
 
 .tabs {
@@ -20,23 +19,31 @@
         text-align: center;
         font-family: "Montserrat", sans-serif;
         font-size: 12px;
+        color: #000;
+        &:hover {
+          color: #000;
+          border: 1px solid rgba(0, 0, 0, 0.1);
+          background: rgba(255, 255, 255, 0.3);
+        }
       }
     }
   }
 }
 
 .content {
-    width: 100%;
+  width: 500px;
-    height: 100%;
+  min-height: 320px;
-    border: 1px solid rgb(220, 220, 220);
+  box-sizing: border-box;
-    border-top: none;
+  padding: 35px 25px;
+  background: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-top: 0;
+  border-radius: 0 0 16px 16px;
   &__wrapper {
-        padding: 2%;
-        width: 100%;
-        height: 100%;
     &__login {
-            width: 100%;
+      display: flex;
-            height: 100%;
+      flex-direction: column;
+      gap: 15px;
       &__header {
         width: 100%;
         height: 30%;
@@ -46,6 +53,7 @@
         h3 {
           display: block;
           font-size: 25px;
+          margin: 0;
           font-family: "Montserrat", sans-serif;
           text-align: center;
           color: rgb(100, 100, 100);
@@ -53,10 +61,10 @@
       }
       &__body {
         width: 100%;
-                height: 50%;
         display: flex;
         justify-content: space-around;
         flex-direction: column;
+        gap: 15px;
         position: relative;
         &__error {
           position: absolute;
@@ -68,13 +76,17 @@
         }
       }
       &__footer {
+        div,
+        button {
           width: 100%;
-                height: 20%;
+          height: 40px;
+        }
       }
     }
     &__register {
-            width: 100%;
+      display: flex;
-            height: 100%;
+      flex-direction: column;
+      gap: 15px;
       &__header {
         width: 100%;
         height: 15%;
@@ -84,17 +96,18 @@
         h3 {
           display: block;
           font-size: 25px;
+          margin: 0;
+          text-align: center;
           font-family: "Montserrat", sans-serif;
           color: rgb(100, 100, 100);
         }
       }
       &__body {
         width: 100%;
-                height: 75%;
         display: flex;
         justify-content: space-around;
         flex-direction: column;
-                padding-bottom: 5px;
+        gap: 15px;
         position: relative;
         &__error {
           position: absolute;
@@ -111,8 +124,11 @@
         }
       }
       &__footer {
+        div,
+        button {
           width: 100%;
-                height: 10%;
+          height: 40px;
+        }
       }
     }
   }

src/assets/styles/forms.module.scss

@@ -1,66 +1,66 @@
 .main {
   width: 100%;
-    height: 100%;
+  min-height: 100%;
   padding: 4% 8%;
 }
 
 .wrapper {
   width: 100%;
-    height: 100%;
+  min-height: 100%;
 }
 
 .panel {
   width: 100%;
-    height: 10%;
   display: flex;
   justify-content: space-between;
   align-items: end;
-    padding: 0 5%;
+  margin-bottom: 25px;
+  gap: 15px;
+  div:first-child {
+    flex-grow: 1;
+    input {
+      width: 100%;
+    }
+  }
 }
 
 .listForms {
-    box-shadow: 0 0 5px 1px rgb(200, 200, 200);
+  border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 5px;
+  background: #fff;
-    margin-top: 5%;
+  border-radius: 16px;
   height: 70%;
+  min-height: 700px;
+  margin-bottom: 50px;
   width: 100%;
   &__columns {
     display: flex;
     justify-content: start;
     align-items: center;
-        padding: 0 2%;
+    padding: 20px 25px;
-        height: 15%;
-        width: 100%;
     border-bottom: 1px solid rgb(220, 220, 220);
     &__item {
       font-size: 15px;
       font-family: "Montserrat", sans-serif;
+      font-weight: bold;
     }
   }
   &__forms {
-        width: 100%;
+    min-height: 100%;
-        height: 85%;
+    display: inline;
     overflow-y: auto;
-        &::-webkit-scrollbar {
-            width: 7px;
-        }
-        &::-webkit-scrollbar-thumb {
-            background-color: rgb(200, 200, 200);
-        }
     &__item {
       display: flex;
       justify-content: start;
       align-items: center;
-            padding: 0 2%;
-            height: 25%;
       width: 100%;
+      padding: 20px 25px;
       font-family: "Montserrat", sans-serif;
       position: relative;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
       &:hover {
         background-color: rgba(240, 240, 240, 0.8);
       }
       &__title {
-                // width: 33.3%;
         text-align: center;
         cursor: pointer;
         &:hover {

src/assets/styles/home.module.scss

@@ -13,56 +13,71 @@
 }
 
 .header {
-    width: 60%;
-    height: 30%;
   text-align: center;
   &__top {
-        font-size: 30px;
+    font-size: 24px;
     font-family: "Montserrat", sans-serif;
-        color: rgb(100, 100, 100);
+    font-weight: bold;
+    color: #000;
   }
   &__bottom {
-        font-size: 30px;
+    margin-top: 25px;
+    font-size: 24px;
     font-family: "Montserrat", sans-serif;
-        color: rgb(100, 100, 100);
+    font-weight: bold;
+    color: #000;
   }
 }
 
 .content {
-    width: 60%;
+  width: 500px;
-    height: 50%;
+  margin-top: 50px;
-    box-shadow: 0 0 5px 1px rgb(180, 180, 180);
+  box-sizing: border-box;
-    padding: 1% 0;
+  padding: 35px 25px;
+  background: #fff;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
   &__title {
-        height: 30%;
     display: flex;
     justify-content: center;
     align-items: center;
     &__wrapper {
       h3 {
-                font-size: 35px;
+        font-size: 24px;
         font-family: "Montserrat", sans-serif;
-                color: rgb(100, 100, 100);
+        color: #000;
+        font-weight: normal;
+        margin: 0;
       }
     }
   }
   &__token {
-        height: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     &__wrapper {
-            height: 35%;
+      height: 40px;
-            width: 80%;
+      width: 100%;
+      input {
+        height: 40px;
+      }
+      input::placeholder {
+        color: rgba(0, 0, 0, 0.25);
+      }
     }
   }
   &__search {
-        height: 20%;
+    height: 40px;
     display: flex;
     justify-content: center;
     align-items: center;
-        &__wrapper {
+    div,
-            height: 70%;
+    button {
+      width: 100%;
+      height: 40px;
     }
   }
 }

src/assets/styles/newForm.module.scss

@@ -13,56 +13,53 @@
   display: flex;
   justify-content: space-between;
   width: 100%;
-    height: 8%;
+  margin-bottom: 25px;
   &__listInput {
-        width: 40%;
-        height: 100%;
     display: flex;
-        justify-content: space-between;
     align-items: center;
+    gap: 15px;
     &__date {
       width: 100%;
-            height: 100%;
       display: flex;
       justify-content: space-between;
       position: relative;
       span {
         position: absolute;
-                font-size: 8px;
+        font-size: 15px;
         font-family: "Montserrat", sans-serif;
-                top: -40%;
+        top: -25px;
-                left: 2%;
+        left: 0;
       }
     }
     &__title {
       width: 100%;
-            height: 100%;
       display: flex;
       justify-content: space-between;
       position: relative;
       span {
         position: absolute;
-                font-size: 8px;
+        font-size: 15px;
         font-family: "Montserrat", sans-serif;
-                top: -40%;
+        top: -25px;
-                left: 2%;
+        left: 0;
       }
     }
   }
   &__listBtn {
     display: flex;
-        justify-content: space-between;
+    gap: 15px;
-
-        width: 30%;
   }
 }
 
 .content {
-    margin-top: 3%;
-    height: 85%;
   width: 100%;
+  height: calc(90% - 100px);
+  background: #fff;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 16px;
   display: flex;
   justify-content: space-between;
+  margin-bottom: 50px;
   &__listQuestion {
     height: 100%;
     width: 25%;
@@ -70,13 +67,14 @@
       height: 100%;
       width: 100%;
       &__item {
-                height: 12.5%;
+        padding: 15px 10px;
         width: 100%;
         display: flex;
         align-items: center;
-                padding: 0 5px;
         cursor: pointer;
-
+        &:first-child {
+          border-radius: 16px 0 0 0;
+        }
         &:hover {
           background-color: rgba(230, 230, 230, 0.6);
         }
@@ -93,7 +91,7 @@
   }
   &__newForm {
     box-shadow: 0 0 5px 1px rgb(220, 220, 220);
-        height: 100%;
+    min-height: 100%;
     width: 75%;
     &__title {
       padding: 1%;
@@ -120,7 +118,6 @@
       &__item {
         padding: 1%;
         width: 100%;
-                min-height: 25%;
         border-bottom: 1px solid rgb(220, 220, 220);
         display: flex;
         justify-content: space-between;

src/assets/styles/profile.module.scss

@@ -14,7 +14,9 @@
 .profile {
   width: 70%;
   height: 70%;
-    box-shadow: 0 0 5px 1px rgb(200, 200, 200);
+  background: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 16px;
   padding: 1.5%;
   position: relative;
   &__linkAdmin {
@@ -42,10 +44,9 @@
       margin-bottom: 10px;
       &__btn {
         height: 100%;
-                width: 35%;
         display: flex;
-                justify-content: space-between;
         align-items: center;
+        gap: 15px;
       }
       h3 {
         font-size: 25px;

src/assets/styles/tokensForm.module.scss

@@ -20,16 +20,16 @@
   &__body {
     // margin-top: 100px;
     span {
-
     }
   }
 }
 
-
 .answers {
   width: 70%;
   height: 70%;
-    box-shadow: 0 0 5px 1px rgb(200, 200, 200);
+  background: #fff;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 16px;
   padding: 1.5%;
   &__linkAdmin {
     position: absolute;
@@ -65,7 +65,6 @@
         color: rgb(100, 100, 100);
         display: block;
       }
-
     }
     &__body {
       width: 100%;
@@ -117,7 +116,6 @@
             }
           }
           &__token {
-
           }
         }
         &__btn {

src/assets/styles/viewForm.module.scss

@@ -16,7 +16,9 @@
   overflow-y: auto;
   width: 70%;
   height: 80%;
-    border: 2px solid rgb(220, 220, 220);
+  background: #fff;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 16px 16px 0 0;
   &::-webkit-scrollbar {
     width: 7px;
     border-left: 1px solid rgb(200, 200, 200);
@@ -39,7 +41,6 @@
       color: rgb(100, 100, 100);
     }
     &__id {
-
     }
   }
   &__content {
@@ -63,12 +64,14 @@
 }
 
 .footer {
+  background: #fff;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 0 0 16px 16px;
   width: 70%;
   height: 10%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 8px 20px;
-    border: 2px solid rgb(220, 220, 220);
   border-top: none;
 }

src/pages/EnterAccount.jsx

@@ -23,7 +23,7 @@ const EnterAccount = () => {
   const [password, setPassword] = useState("");
   const [repiedPassword, setRepiedPassword] = useState("");
 
-    const {user, setUser} = useContext(UserData);
+  const { user, setUser } = useContext(UserData);
   const [cookies, setCookie, removeCookie] = useCookies(["user"]);
 
   const [loginError, setLoginError] = useState(false);
@@ -52,29 +52,27 @@ const EnterAccount = () => {
     });
 
     if (response.status === 200) {
-            const responseMe = await verifyUserApi(response.data.token)
+      const responseMe = await verifyUserApi(response.data.token);
       setUser(responseMe.data);
       setCookie("token", response.data.token);
       cleanState();
       navigate("/");
+    } else {
+      setRegsterError(response);
     }
-        else {
-            setRegsterError(response)
   }
-    };
 
   async function logInToAccount() {
     const response = await logIn(login, password);
 
     if (response.status === 200) {
       setCookie("token", response.data.token);
-            const responseMe = await verifyUserApi(response.data.token)
+      const responseMe = await verifyUserApi(response.data.token);
-            setUser(responseMe.data)
+      setUser(responseMe.data);
 
       cleanState();
-            navigate("/")
+      navigate("/");
-        }
+    } else {
-        else {
       setLoginError(true);
     }
   }
@@ -85,46 +83,111 @@ const EnterAccount = () => {
         <div className={classes.tabs}>
           <ul class="nav nav-tabs">
             <li class="nav-item" onClick={() => selectTag("login")}>
-                            <a className={enter === "login" ? "nav-link active" : "nav-link"} aria-current="page">Авторизация</a>
+              <a
+                className={enter === "login" ? "nav-link active" : "nav-link"}
+                aria-current="page"
+              >
+                Авторизация
+              </a>
             </li>
             <li class="nav-item" onClick={() => selectTag("register")}>
-                            <a className={enter === "register" ? "nav-link active" : "nav-link"}>Регитрация</a>
+              <a
+                className={
+                  enter === "register" ? "nav-link active" : "nav-link"
+                }
+              >
+                Регитрация
+              </a>
             </li>
           </ul>
         </div>
         <div className={classes.content}>
           <div className={classes.content__wrapper}>
-                        {enter === 'login' ? <div className={classes.content__wrapper__login}>
+            {enter === "login" ? (
+              <div className={classes.content__wrapper__login}>
                 <div className={classes.content__wrapper__login__header}>
                   <h3>Войти в аккаунт</h3>
                 </div>
                 <div className={classes.content__wrapper__login__body}>
-                                {loginError ? <span className={classes.content__wrapper__login__body__error}>
+                  {loginError ? (
+                    <span
+                      className={classes.content__wrapper__login__body__error}
+                    >
                       Ошибка. Проверте корректность ввода логина и пароля.
-                                </span> : <span className={classes.content__wrapper__login__body__error}></span>}
+                    </span>
-                                <MyInput placeholder={"Логин"} otherMainStyle={{width: "100%", height: "20%"}} otherInputStyle={{width: "100%"}} value={login} change={setLogin}/>
+                  ) : (
-                                <MyInput type={"password"} placeholder={"Пароль"} otherMainStyle={{width: "100%", height: "20%"}} otherInputStyle={{width: "100%"}} value={password} change={setPassword}/>
+                    <span
+                      className={classes.content__wrapper__login__body__error}
+                    ></span>
+                  )}
+                  <MyInput
+                    placeholder={"Логин"}
+                    otherMainStyle={{ width: "100%", height: "20%" }}
+                    otherInputStyle={{ width: "100%" }}
+                    value={login}
+                    change={setLogin}
+                  />
+                  <MyInput
+                    type={"password"}
+                    placeholder={"Пароль"}
+                    otherMainStyle={{ width: "100%", height: "20%" }}
+                    otherInputStyle={{ width: "100%" }}
+                    value={password}
+                    change={setPassword}
+                  />
                 </div>
                 <div className={classes.content__wrapper__login__footer}>
                   <MyButton
                     text={"Войти"}
-                                    class={"main__green"}
+                    class={"main__blue"}
-                                    otherStyle={{height: "50%", width: "20%"}} 
                     click={logInToAccount}
                   />
                 </div>
-                        </div> : 
+              </div>
+            ) : (
               <div className={classes.content__wrapper__register}>
                 <div className={classes.content__wrapper__register__header}>
-                                <h3>Зарегистрировать учетную запись</h3>
+                  <h3>Создать аккаунт</h3>
                 </div>
                 <div className={classes.content__wrapper__register__body}>
-                                {regsterError ? <span className={classes.content__wrapper__register__body__error}>
+                  {regsterError ? (
+                    <span
+                      className={
+                        classes.content__wrapper__register__body__error
+                      }
+                    >
                       {regsterError}
-                                </span> : <span className={classes.content__wrapper__register__body__error}></span>}
+                    </span>
-                                <MyInput placeholder={"Логин"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}} value={login} change={setLogin}/>
+                  ) : (
-                                <MyInput type={"password"} placeholder={"Пароль"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}} value={password} change={setPassword}/>
+                    <span
-                                <MyInput type={'password'} placeholder={"Повторите пароль"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}} value={repiedPassword} change={setRepiedPassword}/>
+                      className={
+                        classes.content__wrapper__register__body__error
+                      }
+                    ></span>
+                  )}
+                  <MyInput
+                    placeholder={"Логин"}
+                    otherMainStyle={{ width: "100%", height: "15%" }}
+                    otherInputStyle={{ width: "100%" }}
+                    value={login}
+                    change={setLogin}
+                  />
+                  <MyInput
+                    type={"password"}
+                    placeholder={"Пароль"}
+                    otherMainStyle={{ width: "100%", height: "15%" }}
+                    otherInputStyle={{ width: "100%" }}
+                    value={password}
+                    change={setPassword}
+                  />
+                  <MyInput
+                    type={"password"}
+                    placeholder={"Повторите пароль"}
+                    otherMainStyle={{ width: "100%", height: "15%" }}
+                    otherInputStyle={{ width: "100%" }}
+                    value={repiedPassword}
+                    change={setRepiedPassword}
+                  />
                 </div>
                 {/* <div className={classes.content__wrapper__register__body}>
                                 <MyInput placeholder={"Email"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}} value={email} change={setEmail}/>
@@ -140,18 +203,17 @@ const EnterAccount = () => {
                 <div className={classes.content__wrapper__register__footer}>
                   <MyButton
                     text={"Создать"}
-                                    class={"main__green"}
+                    class={"main__blue"}
-                                    otherStyle={{ height: "100%", width: "20%" }}
                     click={() => createUser()}
                   />
                 </div>
               </div>
-                        }
+            )}
           </div>
         </div>
       </div>
     </div>
   );
-    };
+};
 
 export default EnterAccount;

src/pages/Forms.jsx

@@ -1,17 +1,23 @@
 import React, { useState, useContext, useEffect } from "react";
 import { useCookies } from "react-cookie";
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from "react-router-dom";
-import classes from "../assets/styles/forms.module.scss"
+import classes from "../assets/styles/forms.module.scss";
 import MyButton from "../components/MyButton.jsx";
 import MyInput from "../components/MyInput.jsx";
 import { FormsData, UserData } from "../context";
 import CheckModal from "../components/CheckModal.jsx";
-import { listFormsApi, createFormApi, removeFormApi, newFormTokenApi, listFormsByTokenApi } from "../hooks/api/listFormsApi.js";
+import {
+  listFormsApi,
+  createFormApi,
+  removeFormApi,
+  newFormTokenApi,
+  listFormsByTokenApi,
+} from "../hooks/api/listFormsApi.js";
 
 const Forms = () => {
   const navigate = useNavigate();
-    const {forms, setForms} = useContext(FormsData);
+  const { forms, setForms } = useContext(FormsData);
-    const {user, setUser} = useContext(UserData);
+  const { user, setUser } = useContext(UserData);
   const [stateLoading, setStateLoading] = useState(false);
   const [searchForm, setSearchForm] = useState("");
 
@@ -23,14 +29,12 @@ const Forms = () => {
 
       if (response.data) {
         setForms(response.data);
-            }
+      } else if (response.status === 200 && response.data) {
-            else if (response.status === 200 && response.data) {
         setForms([]);
+      } else {
+        console.log(response);
       }
-            else {
-                console.log(response)
     }
-        };
 
     listForms();
   }, []);
@@ -41,63 +45,75 @@ const Forms = () => {
     setStateLoading(false);
 
     if (response.data) {
-            const token = await newFormTokenApi(cookies.token, response.data.id)
+      const token = await newFormTokenApi(cookies.token, response.data.id);
-            navigate(`/forms/${response.data.id}/edit`)
+      navigate(`/forms/${response.data.id}/edit`);
+    } else {
+      console.log(response);
     }
-        else {
-            console.log(response)
   }
-    };
 
   function editForm(item) {
     navigate(`/forms/${item.id}/edit`);
-    };
+  }
 
   async function removeForm(id) {
-        const response = await removeFormApi(cookies.token, id)
+    const response = await removeFormApi(cookies.token, id);
 
     if (response.status === 200) {
-            setForms([...forms.filter(item => item.id !== id)]);
+      setForms([...forms.filter((item) => item.id !== id)]);
-        }
+    } else {
-        else {
       console.log(response);
     }
-    };
+  }
 
   async function openFormView(formId) {
     const response = await listFormsByTokenApi(cookies.token, formId);
 
     if (response.status === 200 && response.data.tokens) {
       navigate(`/forms/${response.data.tokens[0].id}/`);
+    } else {
+      console.log(response);
     }
-        else {
-            console.log(response)
   }
-    };
 
   async function copyLinkToFormView(formId) {
     const response = await listFormsByTokenApi(cookies.token, formId);
 
     if (response.status === 200 && response.data.tokens) {
-            navigator.clipboard.writeText(`${window.location.host}/forms/${response.data.tokens[0].id}/`)
+      navigator.clipboard.writeText(
+        `${window.location.host}/forms/${response.data.tokens[0].id}/`
+      );
+    } else {
+      console.log(response);
     }
-        else {
-            console.log(response)
   }
-    };
 
-    const filterFormsBySearch = () => [...forms].filter(item => item.title.toLowerCase().includes(searchForm));
+  const filterFormsBySearch = () =>
+    [...forms].filter((item) => item.title.toLowerCase().includes(searchForm));
 
   return (
     <div className={classes.main}>
       <div className={classes.wrapper}>
         <div className={classes.panel}>
-                    <MyInput placeholder={'Поиск...'} value={searchForm} change={setSearchForm}/>
+          <MyInput
-                    <MyButton click={createForm} class={"main__green"} otherStyle={{width: '200px'}} text={
+            placeholder={"Поиск..."}
-                        stateLoading ? <div class="spinner-border text-light" role="status">
+            value={searchForm}
+            change={setSearchForm}
+          />
+          <MyButton
+            click={createForm}
+            class={"main__blue"}
+            otherStyle={{ width: "200px" }}
+            text={
+              stateLoading ? (
+                <div class="spinner-border text-light" role="status">
                   <span class="visually-hidden">Загрузка...</span>
-                        </div> : 'Создать'
+                </div>
-                    }/>
+              ) : (
+                "Создать"
+              )
+            }
+          />
         </div>
         <div className={classes.listForms}>
           <div className={classes.listForms__columns}>
@@ -106,35 +122,80 @@ const Forms = () => {
                         <div className={classes.listForms__columns__item}>Изменения</div> */}
           </div>
           <div className={classes.listForms__forms}>
-                        {filterFormsBySearch().map((item, i) =>
+            {filterFormsBySearch().map((item, i) => (
               <div className={classes.listForms__forms__item} key={i}>
-                                <div className={classes.listForms__forms__item__title} onClick={() => editForm(item)}>{item.title}</div>
+                <div
+                  className={classes.listForms__forms__item__title}
+                  onClick={() => editForm(item)}
+                >
+                  {item.title}
+                </div>
                 {/* <div className={classes.listForms__forms__item__answers}>{item.datetime}</div>
                                 <div className={classes.listForms__forms__item__update}>{item.update}</div> */}
-                                <i class="fa-solid fa-ellipsis-vertical" id="action" data-bs-toggle="dropdown"></i>
+                <i
+                  class="fa-solid fa-ellipsis-vertical"
+                  id="action"
+                  data-bs-toggle="dropdown"
+                ></i>
                 <ul class="dropdown-menu" aria-labelledby="action">
-                                    <li><a class="dropdown-item" onClick={() => openFormView(item.id)}>Открыть</a></li>
+                  <li>
-                                    <li><a class="dropdown-item" onClick={() => navigate(`/forms/${item.id}/answers`)}>Ответы</a></li>
+                    <a
-                                    <li><a class="dropdown-item" onClick={() => navigate(`/tokens/${item.id}`)}>Список токенов</a></li>
+                      class="dropdown-item"
-                                    <li><a class="dropdown-item" onClick={() => copyLinkToFormView(item.id)}>Скопировать ссылку</a></li>
+                      onClick={() => openFormView(item.id)}
-                                    <li><a class="dropdown-item" data-bs-toggle="modal" data-bs-target={`#checkModal${item.id}`}>Удалить</a></li>
+                    >
+                      Открыть
+                    </a>
+                  </li>
+                  <li>
+                    <a
+                      class="dropdown-item"
+                      onClick={() => navigate(`/forms/${item.id}/answers`)}
+                    >
+                      Ответы
+                    </a>
+                  </li>
+                  <li>
+                    <a
+                      class="dropdown-item"
+                      onClick={() => navigate(`/tokens/${item.id}`)}
+                    >
+                      Список токенов
+                    </a>
+                  </li>
+                  <li>
+                    <a
+                      class="dropdown-item"
+                      onClick={() => copyLinkToFormView(item.id)}
+                    >
+                      Скопировать ссылку
+                    </a>
+                  </li>
+                  <li>
+                    <a
+                      class="dropdown-item"
+                      data-bs-toggle="modal"
+                      data-bs-target={`#checkModal${item.id}`}
+                    >
+                      Удалить
+                    </a>
+                  </li>
                 </ul>
 
                 <CheckModal
                   postfix={item.id}
-                                    message={`Вы хотетите удалить форму <${item.title}>?`} 
+                  message={`Вы хотите удалить форму <${item.title}>?`}
                   action={{
                     execute: () => removeForm(item.id),
-                                        cancel: () => {}
+                    cancel: () => {},
                   }}
                 />
               </div>
-                        )}
+            ))}
           </div>
         </div>
       </div>
     </div>
-    )
+  );
-}
+};
 
 export default Forms;

src/pages/Home.jsx

@@ -16,8 +16,8 @@ const Home = () => {
             Кажется вы попали на общую страницу.
           </div>
           <div className={classes.header__bottom}>
-            Чтобы перейти к форме введите токен ниже или снова перейдите по
+            Чтобы перейти к форме введите токен ниже <br /> или снова перейдите
-            ссылке.
+            по ссылке.
           </div>
         </div>
         <div className={classes.content}>
@@ -41,7 +41,7 @@ const Home = () => {
             <div className={classes.content__search__wrapper}>
               <MyButton
                 text={"Найти форму"}
-                class={"main__green"}
+                class={"main__blue"}
                 click={() => navigate(`/forms/${token}`)}
               />
             </div>

src/pages/NewForm.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useContext, useEffect } from "react";
-import { useNavigate, useLocation, useParams } from 'react-router-dom';
+import { useNavigate, useLocation, useParams } from "react-router-dom";
 import { useCookies } from "react-cookie";
 import classes from "../assets/styles/newForm.module.scss";
 import MyButton from "../components/MyButton.jsx";
@@ -8,8 +8,19 @@ import PreviewModal from "../components/PreviewModal.jsx";
 import Loading from "../components/Loading.jsx";
 import { FormsData, TypeAnswerData } from "../context";
 import { listFormsApi, updateTitleFormApi } from "../hooks/api/listFormsApi.js";
-import { saveFormApi, addFormBlockApi, listFormBlockApi, updateBlockApi, updateOrderBlockApi, removeBlockApi, getBlockApi } from "../hooks/api/formApi.js";
+import {
-import { responseDataToListBlock, numberingBlocks } from "../hooks/sundry/parseListBlock.js";
+  saveFormApi,
+  addFormBlockApi,
+  listFormBlockApi,
+  updateBlockApi,
+  updateOrderBlockApi,
+  removeBlockApi,
+  getBlockApi,
+} from "../hooks/api/formApi.js";
+import {
+  responseDataToListBlock,
+  numberingBlocks,
+} from "../hooks/sundry/parseListBlock.js";
 import MyInput from "../components/MyInput.jsx";
 
 const NewForm = () => {
@@ -22,11 +33,11 @@ const NewForm = () => {
 
   const [cookies, _, __] = useCookies(["user"]);
 
-    const {forms, setForms} = useContext(FormsData);
+  const { forms, setForms } = useContext(FormsData);
-    const {listTypeAnswer, setListTypeAnswer} = useContext(TypeAnswerData);
+  const { listTypeAnswer, setListTypeAnswer } = useContext(TypeAnswerData);
 
   const nextID = (list, param) => {
-        return list.length ? list.at(-1)[param] + 1 : 1
+    return list.length ? list.at(-1)[param] + 1 : 1;
   };
   const [question, setQuestion] = useState("");
   const [comment, setComment] = useState("");
@@ -46,61 +57,73 @@ const NewForm = () => {
   const [stateModal, setStateModal] = useState(false);
 
   function cleanStates() {
-        setStateModal(false)
+    setStateModal(false);
     setQuestion("");
     setComment("");
-        setOptionAnswer([])
+    setOptionAnswer([]);
     setFile([]);
     setVideo("");
     setCurrentTypeAnswer("");
-        setCurrentOptionAnswer("")
+    setCurrentOptionAnswer("");
     setMandatory(false);
-    };
+  }
 
   useEffect(() => {
     async function totalData() {
       const responseForms = await listFormsApi(cookies.token);
       const responseBlock = await listFormBlockApi(cookies.token, formId);
 
-            if (responseBlock.status === 200 && responseBlock.data && responseForms.status === 200) {
+      if (
+        responseBlock.status === 200 &&
+        responseBlock.data &&
+        responseForms.status === 200
+      ) {
         setListBlock(responseDataToListBlock(responseBlock.data));
-                const title = responseForms.data.find(item => item.id === formId).title
+        const title = responseForms.data.find(
+          (item) => item.id === formId
+        ).title;
         setNewTitleForm(title);
         setOldTitleForm(title);
-            }
+      } else {
-            else {
+        setListBlock([]);
-                setListBlock([])
         setNewTitleForm("Новыя форма");
         setOldTitleForm("Новыя форма");
       }
       setLoading(true);
-        };
+    }
 
     totalData();
   }, []);
 
   function addOptionAnswer() {
-        setOptionAnswer(numberingBlocks(
+    setOptionAnswer(
-            [...optionAnswer, {
+      numberingBlocks(
+        [
+          ...optionAnswer,
+          {
             id: nextID(optionAnswer, "id"),
-                text: currentOptionAnswer
+            text: currentOptionAnswer,
-            }],
+          },
+        ],
         "id",
         1
-        ));
+      )
+    );
     setCurrentOptionAnswer("");
-    };
+  }
 
   function removeOptionAnswer(id) {
-        setOptionAnswer(numberingBlocks(
+    setOptionAnswer(
-            [...optionAnswer].filter(answer => answer.id !== id),
+      numberingBlocks(
+        [...optionAnswer].filter((answer) => answer.id !== id),
         "id",
         1
-        ));
+      )
-    };
+    );
+  }
 
   function editAnswerByForm(id) {
-        const obj = listBlock.find(item => item.id === id);
+    const obj = listBlock.find((item) => item.id === id);
     setQuestion(obj.question);
     setComment(obj.comment);
     setFile(obj.file);
@@ -109,7 +132,7 @@ const NewForm = () => {
     setOptionAnswer(obj.optionAnswer);
     setMandatory(obj.mandatory);
     setStateModal(obj.id);
-    };
+  }
 
   async function updateBlock() {
     const data = {
@@ -120,13 +143,13 @@ const NewForm = () => {
       mandatory: mandatory,
       optionAnswer: optionAnswer,
       typeAnswer: currentTypeAnswer,
-        }
+    };
 
     const response = await updateBlockApi(
       cookies.token,
       formId,
       data,
-            listBlock.find(item => item.id === stateModal).order
+      listBlock.find((item) => item.id === stateModal).order
     );
 
     if (response.status === 200) {
@@ -134,31 +157,28 @@ const NewForm = () => {
 
       if (responseBlock.status === 200) {
         setListBlock(responseDataToListBlock(responseBlock.data));
+      } else {
+        setListBlock([]);
       }
-            else {
+    } else {
-                setListBlock([])
+      console.log(response);
-            }
-        }
-        else {
-            console.log(response)
     }
 
     cleanStates();
-    };
+  }
 
   async function removeBlock(order) {
-        const response = await removeBlockApi(cookies.token, formId, order)
+    const response = await removeBlockApi(cookies.token, formId, order);
 
     if (response.status === 200) {
-            setListBlock([...listBlock.filter(item => item.order !== order)]); 
+      setListBlock([...listBlock.filter((item) => item.order !== order)]);
+    } else {
+      console.log(response);
     }
-        else {
-            console.log(response)
   }
-    };
 
   async function addFormBlock() {
-        console.log(optionAnswer)
+    console.log(optionAnswer);
 
     const newBlock = {
       question: question,
@@ -167,26 +187,24 @@ const NewForm = () => {
       mandatory: mandatory,
       optionAnswer: optionAnswer,
       file: file,
-            video: video
+      video: video,
-        }
+    };
 
-        const response = await addFormBlockApi(cookies.token, formId, newBlock)
+    const response = await addFormBlockApi(cookies.token, formId, newBlock);
 
     if (response.status === 200) {
       const responseBlock = await listFormBlockApi(cookies.token, formId);
 
       if (responseBlock.status === 200) {
         setListBlock(responseDataToListBlock(responseBlock.data));
+      } else {
+        setListBlock([]);
       }
-            else {
+    } else {
-                setListBlock([])
+      console.log(response);
-            }
-        }
-        else {
-            console.log(response)
     }
     cleanStates();
-    };
+  }
 
   // async function updateTitleForm() {
   //     const response = await updateTitleFormApi(cookies.token, formId, newTitleForm);
@@ -202,8 +220,8 @@ const NewForm = () => {
   async function updateOrderBlock() {
     const response = await updateOrderBlockApi(cookies.token, formId, {
       new: dropElem,
-            old: dragElem
+      old: dragElem,
-        })
+    });
 
     if (response.status === 200) {
       const currentElem = listBlock[dragElem];
@@ -212,15 +230,14 @@ const NewForm = () => {
       if (dragElem > dropElem) {
         tListBlock.splice(dropElem, 0, currentElem);
         tListBlock.splice(dragElem + 1, 1);
-            }
+      } else {
-            else {
         tListBlock.splice(dropElem + 1, 0, currentElem);
         tListBlock.splice(dragElem, 1);
-            };
+      }
 
       setListBlock(numberingBlocks(tListBlock, "order"));
     }
-    };
+  }
 
   async function saveForm() {
     if (oldTitleFrom !== newTitleForm) {
@@ -229,7 +246,7 @@ const NewForm = () => {
 
     cleanStates();
     navigate("/forms");
-    }; 
+  }
 
   return (
     <div className={classes.main}>
@@ -238,30 +255,53 @@ const NewForm = () => {
           <div className={classes.header__listInput}>
             <div className={classes.header__listInput__date}>
               <span>Дедлайн выполнения</span>
-                            <MyInput type={"datetime-local"} value={datetime} change={setDatetime}/>
+              <MyInput
+                type={"datetime-local"}
+                value={datetime}
+                change={setDatetime}
+              />
             </div>
             <div className={classes.header__listInput__title}>
               <span>Название формы</span>
-                            <MyInput type={"text"} value={newTitleForm} change={setNewTitleForm}/>
+              <MyInput
+                type={"text"}
+                value={newTitleForm}
+                change={setNewTitleForm}
+              />
             </div>
           </div>
           <div className={classes.header__listBtn}>
-                        <MyButton text={'Предпросмотр'} class={"main__white"} toggle={"modal"} target={"#previewModal"}/>
+            <MyButton
-                        <MyButton text={'Опубликовать'} class={"main__green"} click={location.state ? updateFormByForms : saveForm}/>
+              text={"Предпросмотр"}
+              class={"main__white"}
+              toggle={"modal"}
+              target={"#previewModal"}
+            />
+            <MyButton
+              text={"Опубликовать"}
+              class={"main__blue"}
+              click={location.state ? updateFormByForms : saveForm}
+            />
           </div>
         </div>
         <div className={classes.content}>
           <div className={classes.content__listQuestion}>
             <div className={classes.content__listQuestion__list}>
-                            {listTypeAnswer.map((item, i) =>
+              {listTypeAnswer.map((item, i) => (
-                                <div className={classes.content__listQuestion__list__item} data-bs-toggle="modal" data-bs-target="#answerModal" onClick={() => setCurrentTypeAnswer(item.id)} key={i}>
+                <div
+                  className={classes.content__listQuestion__list__item}
+                  data-bs-toggle="modal"
+                  data-bs-target="#answerModal"
+                  onClick={() => setCurrentTypeAnswer(item.id)}
+                  key={i}
+                >
                   <span>{item.text}</span>
                 </div>
-                            )}
+              ))}
             </div>
           </div>
 
-                    <PreviewModal listBlock={listBlock} listTypeAnswer={listTypeAnswer}/>
+          <PreviewModal listBlock={listBlock} listTypeAnswer={listTypeAnswer} />
 
           <AnswerModal
             stateModal={stateModal}
@@ -294,46 +334,65 @@ const NewForm = () => {
               <h3>Новая форма</h3>
             </div>
             <div className={classes.content__newForm__list}>
-                            {loading ? listBlock.map((item, i) => 
+              {loading ? (
+                listBlock.map((item, i) => (
                   <div
                     className={classes.content__newForm__list__item}
                     key={i}
                     id={item.order}
                     draggable="true"
-                                    onDragOver={(event) => {event.preventDefault()}}
+                    onDragOver={(event) => {
+                      event.preventDefault();
+                    }}
                     onDragStart={(event) => {
                       if (event.target.id) {
-                                            setDragElem(Number(event.target.id))
+                        setDragElem(Number(event.target.id));
                       }
                     }}
                     onDragEnter={(event) => {
                       if (event.target.id) {
-                                            setDropElem(Number(event.target.id))
+                        setDropElem(Number(event.target.id));
                       }
                     }}
                     onDrop={() => updateOrderBlock()}
                   >
-                                    <div className={classes.content__newForm__list__item__answer}>
+                    <div
+                      className={classes.content__newForm__list__item__answer}
+                    >
                       <span>{item.question}</span>
-                                        <span>{listTypeAnswer.map(typeItem => {
+                      <span>
+                        {listTypeAnswer.map((typeItem) => {
                           if (typeItem.id === item.typeAnswer) {
-                                                return typeItem.text
+                            return typeItem.text;
                           }
-                                        })}</span>
+                        })}
+                      </span>
                     </div>
                     <div className={classes.content__newForm__list__item__btn}>
-                                        <i class="fa-solid fa-pen" data-bs-toggle="modal" data-bs-target="#answerModal" onClick={() => {editAnswerByForm(item.id)}}></i>
+                      <i
-                                        <i class="fa-solid fa-trash" onClick={() => removeBlock(item.order)}></i>
+                        class="fa-solid fa-pen"
+                        data-bs-toggle="modal"
+                        data-bs-target="#answerModal"
+                        onClick={() => {
+                          editAnswerByForm(item.id);
+                        }}
+                      ></i>
+                      <i
+                        class="fa-solid fa-trash"
+                        onClick={() => removeBlock(item.order)}
+                      ></i>
                     </div>
                   </div>
-                            ) : 
+                ))
-                            <Loading/>}
+              ) : (
+                <Loading />
+              )}
             </div>
           </div>
         </div>
       </div>
     </div>
-    )
+  );
-}
+};
 
 export default NewForm;