Merge pull request #3176 from shujuuu/fix-login-signup-fields-width

fix signup & login input width

Author: raclim

client/modules/User/components/LoginForm.jsx

@@ -55,25 +55,27 @@ function LoginForm() {
                   <label htmlFor="password" className="form__label">
                     {t('LoginForm.Password')}
                   </label>
-                  <button
-                    className="form__eye__icon"
-                    type="button"
-                    onClick={handleVisibility}
-                  >
-                    {showPassword ? (
-                      <AiOutlineEyeInvisible />
-                    ) : (
-                      <AiOutlineEye />
-                    )}
-                  </button>
-                  <input
-                    className="form__input"
-                    aria-label={t('LoginForm.PasswordARIA')}
-                    type={showPassword ? 'text' : 'password'}
-                    id="password"
-                    autoComplete="current-password"
-                    {...field.input}
-                  />
+                  <div className="form__field__password">
+                    <button
+                      className="form__eye__icon"
+                      type="button"
+                      onClick={handleVisibility}
+                    >
+                      {showPassword ? (
+                        <AiOutlineEyeInvisible />
+                      ) : (
+                        <AiOutlineEye />
+                      )}
+                    </button>
+                    <input
+                      className="form__input"
+                      aria-label={t('LoginForm.PasswordARIA')}
+                      type={showPassword ? 'text' : 'password'}
+                      id="password"
+                      autoComplete="current-password"
+                      {...field.input}
+                    />
+                  </div>
                   {field.meta.touched && field.meta.error && (
                     <span className="form-error">{field.meta.error}</span>
                   )}

client/modules/User/components/SignupForm.jsx

@@ -109,25 +109,27 @@ function SignupForm() {
                   <label htmlFor="password" className="form__label">
                     {t('SignupForm.Password')}
                   </label>
-                  <button
-                    className="form__eye__icon"
-                    type="button"
-                    onClick={handleVisibility}
-                  >
-                    {showPassword ? (
-                      <AiOutlineEyeInvisible />
-                    ) : (
-                      <AiOutlineEye />
-                    )}
-                  </button>
-                  <input
-                    className="form__input"
-                    aria-label={t('SignupForm.PasswordARIA')}
-                    type={showPassword ? 'text' : 'password'}
-                    id="password"
-                    autoComplete="new-password"
-                    {...field.input}
-                  />
+                  <div className="form__field__password">
+                    <button
+                      className="form__eye__icon"
+                      type="button"
+                      onClick={handleVisibility}
+                    >
+                      {showPassword ? (
+                        <AiOutlineEyeInvisible />
+                      ) : (
+                        <AiOutlineEye />
+                      )}
+                    </button>
+                    <input
+                      className="form__input"
+                      aria-label={t('SignupForm.PasswordARIA')}
+                      type={showPassword ? 'text' : 'password'}
+                      id="password"
+                      autoComplete="new-password"
+                      {...field.input}
+                    />
+                  </div>
                   {field.meta.touched && field.meta.error && (
                     <span className="form-error">{field.meta.error}</span>
                   )}
@@ -142,25 +144,27 @@ function SignupForm() {
                   <label htmlFor="confirmPassword" className="form__label">
                     {t('SignupForm.ConfirmPassword')}
                   </label>
-                  <button
-                    className="form__eye__icon"
-                    type="button"
-                    onClick={handleConfirmVisibility}
-                  >
-                    {showConfirmPassword ? (
-                      <AiOutlineEyeInvisible />
-                    ) : (
-                      <AiOutlineEye />
-                    )}
-                  </button>
-                  <input
-                    className="form__input"
-                    type={showConfirmPassword ? 'text' : 'password'}
-                    aria-label={t('SignupForm.ConfirmPasswordARIA')}
-                    id="confirmPassword" // Match the id with htmlFor
-                    autoComplete="new-password"
-                    {...field.input}
-                  />
+                  <div className="form__field__password">
+                    <button
+                      className="form__eye__icon"
+                      type="button"
+                      onClick={handleConfirmVisibility}
+                    >
+                      {showConfirmPassword ? (
+                        <AiOutlineEyeInvisible />
+                      ) : (
+                        <AiOutlineEye />
+                      )}
+                    </button>
+                    <input
+                      className="form__input"
+                      type={showConfirmPassword ? 'text' : 'password'}
+                      aria-label={t('SignupForm.ConfirmPasswordARIA')}
+                      id="confirmPassword" // Match the id with htmlFor
+                      autoComplete="new-password"
+                      {...field.input}
+                    />
+                  </div>
                   {field.meta.touched && field.meta.error && (
                     <span className="form-error">{field.meta.error}</span>
                   )}

client/styles/components/_forms.scss

@@ -58,7 +58,7 @@
 }
 
 .form__input {
-  min-width: #{math.div(355, $base-font-size)}rem;
+  min-width: #{math.div(312, $base-font-size)}rem;
   width: 100%;
   height: #{math.div(40, $base-font-size)}rem;
   font-size: #{math.div(16, $base-font-size)}rem;
@@ -73,12 +73,16 @@
   }
 }
 
+.form__field__password {
+  position: relative;
+}
+
 .form__eye__icon {
   font-size: 28px;
-  position: relative;
-  top: 7px;
-  right: -355px;
-  margin-left: -40px;
+  position: absolute;
+  right: 0px;
+  top: 4px;
+  vertical-align: middle;
 }