feat(signup): add input placeholders, fix mobile password dot sizes

blockchain · May 9, 2022 · c020291 · c020291
1 parent 0159e3a
commit c020291
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/packages/blockchain-info-components/src/Form/PasswordInput.js b/packages/blockchain-info-components/src/Form/PasswordInput.js
@@ -3,6 +3,8 @@ import styled from 'styled-components'
 
 import { selectBorderColor, selectFocusBorderColor } from './helper'
 
+// font family needs to differ between input and placeholder due to Inter font family issue
+// https://github.com/rsms/inter/issues/112
 const BasePasswordInput = styled.input.attrs((props) => ({
   'data-lpignore': props.noLastPass,
   disabled: props.disabled,
@@ -14,17 +16,16 @@ const BasePasswordInput = styled.input.attrs((props) => ({
   width: 100%;
   height: 48px;
   min-height: 48px;
-  padding: 6px 12px;
-  box-sizing: border-box;
+  font-family: sans-serif;
   font-size: 20px;
   font-weight: 500;
+  padding: 6px 12px;
+  box-sizing: border-box;
   color: ${(props) => props.theme.grey800};
   background-color: ${({ theme }) => theme.white};
   background-image: none;
   outline-width: 0;
   user-select: text;
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
-    Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   border-radius: 8px;
   border: ${({ borderColor, theme }) => `1px solid ${theme[borderColor]}`};
 
@@ -36,6 +37,8 @@ const BasePasswordInput = styled.input.attrs((props) => ({
   }
   &::placeholder {
     color: ${(props) => props.theme.grey400};
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+      Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     font-size: 14px;
     font-weight: 500;
   }

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Signup/components/SignupForm/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Signup/components/SignupForm/index.tsx
@@ -84,6 +84,7 @@ const SignupForm = (props: Props) => {
             component={TextBox}
             data-e2e='signupEmail'
             name='email'
+            placeholder='Enter Email'
             validate={[required, validEmail]}
           />
         </FormItem>
@@ -98,6 +99,7 @@ const SignupForm = (props: Props) => {
             component={PasswordBox}
             data-e2e='signupPassword'
             name='password'
+            placeholder='Enter Password'
             validate={[required, validStrongPassword]}
           />
         </FormItem>
@@ -166,6 +168,7 @@ const SignupForm = (props: Props) => {
             component={PasswordBox}
             data-e2e='signupConfirmPassword'
             name='confirmationPassword'
+            placeholder='Enter Password'
             validate={[required, validatePasswordConfirmation]}
           />
         </FormItem>