fix(register): autofocus email input

blockchain · Apr 20, 2020 · 7ec2073 · 7ec2073
1 parent cac46c3
commit 7ec2073
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 26 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Register/SignupForm/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Register/SignupForm/index.tsx
@@ -42,22 +42,20 @@ const isSupportedBrowser = browser.satisfies({
   vivaldi: '>2'
 })
 
-const RegisterForm = styled(Form)<{ showForm: boolean }>`
-  margin-top: ${props => (props.showForm ? '20px' : '0')};
-  max-height: ${props => (props.showForm ? '26rem' : '0')};
+const RegisterForm = styled(Form)`
+  margin-top: 20px;
+  max-height: 26rem;
 
   > div * {
-    max-height: ${props => (props.showForm ? '26rem' : '0')};
-    opacity: ${props => (props.showForm ? '1' : '0')};
-    z-index: ${props => (props.showForm ? '1' : '-1')};
+    max-height: 26rem;
+    opacity: 1;
+    z-index: 1;
     transition: all 0.5s ease;
   }
 `
-
 const BrowserWarning = styled.div`
   margin-bottom: 10px;
 `
-
 const PasswordTip = styled(Text)`
   margin-top: 4px;
 `
@@ -74,11 +72,11 @@ const validStrongPassword = value =>
         />
       )
 
-const SignupForm = ({ handleSubmit, password, passwordLength, showForm }) => {
+const SignupForm = ({ handleSubmit, password, passwordLength }) => {
   // @ts-ignore
   let passwordScore = has('zxcvbn', window) ? window.zxcvbn(password).score : 0
   return (
-    <RegisterForm override onSubmit={handleSubmit} showForm={showForm}>
+    <RegisterForm override onSubmit={handleSubmit}>
       {!isSupportedBrowser && (
         <BrowserWarning>
           <Banner type='warning'>
@@ -98,6 +96,7 @@ const SignupForm = ({ handleSubmit, password, passwordLength, showForm }) => {
             />
           </FormLabel>
           <Field
+            autoFocus
             bgColor='grey000'
             component={TextBox}
             data-e2e='signupEmail'

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Register/template.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Register/template.tsx
@@ -131,10 +131,6 @@ const ExchangeButton = styled(Button)`
   background-color: ${props => props.theme.black};
   position: relative;
   border: none;
-
-  &:hover {
-    background-color: ${props => props.theme.grey900};
-  }
 `
 
 const TabIcon = styled(Icon)`
@@ -162,17 +158,15 @@ const AppButtons = styled.footer<{ showForm: boolean }>`
   align-items: center;
   text-align: center;
   width: 100%;
+  max-height: ${props => (props.showForm ? '5.25rem' : '0')};
+  visibility: ${props => (props.showForm ? 'visible' : 'hidden')};
+  transition: all 0.5s ease;
   ${media.mobile`
     img {
       height: auto;
       width: 40%;
     }
-  `}
-
-  max-height: ${props => (props.showForm ? '5.25rem' : '0')};
-  visibility: ${props => (props.showForm ? 'visible' : 'hidden')};
-  transition: all .5s ease;
-
+  `};
 `
 const Bottom = styled.div`
   margin: 2rem 0 0;
@@ -268,12 +262,13 @@ const Register = ({
               </InfoItem>
             </CardInfo>
 
-            <SignupForm
-              handleSubmit={handleSubmit}
-              password={password}
-              passwordLength={passwordLength}
-              showForm={showForm}
-            />
+            {showForm && (
+              <SignupForm
+                handleSubmit={handleSubmit}
+                password={password}
+                passwordLength={passwordLength}
+              />
+            )}
 
             <Button
               data-e2e='signupButton'