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: 1em;
+  margin-bottom: 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,57 +66,59 @@ export const ForgotPasswordForm = () => {
   }
 
   return (
-    <form onSubmit={handleSubmit}>
-      <h4>{t('Forgot password?')}</h4>
-      <div class={styles.authSubtitle}>{t('Everything is ok, please give us your email address')}</div>
-      <Show when={submitError()}>
-        <div class={styles.authInfo}>
-          <ul>
-            <li class={styles.warn}>{submitError()}</li>
-          </ul>
-        </div>
-      </Show>
-      <Show when={isUserNotFount()}>
-        <div class={styles.authSubtitle}>
-          {/*TODO: text*/}
-          {t("We can't find you, check email or")}{' '}
-          <a
-            href="#"
-            onClick={(event) => {
-              event.preventDefault()
-              changeSearchParam('mode', 'register')
-            }}
-          >
-            {t('register')}
-          </a>
-        </div>
-      </Show>
-      <Show when={validationErrors().email}>
-        <div class={styles.validationError}>{validationErrors().email}</div>
-      </Show>
-      <div class="pretty-form__item">
-        <input
-          id="email"
-          name="email"
-          autocomplete="email"
-          type="email"
-          value={email()}
-          placeholder={t('Email')}
-          onInput={(event) => handleEmailInput(event.currentTarget.value)}
-        />
-
-        <label for="email">{t('Email')}</label>
-      </div>
-
+    <form onSubmit={handleSubmit} class={clsx(styles.authForm, styles.authFormForgetPassword)}>
       <div>
-        <button class={clsx('button', styles.submitButton)} disabled={isSubmitting()} type="submit">
-          {isSubmitting() ? '...' : t('Restore password')}
-        </button>
-      </div>
-      <div class={styles.authControl}>
-        <span class={styles.authLink} onClick={() => changeSearchParam('mode', 'login')}>
-          {t('I know the password')}
-        </span>
+        <h4>{t('Forgot password?')}</h4>
+        <div class={styles.authSubtitle}>{t('Everything is ok, please give us your email address')}</div>
+        <Show when={submitError()}>
+          <div class={styles.authInfo}>
+            <ul>
+              <li class={styles.warn}>{submitError()}</li>
+            </ul>
+          </div>
+        </Show>
+        <Show when={isUserNotFount()}>
+          <div class={styles.authSubtitle}>
+            {/*TODO: text*/}
+            {t("We can't find you, check email or")}{' '}
+            <a
+              href="#"
+              onClick={(event) => {
+                event.preventDefault()
+                changeSearchParam('mode', 'register')
+              }}
+            >
+              {t('register')}
+            </a>
+          </div>
+        </Show>
+        <Show when={validationErrors().email}>
+          <div class={styles.validationError}>{validationErrors().email}</div>
+        </Show>
+        <div class="pretty-form__item">
+          <input
+            id="email"
+            name="email"
+            autocomplete="email"
+            type="email"
+            value={email()}
+            placeholder={t('Email')}
+            onInput={(event) => handleEmailInput(event.currentTarget.value)}
+          />
+
+          <label for="email">{t('Email')}</label>
+        </div>
+
+        <div>
+          <button class={clsx('button', styles.submitButton)} disabled={isSubmitting()} type="submit">
+            {isSubmitting() ? '...' : t('Restore password')}
+          </button>
+        </div>
+        <div class={styles.authControl}>
+          <span class={styles.authLink} onClick={() => changeSearchParam('mode', 'login')}>
+            {t('I know the password')}
+          </span>
+        </div>
       </div>
     </form>
   )

src/components/Nav/AuthModal/LoginForm.tsx

