From b37adba692cfe56b3c9b404a40db17ff1a1d12d4 Mon Sep 17 00:00:00 2001
From: Aleksandr Dronov <dronovspb@gmail.com>
Date: Sat, 21 Oct 2023 17:39:25 +0300
Subject: [PATCH] feat(adaptive): adaptive for reset password

---
 src/components/entry/entry.module.scss        |  6 +-
 src/components/entry/entry.tsx                | 22 +++++--
 .../reset-password-confirmation.module.scss   | 27 +++++++-
 .../reset-password/reset-password.module.scss | 65 +++++++++++++++++++
 src/pages/reset-password/reset-password.tsx   |  8 ++-
 src/shared/buttons/button/button.module.scss  |  3 +-
 6 files changed, 118 insertions(+), 13 deletions(-)

diff --git a/src/components/entry/entry.module.scss b/src/components/entry/entry.module.scss
index 680b369..249cac7 100644
--- a/src/components/entry/entry.module.scss
+++ b/src/components/entry/entry.module.scss
@@ -103,7 +103,7 @@
     }
   }
 
-  &_signIn {
+  &_signInAndReset {
     composes: formWrapper_signUp;
 
     @media screen and (max-width: $media-tablet-large) {
@@ -115,7 +115,7 @@
     }
   }
 
-  &_notSignUp {
+  &_notSignUpAndSignInAndReset {
     @media screen and (max-width: $media-tablet-large) {
       padding-top: 72px;
     }
@@ -156,7 +156,7 @@
   }
 
   &_notSignUp {
-    @media screen and (max-width: calc($media-tablet-large - 1px)) {
+    @media screen and (max-width: $media-tablet-large) {
       text-align: center;
     }
   }
diff --git a/src/components/entry/entry.tsx b/src/components/entry/entry.tsx
index 467cf4e..6b0ff55 100644
--- a/src/components/entry/entry.tsx
+++ b/src/components/entry/entry.tsx
@@ -61,6 +61,14 @@ const Entry: FC<IEntryProps> = ({
     </>
   );
 
+  const formClassListSignInAndReset = [
+    'Вход в аккаунт',
+    'Восстановление пароля',
+    'Придумайте новый пароль',
+    'Пароль успешно изменён',
+    'При сохранении пароля произошла ошибка',
+  ];
+
   return (
     <main className={styles.main}>
       {isAboveTabletScreens ? (
@@ -80,15 +88,21 @@ const Entry: FC<IEntryProps> = ({
         <div
           className={classNames(styles.formWrapper, {
             [styles.formWrapper_signUp]: heading === 'Регистрация',
-            [styles.formWrapper_signIn]: heading === 'Вход в аккаунт',
-            [styles.formWrapper_notSignUp]:
-              heading !== 'Регистрация' && heading !== 'Вход в аккаунт',
+            [styles.formWrapper_signInAndReset]:
+              formClassListSignInAndReset.includes(heading),
+            [styles.formWrapper_notSignUpAndSignInAndReset]:
+              !formClassListSignInAndReset.includes(heading) &&
+              heading !== 'Регистрация',
           })}
         >
           <h2
             className={classNames(styles.heading, {
               [styles.heading_notSignUp]:
-                heading !== 'Регистрация' && heading !== 'Вход в аккаунт',
+                heading !== 'Регистрация' &&
+                heading !== 'Вход в аккаунт' &&
+                (heading !== 'Восстановление пароля' ||
+                  buttonType === 'button') &&
+                heading !== 'Придумайте новый пароль',
             })}
           >
             {heading}
diff --git a/src/pages/reset-password-confirmation/reset-password-confirmation.module.scss b/src/pages/reset-password-confirmation/reset-password-confirmation.module.scss
index fc6a045..307a4b0 100644
--- a/src/pages/reset-password-confirmation/reset-password-confirmation.module.scss
+++ b/src/pages/reset-password-confirmation/reset-password-confirmation.module.scss
@@ -1,11 +1,36 @@
+@import 'assets/styles/abstracts/variables/media-queries';
+
 .content {
   display: flex;
   flex-direction: column;
   row-gap: 12px;
   margin-bottom: 24px;
 
+  @media screen and (max-width: calc($media-desktop-medium - 1px)) {
+    margin-bottom: 20px;
+  }
+
+  @media screen and (max-width: $media-tablet-large) {
+    row-gap: 28px;
+    margin-bottom: 36px;
+  }
+
+  > div > label {
+    @media screen and (max-width: calc($media-desktop-medium - 1px)) {
+      display: block;
+    }
+  }
+
   &--response {
     align-items: center;
-    margin: 26px 0 58px;
+    margin: 68px 0 58px;
+
+    @media screen and (max-width: calc($media-desktop-medium - 1px)) {
+      margin: 44px 0 46px;
+    }
+
+    @media screen and (max-width: $media-tablet-large) {
+      margin-bottom: 36px;
+    }
   }
 }
diff --git a/src/pages/reset-password/reset-password.module.scss b/src/pages/reset-password/reset-password.module.scss
index a56a210..d62a0df 100644
--- a/src/pages/reset-password/reset-password.module.scss
+++ b/src/pages/reset-password/reset-password.module.scss
@@ -1,6 +1,8 @@
 @import 'assets/styles/abstracts/variables/colors';
 @import 'assets/styles/abstracts/variables/fonts';
 @import 'assets/styles/abstracts/placeholders';
+@import 'assets/styles/abstracts/variables/media-queries';
+@import 'assets/styles/abstracts/functions';
 
 .content,
 .iconWrapper {
@@ -11,11 +13,45 @@
 .content {
   row-gap: 12px;
   margin-bottom: 24px;
+
+  @media screen and (max-width: calc($media-desktop-medium - 1px)) {
+    row-gap: 6px;
+    margin-bottom: 16px;
+  }
+
+  @media screen and (max-width: $media-tablet-large) {
+    row-gap: 12px;
+    margin-bottom: 42px;
+  }
 }
 
 .instruction {
   @extend %text-size-large;
   color: $color-neutral-500;
+
+  @media screen and (max-width: calc($media-desktop-large - 1px)) {
+    font-size: calc-fluid-element(
+      calc($font-size-text-medium * 10),
+      calc($font-size-text-large * 10),
+      $media-desktop-small,
+      $media-desktop-large
+    );
+  }
+
+  @media screen and (max-width: calc($media-desktop-medium - 1px)) {
+    line-height: $font-line-height-text-medium;
+    letter-spacing: $font-letter-spacing-main;
+  }
+
+  @media screen and (max-width: calc($media-desktop-small - 1px)) {
+    font-size: $font-size-text-medium;
+  }
+
+  &_success {
+    @media screen and (max-width: $media-tablet-large) {
+      text-align: center;
+    }
+  }
 }
 
 .iconWrapper {
@@ -23,8 +59,33 @@
   margin: 28px 0 16px;
   min-height: 235px;
 
+  @media screen and (max-width: calc($media-desktop-large - 1px)) {
+    min-height: calc-fluid-element(
+      172px,
+      235px,
+      $media-desktop-small,
+      $media-desktop-large
+    );
+  }
+
+  @media screen and (max-width: calc($media-desktop-medium - 1px)) {
+    margin: 20px 0 0;
+  }
+
+  @media screen and (max-width: calc($media-desktop-small - 1px)) {
+    min-height: 172px;
+  }
+
+  @media screen and (max-width: $media-tablet-large) {
+    margin: 46px 0 60px;
+  }
+
   div {
     margin-right: 8%;
+
+    @media screen and (max-width: calc($media-desktop-medium - 1px)) {
+      margin-right: 0;
+    }
   }
 }
 
@@ -32,4 +93,8 @@
   display: flex;
   justify-content: center;
   margin-top: 30px;
+
+  @media screen and (max-width: calc($media-desktop-medium - 1px)) {
+    margin-top: 26px;
+  }
 }
diff --git a/src/pages/reset-password/reset-password.tsx b/src/pages/reset-password/reset-password.tsx
index 30a7353..2ebda64 100644
--- a/src/pages/reset-password/reset-password.tsx
+++ b/src/pages/reset-password/reset-password.tsx
@@ -9,6 +9,7 @@ import Button from 'shared/buttons/button/button';
 import { resetPassword } from 'utils/api';
 import { schemaEmail } from 'utils/data/validation/yup-schema';
 import { filterFormValues } from 'utils/functions/filter-form-values';
+import classNames from 'classnames';
 import routes from 'utils/routes';
 import styles from './reset-password.module.scss';
 
@@ -63,7 +64,7 @@ export const ResetPasswordPage = () => {
   const initialState = (
     <>
       <p className={styles.instruction}>
-        Введите email, который вы использовали при&nbsp;регистрации
+        Введите email, который вы&nbsp;использовали при&nbsp;регистрации
       </p>
       <Input
         name="email"
@@ -83,8 +84,9 @@ export const ResetPasswordPage = () => {
 
   const successState = (
     <>
-      <p className={styles.instruction}>
-        Мы отправили инструкцию по восстановлению пароля на указанную почту
+      <p className={classNames(styles.instruction, styles.instruction_success)}>
+        Мы отправили инструкцию по&nbsp;восстановлению пароля на&nbsp;указанную
+        почту
       </p>
       <div className={styles.iconWrapper}>
         <MailWithIcon hasStatusIcon statusIcon="success" />
diff --git a/src/shared/buttons/button/button.module.scss b/src/shared/buttons/button/button.module.scss
index f36b837..0a070b4 100644
--- a/src/shared/buttons/button/button.module.scss
+++ b/src/shared/buttons/button/button.module.scss
@@ -33,7 +33,7 @@
   }
 
   &--small {
-    padding: 12px 63px;
+    padding: 12px 38px;
   }
 
   &--medium {
@@ -66,7 +66,6 @@
   justify-content: center;
   align-items: center;
   column-gap: 4.5px;
-  text-wrap: nowrap;
 }
 
 .button--primary {