Fixed error messages style

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

@@ -141,9 +141,10 @@
 }
 
 .authInfo {
-  min-height: 5em;
   font-weight: 400;
   font-size: smaller;
+  margin-top: -2em;
+  position: absolute;
 
   .warn {
     color: #a00;
@@ -158,6 +159,7 @@
 
   h4 {
     font-weight: bold;
+    margin-bottom: 1em;
   }
 }
 
@@ -166,11 +168,11 @@
 }
 
 .validationError {
-  position: relative;
-  top: -8px;
+  position: absolute;
+  top: 100%;
   font-size: 12px;
   line-height: 16px;
-  margin-bottom: 8px;
+  margin-top: 0.3em;
 
   &.registerPassword {
     margin-bottom: -32px;

src/components/Nav/AuthModal/ForgotPasswordForm.tsx

@@ -120,13 +120,12 @@ export const ForgotPasswordForm = () => {
             >
               {t('register')}
             </a>
+            <Show when={validationErrors().email}>
+              <div class={styles.validationError}>{validationErrors().email}</div>
+            </Show>
           </div>
         </Show>
 
-        <Show when={validationErrors().email}>
-          <div class={styles.validationError}>{validationErrors().email}</div>
-        </Show>
-
         <div>
           <button class={clsx('button', styles.submitButton)} disabled={isSubmitting()} type="submit">
             {isSubmitting() ? '...' : t('Restore password')}

src/components/Nav/AuthModal/LoginForm.tsx

@@ -160,10 +160,10 @@ export const LoginForm = () => {
             onInput={(event) => handleEmailInput(event.currentTarget.value)}
           />
           <label for="email">{t('Email')}</label>
+          <Show when={validationErrors().email}>
+            <div class={styles.validationError}>{validationErrors().email}</div>
+          </Show>
         </div>
-        <Show when={validationErrors().email}>
-          <div class={styles.validationError}>{validationErrors().email}</div>
-        </Show>
 
         <div
           class={clsx('pretty-form__item', {
@@ -186,11 +186,11 @@ export const LoginForm = () => {
           >
             <Icon class={styles.passwordToggleIcon} name={showPassword() ? 'eye-off' : 'eye'} />
           </button>
+          <Show when={validationErrors().password}>
+            <div class={styles.validationError}>{validationErrors().password}</div>
+          </Show>
         </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')}

src/components/Nav/AuthModal/RegisterForm.tsx

@@ -167,10 +167,11 @@ export const RegisterForm = () => {
                 onInput={(event) => handleNameInput(event.currentTarget.value)}
               />
               <label for="name">{t('Full name')}</label>
+              <Show when={validationErrors().fullName}>
+                <div class={styles.validationError}>{validationErrors().fullName}</div>
+              </Show>
             </div>
-            <Show when={validationErrors().fullName}>
-              <div class={styles.validationError}>{validationErrors().fullName}</div>
-            </Show>
+
             <div
               class={clsx('pretty-form__item', {
                 'pretty-form__item--error': validationErrors().email
@@ -187,10 +188,11 @@ export const RegisterForm = () => {
                 onBlur={handleEmailBlur}
               />
               <label for="email">{t('Email')}</label>
+              <Show when={validationErrors().email}>
+                <div class={styles.validationError}>{validationErrors().email}</div>
+              </Show>
             </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")},{' '}
@@ -226,12 +228,12 @@ export const RegisterForm = () => {
               >
                 <Icon class={styles.passwordToggleIcon} name={showPassword() ? 'eye-off' : 'eye'} />
               </button>
+              <Show when={validationErrors().password}>
+                <div class={clsx(styles.registerPassword, styles.validationError)}>
+                  {validationErrors().password}
+                </div>
+              </Show>
             </div>
-            <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">

src/styles/app.scss

@@ -478,6 +478,7 @@ form {
   }
 
   .pretty-form__item {
+    margin-bottom: 2em;
     position: relative;
 
     input {