@@ -115,82 +115,86 @@ export const LoginForm = () => {
   }
 
   return (
-    <form onSubmit={handleSubmit}>
-      <h4>{t('Enter the Discours')}</h4>
-      <Show when={submitError()}>
-        <div class={styles.authInfo}>
-          <div class={styles.warn}>{submitError()}</div>
-          <Show when={isEmailNotConfirmed()}>
-            <a href="#" onClick={handleSendLinkAgainClick}>
-              {t('Send link again')}
-            </a>
-          </Show>
-        </div>
-      </Show>
-      <Show when={isLinkSent()}>
-        <div class={styles.authInfo}>{t('Link sent, check your email')}</div>
-      </Show>
-      <div class="pretty-form__item">
-        <input
-          id="email"
-          name="email"
-          autocomplete="email"
-          type="email"
-          value={email()}
-          placeholder={t('Email')}
-          onInput={(event) => handleEmailInput(event.currentTarget.value)}
-        />
-        <label for="email">{t('Email')}</label>
-      </div>
-      <Show when={validationErrors().email}>
-        <div class={styles.validationError}>{validationErrors().email}</div>
-      </Show>
-
-      <div class="pretty-form__item">
-        <input
-          id="password"
-          name="password"
-          autocomplete="password"
-          type={showPassword() ? 'text' : 'password'}
-          placeholder={t('Password')}
-          onInput={(event) => handlePasswordInput(event.currentTarget.value)}
-        />
-        <label for="password">{t('Password')}</label>
-        <button
-          type="button"
-          class={styles.passwordToggle}
-          onClick={() => setShowPassword(!showPassword())}
-        >
-          <Icon class={styles.passwordToggleIcon} name={showPassword() ? 'eye-off' : 'eye'} />
-        </button>
-      </div>
-
-      <Show when={validationErrors().password}>
-        <div class={styles.validationError}>{validationErrors().password}</div>
-      </Show>
+    <form onSubmit={handleSubmit} class={styles.authForm}>
       <div>
-        <button class={clsx('button', styles.submitButton)} disabled={isSubmitting()} type="submit">
-          {isSubmitting() ? '...' : t('Enter')}
-        </button>
-      </div>
-      <div class={styles.authActions}>
-        <a
-          href="#"
-          onClick={(ev) => {
-            ev.preventDefault()
-            changeSearchParam('mode', 'forgot-password')
-          }}
-        >
-          {t('Forgot password?')}
-        </a>
+        <h4>{t('Enter the Discours')}</h4>
+        <Show when={submitError()}>
+          <div class={styles.authInfo}>
+            <div class={styles.warn}>{submitError()}</div>
+            <Show when={isEmailNotConfirmed()}>
+              <a href="#" onClick={handleSendLinkAgainClick}>
+                {t('Send link again')}
+              </a>
+            </Show>
+          </div>
+        </Show>
+        <Show when={isLinkSent()}>
+          <div class={styles.authInfo}>{t('Link sent, check your email')}</div>
+        </Show>
+        <div class="pretty-form__item">
+          <input
+            id="email"
+            name="email"
+            autocomplete="email"
+            type="email"
+            value={email()}
+            placeholder={t('Email')}
+            onInput={(event) => handleEmailInput(event.currentTarget.value)}
+          />
+          <label for="email">{t('Email')}</label>
+        </div>
+        <Show when={validationErrors().email}>
+          <div class={styles.validationError}>{validationErrors().email}</div>
+        </Show>
+
+        <div class="pretty-form__item">
+          <input
+            id="password"
+            name="password"
+            autocomplete="password"
+            type={showPassword() ? 'text' : 'password'}
+            placeholder={t('Password')}
+            onInput={(event) => handlePasswordInput(event.currentTarget.value)}
+          />
+          <label for="password">{t('Password')}</label>
+          <button
+            type="button"
+            class={styles.passwordToggle}
+            onClick={() => setShowPassword(!showPassword())}
+          >
+            <Icon class={styles.passwordToggleIcon} name={showPassword() ? 'eye-off' : 'eye'} />
+          </button>
+        </div>
+
+        <Show when={validationErrors().password}>
+          <div class={styles.validationError}>{validationErrors().password}</div>
+        </Show>
+        <div>
+          <button class={clsx('button', styles.submitButton)} disabled={isSubmitting()} type="submit">
+            {isSubmitting() ? '...' : t('Enter')}
+          </button>
+        </div>
+        <div class={styles.authActions}>
+          <a
+            href="#"
+            onClick={(ev) => {
+              ev.preventDefault()
+              changeSearchParam('mode', 'forgot-password')
+            }}
+          >
+            {t('Forgot password?')}
+          </a>
+        </div>
       </div>
 
-      <SocialProviders />
+      <div>
+        <SocialProviders />
 
-      <div class={styles.authControl}>
-        <span class={styles.authLink} onClick={() => changeSearchParam('mode', 'register')}>
-          {t('I have no account yet')}
-        </span>
+        <div class={styles.authControl}>
+          <span class={styles.authLink} onClick={() => changeSearchParam('mode', 'register')}>
+            {t('I have no account yet')}
+          </span>
+        </div>
       </div>
     </form>
   )

src/components/Nav/AuthModal/RegisterForm.tsx

