Fixed auth popup style

public/locales/ru/translation.json

@@ -142,7 +142,7 @@
   "No such account, please try to register": "Такой адрес не найден, попробуйте зарегистрироваться",
   "Nothing here yet": "Здесь пока ничего нет",
   "Nothing is here": "Здесь ничего нет",
-  "Or continue with social network": "Или продолжите через соцсеть",
+  "Or continue with social network": "Или войдите через соцсеть",
   "Or paste a link to an image": "Или вставьте ссылку на изображение",
   "Our regular contributor": "Наш постоянный автор",
   "Paragraphs": "Абзацев",

src/components/Nav/AuthModal/AuthModal.module.scss

@@ -105,20 +105,19 @@
 .auth {
   display: flex;
   flex-direction: column;
-  justify-content: center;
   padding: $container-padding-x;
 
   @include media-breakpoint-up(lg) {
-    padding: 10rem 6rem;
+    padding: 4rem !important;
   }
 }
 
 .submitButton {
   display: block;
   font-weight: 700;
+  margin-top: 32px;
   padding: 1.6rem !important;
   width: 100%;
-  margin-top: 32px;
 }
 
 .authControl {
@@ -129,12 +128,12 @@
 
 .authLink {
   cursor: pointer;
+  @include font-size(1.6rem);
 }
 
 .authSubtitle {
   @include font-size(1.5rem);
-
+  margin-bottom: 1em;
-  margin: 1em;
 }
 
 .authInfo {
@@ -147,6 +146,21 @@
   }
 }
 
+.authForm {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: space-between;
+
+  h4 {
+    font-weight: bold;
+  }
+}
+
+.authFormForgetPassword {
+  justify-content: center;
+}
+
 .validationError {
   position: relative;
   top: -8px;

src/components/Nav/AuthModal/ForgotPasswordForm.tsx

@@ -66,7 +66,8 @@ export const ForgotPasswordForm = () => {
   }
 
   return (
-    <form onSubmit={handleSubmit}>
+    <form onSubmit={handleSubmit} class={clsx(styles.authForm, styles.authFormForgetPassword)}>
+      <div>
         <h4>{t('Forgot password?')}</h4>
         <div class={styles.authSubtitle}>{t('Everything is ok, please give us your email address')}</div>
         <Show when={submitError()}>
@@ -118,6 +119,7 @@ export const ForgotPasswordForm = () => {
             {t('I know the password')}
           </span>
         </div>
+      </div>
     </form>
   )
 }

src/components/Nav/AuthModal/LoginForm.tsx

@@ -115,7 +115,8 @@ export const LoginForm = () => {
   }
 
   return (
-    <form onSubmit={handleSubmit}>
+    <form onSubmit={handleSubmit} class={styles.authForm}>
+      <div>
         <h4>{t('Enter the Discours')}</h4>
         <Show when={submitError()}>
           <div class={styles.authInfo}>
@@ -184,7 +185,9 @@ export const LoginForm = () => {
             {t('Forgot password?')}
           </a>
         </div>
+      </div>
 
+      <div>
         <SocialProviders />
 
         <div class={styles.authControl}>
@@ -192,6 +195,7 @@ export const LoginForm = () => {
             {t('I have no account yet')}
           </span>
         </div>
+      </div>
     </form>
   )
 }

src/components/Nav/AuthModal/RegisterForm.tsx

@@ -134,7 +134,8 @@ export const RegisterForm = () => {
   return (
     <>
       <Show when={!isSuccess()}>
-        <form onSubmit={handleSubmit}>
+        <form onSubmit={handleSubmit} class={styles.authForm}>
+          <div>
             <h4>{t('Create account')}</h4>
             <Show when={submitError()}>
               <div class={styles.authInfo}>
@@ -208,7 +209,9 @@ export const RegisterForm = () => {
                 {isSubmitting() ? '...' : t('Join')}
               </button>
             </div>
+          </div>
 
+          <div>
             <SocialProviders />
 
             <div class={styles.authControl}>
@@ -216,6 +219,7 @@ export const RegisterForm = () => {
                 {t('I have an account')}
               </span>
             </div>
+          </div>
         </form>
       </Show>
       <Show when={isSuccess()}>

src/components/Nav/AuthModal/SocialProviders.module.scss

@@ -1,6 +1,6 @@
 .container {
-  border-bottom: 1px solid #141414;
+  border-bottom: 1px solid #dfdfdf;
-  border-top: 1px solid #141414;
+  border-top: 1px solid #dfdfdf;
   margin-top: 1em;
   padding: 0.8em 0 1em;
 }