refactoring useFormValidation and

registationForCandidate, adaptive
modalRegistration and registationForCandidate

src/pages/RegistrationForCandidate/RegistrationForCandidate.js

@@ -1,6 +1,7 @@
 import React from "react";
 
 import { useFormValidation } from "@hooks/useFormValidation";
+import { useNotification } from "@hooks/useNotification";
 
 import AuthHeader from "@components/Common/AuthHeader/AuthHeader";
 import { Footer } from "@components/Common/Footer/Footer";
@@ -13,7 +14,40 @@ import BackEndImg from "assets/images/partnerProfile/personalBackEnd.svg";
 import "./registationForCandidate.scss";
 
 export const RegistrationForCandidate = () => {
-  const form = useFormValidation();
+  const apiEndpoint = "/register/sign-up";
+
+  const fields = {
+    name: "",
+    summary: "",
+    email: "",
+    tg: "",
+    password: "",
+    secondPassword: ""
+  };
+
+  const { showNotification } = useNotification();
+  const showNotificationError = () => {
+    showNotification({
+      show: true,
+      text: "Аккаунт с таким логином или email уже существует",
+      type: "error"
+    });
+  };
+  const showNotificationTrue = () => {
+    showNotification({
+      show: true,
+      text: "Аккаунт успешно создан",
+      type: "success"
+    });
+  };
+
+  const form = useFormValidation(
+    apiEndpoint,
+    fields,
+    showNotificationError,
+    showNotificationTrue
+  );
+
   return (
     <div className="registrationCandidate">
       <AuthHeader />

src/pages/RegistrationForCandidate/registationForCandidate.scss

@@ -26,7 +26,7 @@
       }
 
       @media (max-width: 1072px) {
-        top: 32%;
+        top: 31.5%;
       }
 
       @media (max-width: 1024px) {
@@ -110,17 +110,28 @@
     row-gap: 28px;
     column-gap: 55px;
 
+    @media (max-width: 1072px) {
+      flex-wrap: nowrap;
+      flex-direction: column;
+      width: 50%;
+    }
+
+    @media (max-width: 660px) {
+      width: 100%;
+      margin-left: 5px;
+    }
+
     &__input {
       display: flex;
       flex-direction: column;
       width: 46%;
 
       @media (max-width: 1072px) {
-        width: 75%;
+        width: 100%;
       }
 
       @media (max-width: 478px) {
-        width: 100%;
+        // width: 100%;
       }
 
       label {
@@ -135,7 +146,7 @@
         background: #eff2f7;
         border-radius: 8px;
         width: 100%;
-        padding: 8px 12px;
+        padding: 10px 12px;
         border: none;
         outline: none;
         font-weight: 400;