feat(adaptive): adaptive for signup activation

src/components/entry/entry.module.scss

@@ -30,6 +30,10 @@
     align-items: flex-start;
   }
 
+  @media screen and (max-width: $media-tablet-large) {
+    padding: 72px 0 0;
+  }
+
   &SignUp {
     padding: 64px 0;
 
@@ -69,25 +73,44 @@
       $media-desktop-small,
       $media-desktop-large
     );
-    padding: calc-fluid-element(
-      32px,
-      48px,
-      $media-desktop-small,
-      $media-desktop-large
-    );
   }
 
   @media screen and (max-width: calc($media-desktop-small - 1px)) {
     max-width: 480px;
-    padding: 32px;
   }
 
   @media screen and (max-width: $media-tablet-large) {
-    max-width: 400px;
+    max-width: 335px;
+    box-sizing: content-box;
   }
 
-  @media screen and (max-width: calc($media-mobile-large - 1px)) {
-    padding: 20px 20px 0;
+  &_signUp {
+    @media screen and (max-width: calc($media-desktop-large - 1px)) {
+      padding: calc-fluid-element(
+        32px,
+        48px,
+        $media-desktop-small,
+        $media-desktop-large
+      );
+    }
+
+    @media screen and (max-width: calc($media-desktop-small - 1px)) {
+      padding: 32px;
+    }
+
+    @media screen and (max-width: calc($media-mobile-large - 1px)) {
+      padding: 20px 20px 0;
+    }
+  }
+
+  &_notSignUp {
+    @media screen and (max-width: $media-tablet-large) {
+      padding-top: 72px;
+    }
+
+    @media screen and (max-width: calc($media-mobile-large - 1px)) {
+      padding: 40px 20px 0;
+    }
   }
 }
 
@@ -119,6 +142,12 @@
   @media screen and (max-width: calc($media-desktop-small - 1px)) {
     font-size: $font-size-heading-3;
   }
+
+  &_notSignUp {
+    @media screen and (max-width: calc($media-tablet-large - 1px)) {
+      text-align: center;
+    }
+  }
 }
 
 .commentary {

src/components/entry/entry.tsx

@@ -77,8 +77,20 @@ const Entry: FC<IEntryProps> = ({
           [styles.columnRightSignUp]: isSignUpForm,
         })}
       >
