scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-30 02:56:20 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

make password font size large, if password hidden

Browse source
This commit is contained in:
Ben Wheeler 2019-08-27 16:07:31 -04:00
parent f8b901844b
commit 9f5dc9928f
3 changed files with 14 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/components/formik-forms/formik-input.scss
View file

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

4
src/components/join-flow/join-flow-steps.scss
View file

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

10
src/components/join-flow/username-step.jsx
View file

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