#841 [Redesign] Login Page

FrontEnd/src/global.css

@@ -44,21 +44,24 @@
   --delete-text-color: #F15831;
   --notification-text-color: #F34444;
   --footer-dark-text-color: #A0ABC0;
+  --link-text-color-new: #000000;
+  --error-text-color-new: #F15831;
 
   /* button color*/
   --main-button-color: #1F9A7C;
-  --button-color-hover: #0b6c61 ;
+  --button-color-hover: #0b6c61;
   --light-button-color: #FFFFFF;
 
   /* fonts */
   --font-main: 'Inter', sans-serif;
   --font-messages: 'Roboto', sans-serif;
   --font-error: 'Roboto', sans-serif;
   --font-logo: 'Geologica', sans-serif;
+  --font-main-new: 'Geologica', sans-serif;
 
   --toastify-color-error: #FFF1F0;
   --toastify-color-success: #F1FFF7;
-  --toastify-font-family: var(--font-main);
+  --toastify-font-family: var(--font-main-new);
   --toastify-close-button: rgba(0, 0, 0, 0.85);
   --toastify-toast-width: 395px;
   --toastify-toast-min-height: 22px;
@@ -111,8 +114,20 @@
   --character-title-85: rgba(0, 0, 0, 0.85);
 
   --wf-base-white: #FFF;
-  
+
   --profile-min-height-block: calc(100vh - 565px);
   --min-height-block-main: calc(100vh - 305px);
   --company-card-color: #FFF;
 }
+
+@media only screen and (min-width: 768px) and (max-width: 1511px) {
+  :root {
+    --main-block-size: 768px;
+  }
+}
+
+@media only screen and (max-width: 767px) {
+  :root {
+    --main-block-size: 375px;
+  }
+}

FrontEnd/src/pages/Authorization/AuthorizationPage.jsx