-        <div className={styles.formWrapper}>
-          <h2 className={styles.heading}>{heading}</h2>
+        <div
+          className={classNames(styles.formWrapper, {
+            [styles.formWrapper_signUp]: heading === 'Регистрация',
+            [styles.formWrapper_notSignUp]: heading !== 'Регистрация',
+          })}
+        >
+          <h2
+            className={classNames(styles.heading, {
+              [styles.heading_notSignUp]:
+                heading !== 'Регистрация' && heading !== 'Вход в аккаунт',
+            })}
+          >
+            {heading}
+          </h2>
           {buttonType === 'submit' ? (
             <form className={styles.form} noValidate onSubmit={onSubmit}>
               {content}

src/pages/sign-up-activation/sign-up-activation.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 {
   display: flex;
@@ -9,6 +11,23 @@
   min-height: 239px;
   margin-bottom: 40px;
 
+  @media screen and (max-width: calc($media-desktop-large - 1px)) {
+    min-height: calc-fluid-element(
+      172px,
+      239px,
+      $media-desktop-small,
+      $media-desktop-large
+    );
+  }
+
+  @media screen and (max-width: calc($media-desktop-small - 1px)) {
+    min-height: 172px;
+  }
+
+  @media screen and (max-width: $media-tablet-large) {
+    margin-bottom: 102px;
+  }
+
   &--response {
     margin-bottom: 0;
 
@@ -20,6 +39,10 @@
   div:first-child {
     margin-right: 8%;
 
+    @media screen and (max-width: calc($media-desktop-medium - 1px)) {
+      margin-right: 0;
+    }
+
     > span {
       position: absolute;
       right: -38px;
@@ -37,4 +60,44 @@
   @extend %text-size-large;
   color: $color-neutral-500;
   margin-bottom: 40px;
+
+  @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: calc-fluid-element(
+      calc($font-size-text-small * 10),
+      calc($font-size-text-medium * 10),
+      $media-tablet-small,
+      $media-desktop-small
+    );
+  }
+
+  @media screen and (max-width: $media-tablet-large) {
+    line-height: $font-line-height-text-small;
+    text-align: center;
+    min-height: 80px;
+    margin-bottom: 48px;
+  }
+
+  @media screen and (max-width: calc($media-tablet-small - 1px)) {
+    font-size: $font-size-text-small;
+  }
+
+  &_responseFalse {
+    @media screen and (max-width: $media-tablet-large) {
+      min-height: 50px;
+    }
+  }
 }

src/pages/sign-up-activation/sign-up-activation.tsx

@@ -34,7 +34,7 @@ export const SignUpActivationPage: FC = (): ReactElement => {
         return {
           content: <MailWithIcon hasStatusIcon statusIcon="success" />,
           heading: 'Email подтверждён',
-          instruction: 'Для продолжения работы войдите в личный кабинет',
+          instruction: 'Для продолжения работы войдите в\u00A0личный кабинет',
           buttonLabel: 'Войти в аккаунт',
           buttonType: 'button',
           onClick: () => navigate(routes.signin, { replace: true }),
@@ -44,7 +44,7 @@ export const SignUpActivationPage: FC = (): ReactElement => {
           content: <MailWithIcon hasStatusIcon statusIcon="fail" />,
           heading: 'В процессе подтверждения email произошла ошибка',
           instruction:
-            'Попробуйте перейти по ссылке ещё раз или повторите регистрацию',
+            'Попробуйте перейти по ссылке ещё раз или\u00A0повторите регистрацию',
           buttonLabel: 'Вернуться к регистрации',
           buttonType: 'button',
           onClick: () => navigate(routes.signup),
@@ -70,7 +70,13 @@ export const SignUpActivationPage: FC = (): ReactElement => {
       onClick={onClick}
     >
       <>
-        <p className={styles.subheading}>{instruction}</p>
+        <p
+          className={classNames(styles.subheading, {
+            [styles.subheading_responseFalse]: responseStatus === false,
+          })}
+        >
+          {instruction}
+        </p>
         <div
           className={classNames(styles.content, {
             [styles[`content--response`]]:

src/pages/sign-up/sign-up.module.scss

@@ -113,9 +113,47 @@
   align-items: center;
   row-gap: 40px;
   margin-bottom: 40px;
+
+  @media screen and (max-width: $media-tablet-large) {
+    row-gap: 48px;
+    margin-bottom: 136px;
+  }
 }
 
 .instruction {
   @extend %text-size-large;
   color: $color-neutral-500;
+  min-height: 80px;
+
+  @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: calc-fluid-element(
+      calc($font-size-text-small * 10),
+      calc($font-size-text-medium * 10),
+      $media-tablet-small,
+      $media-desktop-small
+    );
+  }
+
+  @media screen and (max-width: $media-tablet-large) {
+    line-height: $font-line-height-text-small;
+    text-align: center;
+  }
+
+  @media screen and (max-width: calc($media-tablet-small - 1px)) {
+    font-size: $font-size-text-small;
+  }
 }

src/pages/sign-up/sign-up.tsx

@@ -28,7 +28,7 @@ import styles from './sign-up.module.scss';
 
 const SignUpPage: FC = (): ReactElement => {
   const [hasAgreement, setHasAgreement] = useState(true);
-  const [isSuccess, setIsSuccess] = useState(false);
+  const [isSuccess, setIsSuccess] = useState(true);
 
   const navigate = useNavigate();
   const dispatch = useAppDispatch();

src/shared/buttons/button/button.module.scss

@@ -33,7 +33,7 @@
   }
 
   &--small {
-    padding: 12px 64px;
+    padding: 12px 63px;
   }
 
   &--medium {
@@ -66,6 +66,7 @@
   justify-content: center;
   align-items: center;
   column-gap: 4.5px;
+  text-wrap: nowrap;
 }
 
 .button--primary {

src/shared/mail-with-icon/mail-with-icon.module.scss

@@ -1,13 +1,72 @@
+@import 'assets/styles/abstracts/variables/media-queries';
+@import 'assets/styles/abstracts/functions';
+
 .wrapper {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   width: max-content;
 
+  svg {
+    @media screen and (max-width: calc($media-desktop-large - 1px)) {
+      width: calc-fluid-element(
+        142px,
+        190px,
+        $media-desktop-small,
+        $media-desktop-large
+      );
+      height: calc-fluid-element(
+        140px,
+        188px,
+        $media-desktop-small,
+        $media-desktop-large
+      );
+    }
+
+    @media screen and (max-width: calc($media-desktop-small - 1px)) {
+      width: 142px;
+      height: 140px;
+    }
+  }
+
   svg:nth-child(2) {
     position: absolute;
     right: -44px;
     bottom: -48px;
+
+    @media screen and (max-width: calc($media-desktop-large - 1px)) {
+      width: calc-fluid-element(
+        70px,
+        96px,
+        $media-desktop-small,
+        $media-desktop-large
+      );
+      height: calc-fluid-element(
+        70px,
+        96px,
+        $media-desktop-small,
+        $media-desktop-large
+      );
+      right: calc-fluid-element(
+        -35px,
+        -44px,
+        $media-desktop-small,
+        $media-desktop-large
+      );
+      bottom: calc-fluid-element(
+        -35px,
+        -48px,
+        $media-desktop-small,
+        $media-desktop-large
+      );
+    }
+
+    @media screen and (max-width: calc($media-desktop-small - 1px)) {
+      width: 70px;
+      height: 70px;
+      right: -35px;
+      bottom: -35px;
+    }
   }
 }