Merge pull request #3302 from benjiwheeler/join-flow-password-font-size

make password font size large, if password hidden
This commit is contained in:
Benjamin Wheeler 2019-08-28 10:10:59 -04:00 committed by GitHub
commit 0937b40857
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 14 additions and 3 deletions

View file

@ -5,7 +5,7 @@
border-radius: .5rem;
background-color: $ui-white;
margin-bottom: .5rem;
transition: all .5s ease;
transition: all .5s ease, font-size 0s;
border: 1px solid $active-gray;
padding: 0 1rem;
color: $type-gray;
@ -15,6 +15,7 @@
box-shadow: 0 0 0 .25rem $ui-blue-25percent;
outline: none;
border: 1px solid $ui-blue;
transition: all .5s ease, font-size 0s;
}
&.fail {

View file

@ -13,6 +13,10 @@
}
}
.join-flow-input-password {
font-size: 1.5rem;
}
.join-flow-password-confirm {
margin-bottom: .6875rem;
}

View file

@ -176,7 +176,9 @@ class UsernameStep extends React.Component {
</div>
<FormikInput
className={classNames(
'join-flow-input'
'join-flow-input',
{'join-flow-input-password':
!values.showPassword && values.password.length > 0}
)}
error={errors.password}
id="password"
@ -201,7 +203,11 @@ class UsernameStep extends React.Component {
className={classNames(
'join-flow-input',
'join-flow-password-confirm',
{fail: errors.passwordConfirm}
{
'join-flow-input-password':
!values.showPassword && values.passwordConfirm.length > 0,
'fail': errors.passwordConfirm
}
)}
error={errors.passwordConfirm}
id="passwordConfirm"