@@ -5,12 +5,6 @@ const AuthorizationPage = () => {
 
   return (
     <div className={classes['auth-page']}>
-      <img className={classes['frame-img-left']}
-        src={`${process.env.REACT_APP_PUBLIC_URL}/img/dots_7x6.png`}
-        alt="dots_7x6.png" />
-      <img className={classes['frame-img-right']}
-        src={`${process.env.REACT_APP_PUBLIC_URL}/img/dots_7x6.png`}
-        alt="dots_7x6.png" />
       <Login />
     </div>
   );

FrontEnd/src/pages/Authorization/AuthorizationPage.module.css

@@ -1,30 +1,14 @@
 .auth-page {
-    display: flex;
-    width: var(--main-block-size);
-    min-height: var(--min-height-block-main);
-    flex-shrink: 0;
-    background: #f1fff7;
+  display: flex;
+  justify-content: center;
+  width: var(--main-block-size);
+  min-height: var(--min-height-block-main);
+  flex-shrink: 0;
+  background: #F9F5EC;
+}
+
+@media only screen and (min-width: var(--breakpoint-tablet)) and (max-width: var(--breakpoint-desktop)) {
+  .auth-page {
+    max-width: var(--breakpoint-tablet);
   }
-
-  .frame-img-left {
-    width: 179px;
-    height: 150px;
-    display: inline-flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 24px;
-    margin: 422px 979px 153px 354px;
-    position: absolute;
-  }
-
-  .frame-img-right {
-    width: 179px;
-    height: 150px;
-    display: inline-flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 24px;
-    margin: 102px 354px 473px 979px;
-    position: absolute;
-  }
-
+}

FrontEnd/src/pages/Authorization/EyeVisible.jsx

@@ -2,8 +2,8 @@ const EyeVisible = () => {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
     <path d="M7.00008 3.52734C4.7948 3.52734 3.18015 4.6457 2.04129 7C3.18015 9.3543 4.7948 10.4727 7.00008 10.4727C9.20672 10.4727 10.8214 9.3543 11.9589 7C10.82 4.6457 9.20535 3.52734 7.00008 3.52734ZM6.94539 9.40625C5.61648 9.40625 4.53914 8.32891 4.53914 7C4.53914 5.67109 5.61648 4.59375 6.94539 4.59375C8.2743 4.59375 9.35164 5.67109 9.35164 7C9.35164 8.32891 8.2743 9.40625 6.94539 9.40625Z" fill="white"/>
-    <path d="M12.8817 6.64727C11.5856 3.91699 9.6264 2.54297 7.00003 2.54297C4.3723 2.54297 2.41449 3.91699 1.11839 6.64863C1.06641 6.75871 1.03944 6.87894 1.03944 7.00068C1.03944 7.12242 1.06641 7.24265 1.11839 7.35273C2.41449 10.083 4.37367 11.457 7.00003 11.457C9.62777 11.457 11.5856 10.083 12.8817 7.35137C12.9869 7.12988 12.9869 6.87285 12.8817 6.64727ZM7.00003 10.4727C4.79476 10.4727 3.18011 9.3543 2.04124 7C3.18011 4.6457 4.79476 3.52734 7.00003 3.52734C9.20531 3.52734 10.82 4.6457 11.9588 7C10.8213 9.3543 9.20667 10.4727 7.00003 10.4727Z" fill="#1F9A7C"/>
-    <path d="M6.94531 4.59375C5.61641 4.59375 4.53906 5.67109 4.53906 7C4.53906 8.32891 5.61641 9.40625 6.94531 9.40625C8.27422 9.40625 9.35156 8.32891 9.35156 7C9.35156 5.67109 8.27422 4.59375 6.94531 4.59375ZM6.94531 8.53125C6.09903 8.53125 5.41406 7.84629 5.41406 7C5.41406 6.15371 6.09903 5.46875 6.94531 5.46875C7.7916 5.46875 8.47656 6.15371 8.47656 7C8.47656 7.84629 7.7916 8.53125 6.94531 8.53125Z" fill="#1F9A7C"/>
+    <path d="M12.8817 6.64727C11.5856 3.91699 9.6264 2.54297 7.00003 2.54297C4.3723 2.54297 2.41449 3.91699 1.11839 6.64863C1.06641 6.75871 1.03944 6.87894 1.03944 7.00068C1.03944 7.12242 1.06641 7.24265 1.11839 7.35273C2.41449 10.083 4.37367 11.457 7.00003 11.457C9.62777 11.457 11.5856 10.083 12.8817 7.35137C12.9869 7.12988 12.9869 6.87285 12.8817 6.64727ZM7.00003 10.4727C4.79476 10.4727 3.18011 9.3543 2.04124 7C3.18011 4.6457 4.79476 3.52734 7.00003 3.52734C9.20531 3.52734 10.82 4.6457 11.9588 7C10.8213 9.3543 9.20667 10.4727 7.00003 10.4727Z" fill="#B4D27A"/>
+    <path d="M6.94531 4.59375C5.61641 4.59375 4.53906 5.67109 4.53906 7C4.53906 8.32891 5.61641 9.40625 6.94531 9.40625C8.27422 9.40625 9.35156 8.32891 9.35156 7C9.35156 5.67109 8.27422 4.59375 6.94531 4.59375ZM6.94531 8.53125C6.09903 8.53125 5.41406 7.84629 5.41406 7C5.41406 6.15371 6.09903 5.46875 6.94531 5.46875C7.7916 5.46875 8.47656 6.15371 8.47656 7C8.47656 7.84629 7.7916 8.53125 6.94531 8.53125Z" fill="#B4D27A"/>
   </svg>
   );
 };

FrontEnd/src/pages/Authorization/Login.module.css

@@ -1,8 +1,12 @@
 .login {
-  display: inline-flex;
+  display: flex;
+  align-self: center;
   flex-direction: column;
   align-items: center;
-  gap: 32px;
-  margin: 159px 470px 158px 470px;
-  position: relative;
+  max-width: 572px;
+  min-width: 345px;
+  gap: 24px;
 }
