registration adaptive

src/components/Modal/ModalRegistration/ModalRegistration.jsx

@@ -104,11 +104,11 @@ export const ModalRegistration = ({ active, setActive }) => {
   };
   return (
     <ModalLayout active={active} setActive={closeModal} styles={"registration"}>
-      <div className="registration-body__left">
+      <div className="registration-body__main">
         <h2>
-          Подключайтесь к <p>itguild.</p>
+          Подключайтесь к <p>ITguild</p>
         </h2>
-        <p className="registration-body__left-desc">
+        <p className="registration-body__main-desc">
           Зарегистрируйтесь и начните работу уже сегодня
         </p>
 
@@ -158,8 +158,6 @@ export const ModalRegistration = ({ active, setActive }) => {
           </div>
 
           <div className="input-body__box">
-            {/*<h5>Название компании</h5>*/}
-            {/*<input></input>*/}
             <div className="inputContainer">
               <h5>Пароль</h5>
               <input
@@ -181,8 +179,30 @@ export const ModalRegistration = ({ active, setActive }) => {
               />
               {inputsError.password && <span>Минимум 6 символов</span>}
             </div>
+            <div className="inputContainer">
+              <h5>Повторите пароль</h5>
+              <input
+                className={inputsError.password ? "error" : ""}
+                type="password"
+                onChange={(e) => {
+                  setInputsError({
+                    name: false,
+                    email: false,
+                    password: false,
+                  });
+                  setInputsValue((prevValue) => ({
+                    ...prevValue,
+                    password: e.target.value,
+                  }));
+                }}
+                value={inputsValue.password}
+                placeholder="Пароль"
+              />
+              {inputsError.password && <span>Минимум 6 символов</span>}
+            </div>
           </div>
         </div>
+
         <div className="button-box">
           {loader ? (
             <Loader style={"green"} />
@@ -202,9 +222,9 @@ export const ModalRegistration = ({ active, setActive }) => {
           {/*</h5>*/}
         </div>
       </div>
-      <div className="registration-body__right">
+      <div className="registration-body__about">
         <h4>Отказ от специалиста в любой момент</h4>
-        <div className="registration-body__right-text">
+        <div className="registration-body__about-text">
           <img src={anyMoment}></img>
           <p>
             Поменяйте, откажитесь или возьмите еще специалиста в любой момент
@@ -212,7 +232,7 @@ export const ModalRegistration = ({ active, setActive }) => {
           </p>
         </div>
         <h4>100% постоплата</h4>
-        <div className="registration-body__right-text">
+        <div className="registration-body__about-text">
           <img src={doc}></img>
           <p>
             Договор не подразумевает какую‑либо оплату до того, как вы
@@ -220,7 +240,7 @@ export const ModalRegistration = ({ active, setActive }) => {
           </p>
         </div>
         <h4>Есть вопросы?</h4>
-        <div className="registration-body__right-text">
+        <div className="registration-body__about-text">
           <img src={telegramLogo}></img>
           <p>Напишите нам в Телеграм. Мы с удовольствием ответим!</p>
         </div>

src/components/Modal/ModalRegistration/modalRegistration.scss

@@ -6,12 +6,10 @@
   justify-content: space-between;
   border: 1px solid #dde2e4;
   border-radius: 8px;
-  width: 1088px;
-  height: 515px;
 
   &-body {
-    &__left {
-      padding: 33px 0 30px 77px;
+    &__main {
+      padding-left: 30px;
 
       h2 {
         font-weight: 500;
@@ -51,6 +49,7 @@
             font-weight: 400;
             font-size: 15px;
             line-height: 18px;
+            margin-left: 10px;
           }
 
           input {
@@ -112,9 +111,9 @@
       }
     }
 
-    &__right {
+    &__about {
       border-left: 1px solid #f1f1f1;
-      padding: 30px 32px 46px 25px;
+      padding: 20px;
       display: flex;
       flex-direction: column;
       justify-content: space-between;

src/components/Modal/ModalResetPassword/ModalResetPassword.jsx

@@ -127,7 +127,7 @@ export const ModalResetPassword = ({ active, setActive }) => {
         <h3 className="resetPassword__title">Восстановление пароля</h3>
         {!step ? (
           <div className="resetPassword__email">
-            <h5>Введите e-mail:</h5>
+            <h5>Введите ваш e-mail:</h5>
             <input
               type="email"
               onChange={(e) => {
@@ -145,9 +145,6 @@ export const ModalResetPassword = ({ active, setActive }) => {
               value={inputsValue.email}
               className={inputsError.email ? "error" : ""}
             />
-            {inputsError.email && (
-              <span className="warningText">Введите корректный e-mail</span>
-            )}
             {loader ? (
               <Loader style={"green"} />
             ) : (

src/components/Modal/ModalResetPassword/modalResetPassword.scss

@@ -1,5 +1,5 @@
 .resetPassword {
-  width: 370px;
+  width: 280px;
   position: relative;
 
   &__close {
@@ -13,7 +13,7 @@
   &__title {
     font-size: 20px;
     text-align: center;
-    margin-bottom: 15px;
+    margin-bottom: 20px;
   }
   &__email {
     display: flex;
@@ -24,6 +24,7 @@
     h5 {
       font-size: 16px;
       margin-bottom: 10px;
+      align-self: flex-start;
     }
 
     input {
@@ -54,11 +55,9 @@
     color: #ffffff;
     font-weight: 500;
     font-size: 15px;
-    letter-spacing: normal;
-    line-height: 32px;
-    text-align: center;
     border: 2px solid #6aaf5c;
     transition: 0.3s;
+    margin-top: 15px;
   }
 
   .error {

src/components/Modal/Tracker/TrackerModal/trackerModal.scss

@@ -742,7 +742,7 @@
 .exit {
   cursor: pointer;
   position: absolute;
-  top: 36px;
+  top: 20px;
   right: 20px;
   width: 13px;
   height: 13px;