@@ -134,87 +134,91 @@ export const RegisterForm = () => {
   return (
     <>
       <Show when={!isSuccess()}>
-        <form onSubmit={handleSubmit}>
-          <h4>{t('Create account')}</h4>
-          <Show when={submitError()}>
-            <div class={styles.authInfo}>
-              <ul>
-                <li class={styles.warn}>{submitError()}</li>
-              </ul>
+        <form onSubmit={handleSubmit} class={styles.authForm}>
+          <div>
+            <h4>{t('Create account')}</h4>
+            <Show when={submitError()}>
+              <div class={styles.authInfo}>
+                <ul>
+                  <li class={styles.warn}>{submitError()}</li>
+                </ul>
+              </div>
+            </Show>
+            <div class="pretty-form__item">
+              <input
+                name="fullName"
+                type="text"
+                placeholder={t('Full name')}
+                autocomplete=""
+                onInput={(event) => handleNameInput(event.currentTarget.value)}
+              />
+              <label for="fullName">{t('Full name')}</label>
             </div>
-          </Show>
-          <div class="pretty-form__item">
-            <input
-              name="fullName"
-              type="text"
-              placeholder={t('Full name')}
-              autocomplete=""
-              onInput={(event) => handleNameInput(event.currentTarget.value)}
-            />
-            <label for="fullName">{t('Full name')}</label>
-          </div>
-          <Show when={validationErrors().name}>
-            <div class={styles.validationError}>{validationErrors().name}</div>
-          </Show>
-          <div class="pretty-form__item">
-            <input
-              id="email"
-              name="email"
-              autocomplete="email"
-              type="email"
-              value={email()}
-              placeholder={t('Email')}
-              onInput={(event) => handleEmailInput(event.currentTarget.value)}
-              onBlur={handleEmailBlur}
-            />
-            <label for="email">{t('Email')}</label>
-          </div>
-          <Show when={validationErrors().email}>
-            <div class={styles.validationError}>{validationErrors().email}</div>
-          </Show>
-          <Show when={emailChecks()[email()]}>
-            <div class={styles.validationError}>
-              {t("This email is already taken. If it's you")},{' '}
-              <a
-                href="#"
-                onClick={(event) => {
-                  event.preventDefault()
-                  changeSearchParam('mode', 'login')
-                }}
-              >
-                {t('enter')}
-              </a>
+            <Show when={validationErrors().name}>
+              <div class={styles.validationError}>{validationErrors().name}</div>
+            </Show>
+            <div class="pretty-form__item">
+              <input
+                id="email"
+                name="email"
+                autocomplete="email"
+                type="email"
+                value={email()}
+                placeholder={t('Email')}
+                onInput={(event) => handleEmailInput(event.currentTarget.value)}
+                onBlur={handleEmailBlur}
+              />
+              <label for="email">{t('Email')}</label>
             </div>
-          </Show>
-          <div class="pretty-form__item">
-            <input
-              id="password"
-              name="password"
-              autocomplete="current-password"
-              type="password"
-              placeholder={t('Password')}
-              onInput={(event) => handlePasswordInput(event.currentTarget.value)}
-            />
-            <label for="password">{t('Password')}</label>
-          </div>
-          <Show when={validationErrors().password}>
-            <div class={clsx(styles.registerPassword, styles.validationError)}>
-              {validationErrors().password}
+            <Show when={validationErrors().email}>
+              <div class={styles.validationError}>{validationErrors().email}</div>
+            </Show>
+            <Show when={emailChecks()[email()]}>
+              <div class={styles.validationError}>
+                {t("This email is already taken. If it's you")},{' '}
+                <a
+                  href="#"
+                  onClick={(event) => {
+                    event.preventDefault()
+                    changeSearchParam('mode', 'login')
+                  }}
+                >
+                  {t('enter')}
+                </a>
+              </div>
+            </Show>
+            <div class="pretty-form__item">
+              <input
+                id="password"
+                name="password"
+                autocomplete="current-password"
+                type="password"
+                placeholder={t('Password')}
+                onInput={(event) => handlePasswordInput(event.currentTarget.value)}
+              />
+              <label for="password">{t('Password')}</label>
             </div>
-          </Show>
+            <Show when={validationErrors().password}>
+              <div class={clsx(styles.registerPassword, styles.validationError)}>
+                {validationErrors().password}
+              </div>
+            </Show>
+
+            <div>
+              <button class={clsx('button', styles.submitButton)} disabled={isSubmitting()} type="submit">
+                {isSubmitting() ? '...' : t('Join')}
+              </button>
+            </div>
+          </div>
 
           <div>
-            <button class={clsx('button', styles.submitButton)} disabled={isSubmitting()} type="submit">
-              {isSubmitting() ? '...' : t('Join')}
-            </button>
-          </div>
+            <SocialProviders />
 
-          <SocialProviders />
-
-          <div class={styles.authControl}>
-            <span class={styles.authLink} onClick={() => changeSearchParam('mode', 'login')}>
-              {t('I have an account')}
-            </span>
+            <div class={styles.authControl}>
+              <span class={styles.authLink} onClick={() => changeSearchParam('mode', 'login')}>
+                {t('I have an account')}
+              </span>
+            </div>
           </div>
         </form>
       </Show>

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

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