+
+
+@media only screen and (min-width: 375px) and (max-width: 767px) {}

FrontEnd/src/pages/Authorization/LoginPage.jsx

@@ -4,6 +4,7 @@ import { useNavigate, Link } from 'react-router-dom';
 import axios from 'axios';
 import { useStopwatch } from 'react-timer-hook';
 import { toast } from 'react-toastify';
+import classNames from 'classnames';
 
 import validator from 'validator';
 import EyeVisible from './EyeVisible';
@@ -29,7 +30,7 @@ const LoginContent = () => {
 
   const errorMessageTemplates = {
     required: 'Обов’язкове поле',
-    email: 'Електронна пошта не відповідає вимогам',
+    email: 'Введіть адресу електронної пошти у форматі name@example.com',
     unspecifiedError: 'Електронна пошта чи пароль вказані некоректно',
     rateError: 'Небезпечні дії на сторінці. Сторінка заблокована на 10 хвилин',
     blockedUserError: 'Профіль компанії було заблоковано внаслідок розміщення неприйнятного контенту',
@@ -143,7 +144,7 @@ const LoginContent = () => {
       <div className={classes['login-header']}>
         <p>Вхід на платформу</p>
       </div>
-      <form onSubmit={handleSubmit(onSubmit)} noValidate>
+      <form onSubmit={handleSubmit(onSubmit)} className={classes['login-form']} noValidate>
         <div className={classes['login-content']}>
           <div className={classes['login-content__items']}>
             <div className={classes['login-content__item']}>
@@ -157,12 +158,15 @@ const LoginContent = () => {
               >
                 Електронна пошта
               </label>
-              <div className={classes['login-content__email']}>
+              <div className={classNames(
+                classes['login-content__email'],
+                { [classes['login-content__email-error']]: errors.email }
+              )}>
                 <input
                   id="email"
                   type="email"
                   autoComplete="username"
-                  placeholder="Електронна пошта"
+                  placeholder="Введіть свою електрону пошту"
                   {...register('email', {
                     required: errorMessageTemplates.required,
                     validate: (value) =>
@@ -186,13 +190,17 @@ const LoginContent = () => {
               >
                 Пароль
               </label>
-              <div className={classes['login-content__password']}>
+              <div className={classNames(
+                  classes['login-content__password'],
+                  { [classes['login-content__password-error']]: errors.password },
+                  { [classes['login-content__show-password']]: showPassword }
+                )}>
                 <div className={classes['login-content__password__wrapper']}>
                   <input
                     id="password"
                     type={showPassword ? 'text' : 'password'}
                     autoComplete="current-password"
-                    placeholder="Пароль"
+                    placeholder="Введіть пароль"
                     {...register('password', {
                       required: errorMessageTemplates.required,
                     })}
@@ -205,27 +213,21 @@ const LoginContent = () => {
                   </span>
                 </div>
               </div>
-              <span className={classes['error-message']}>
-                {errors.password && errors.password.message}
-                {errors.required && errors.required.message}
-                {errors.unspecifiedError && errors.unspecifiedError.message}
-              </span>
+              <div className={classes['forget-password__wrapper']}>
+                <span className={classes['error-message']}>
+                  {errors.password && errors.password.message}
+                  {errors.required && errors.required.message}
+                  {errors.unspecifiedError && errors.unspecifiedError.message}
+                </span>
+                <Link to="/reset-password" className={classes['forget-password']}>
+                  Забули пароль?
+                </Link>
+              </div>
             </div>
-            <Link to="/reset-password" className={classes['forget-password']}>
-              Забули пароль?
-            </Link>
           </div>
         </div>
         <div className={classes['login-footer']}>
           <div className={classes['login-footer-buttons']}>
-            <Link to="/">
-              <button
-                type="button"
-                className={classes['login-footer-buttons__main']}
-              >
-                Головна
-              </button>
-            </Link>
             <button
               disabled={disabled}
               type="submit"