style(kyc-form): add new design to kyc for sb users

blockchain · Feb 28, 2020 · 59a8a9f · 59a8a9f
1 parent 9470f51
commit 59a8a9f
Show file tree

Hide file tree

Showing 6 changed files with 260 additions and 87 deletions.
diff --git a/.../blockchain-wallet-v4-frontend/src/components/Form/EmailVerification/EmailVerification.js b/.../blockchain-wallet-v4-frontend/src/components/Form/EmailVerification/EmailVerification.js
@@ -14,9 +14,6 @@ const Row = styled.div`
 `
 
 const InputRow = styled(Row)`
-  button {
-    border-radius: 0;
-  }
   ${media.mobile`
     flex-direction: column;
   `};
@@ -27,15 +24,30 @@ const InputRow = styled(Row)`
   }
 `
 
-export const LoadingButton = ({ loading, children, ...rest }) => (
-  <Button height='48px' disabled={loading} {...rest}>
-    {loading ? (
-      <HeartbeatLoader height='20px' width='20px' color='white' />
-    ) : (
-      children
-    )}
-  </Button>
-)
+const SendButton = styled(Button)`
+  position: absolute;
+  right: 0;
+`
+
+export const LoadingButton = ({ loading, children, send, ...rest }) => {
+  return send ? (
+    <SendButton height='48px' disabled={loading} {...rest}>
+      {loading ? (
+        <HeartbeatLoader height='20px' width='20px' color='white' />
+      ) : (
+        children
+      )}
+    </SendButton>
+  ) : (
+    <Button height='48px' disabled={loading} {...rest}>
+      {loading ? (
+        <HeartbeatLoader height='20px' width='20px' color='white' />
+      ) : (
+        children
+      )}
+    </Button>
+  )
+}
 
 export const ChangeButton = styled(LoadingButton)`
   margin-right: 16px;
@@ -133,16 +145,17 @@ const EmailInput = ({
     <InputRow>
       <TextBox
         errorBottom={errorBottom}
-        placeholder={
-          <FormattedMessage
-            id='components.EmailVerification.placeholder'
-            defaultMessage='Email'
-          />
-        }
+        sendVerificationInput
+        placeholder='Email'
         input={input}
         meta={meta}
       />
-      <LoadingButton nature='primary' onClick={updateEmail} loading={loading}>
+      <LoadingButton
+        nature='primary'
+        onClick={updateEmail}
+        loading={loading}
+        send
+      >
         <FormattedMessage
           id='components.EmailVerification.sendnow'
           defaultMessage='Send Now'

diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Form/TextBox/index.js b/packages/blockchain-wallet-v4-frontend/src/components/Form/TextBox/index.js
@@ -17,7 +17,8 @@ const Error = styled(Text)`
   display: block;
   height: 15px;
   top: ${props => (props.errorBottom ? props.height : '-20px')};
-  right: 0;
+  right: ${({ sendVerificationInput }) =>
+    sendVerificationInput ? '140px' : 0};
 `
 
 const WarningIcon = styled(Icon)`
@@ -27,6 +28,10 @@ const WarningIcon = styled(Icon)`
   top: 14px;
 `
 
+const SendTextInput = styled(TextInput)`
+  padding-right: 152px;
+`
+
 const getErrorState = ({ touched, invalid }) => {
   return touched && invalid ? 'invalid' : 'initial'
 }
@@ -47,31 +52,54 @@ const TextBox = field => {
     maxLength,
     meta,
     noLastPass,
-    placeholder
+    placeholder,
+    sendVerificationInput
   } = field
   const { initial, active, touched, error, warning } = meta
   const errorState = getErrorState(meta)
 
   return (
     <Container className={className} height={height}>
-      <TextInput
-        {...input}
-        active={active}
-        autoComplete={autoComplete}
-        autoFocus={autoFocus}
-        borderRightNone={borderRightNone}
-        center={center}
-        data-e2e={field['data-e2e']}
-        disabled={disabled}
-        disableSpellcheck={disableSpellcheck}
-        errorState={errorState}
-        height={height}
-        icon={icon}
-        initial={initial}
-        maxLength={maxLength}
-        noLastPass={noLastPass}
-        placeholder={placeholder}
-      />
+      {sendVerificationInput ? (
+        <SendTextInput
+          {...input}
+          active={active}
+          autoComplete={autoComplete}
+          autoFocus={autoFocus}
+          borderRightNone={borderRightNone}
+          center={center}
+          data-e2e={field['data-e2e']}
+          disabled={disabled}
+          disableSpellcheck={disableSpellcheck}
+          errorState={errorState}
+          height={height}
+          icon={icon}
+          initial={initial}
+          maxLength={maxLength}
+          noLastPass={noLastPass}
+          placeholder={placeholder}
+        />
+      ) : (
+        <TextInput
+          {...input}
+          active={active}
+          autoComplete={autoComplete}
+          autoFocus={autoFocus}
+          borderRightNone={borderRightNone}
+          center={center}
+          data-e2e={field['data-e2e']}
+          disabled={disabled}
+          disableSpellcheck={disableSpellcheck}
+          errorState={errorState}
+          height={height}
+          icon={icon}
+          initial={initial}
+          maxLength={maxLength}
+          noLastPass={noLastPass}
+          placeholder={placeholder}
+        />
+      )}
+
       {touched && error && (
         <>
           <Error
@@ -81,6 +109,7 @@ const TextBox = field => {
             height={height}
             errorBottom={errorBottom}
             data-e2e='textBoxError'
+            sendVerificationInput={sendVerificationInput}
           >
             {error}
           </Error>

diff --git a/packages/blockchain-wallet-v4-frontend/src/components/IdentityVerification/index.js b/packages/blockchain-wallet-v4-frontend/src/components/IdentityVerification/index.js
@@ -219,9 +219,10 @@ export const FaqFormGroup = styled(FormGroup)`
 
 export const Label = styled.label`
   font-size: 16px;
-  font-weight: 400;
+  font-weight: ${({ simpleBuy, theme }) => (simpleBuy ? '500' : '400')};
   margin-bottom: 12px;
   display: block;
+  color: ${({ simpleBuy, theme }) => (simpleBuy ? theme.grey800 : 'initial')};
 `
 
 export const BackButton = styled(Button)`

diff --git a/.../blockchain-wallet-v4-frontend/src/modals/Exchange/IdentityVerification/Personal/index.js b/.../blockchain-wallet-v4-frontend/src/modals/Exchange/IdentityVerification/Personal/index.js
@@ -103,6 +103,7 @@ class PersonalContainer extends React.PureComponent {
     activeFieldError,
     addressRefetchVisible,
     user,
+    simpleBuyInvited,
     supportedCountries,
     states,
     handleSubmit
@@ -137,6 +138,7 @@ class PersonalContainer extends React.PureComponent {
       editEmail={this.editEmail}
       updateEmail={actions.updateEmail}
       sendEmailVerification={actions.sendEmailVerification}
+      simpleBuyInvited={simpleBuyInvited}
       onPromptForEmailVerification={this.onPromptForEmailVerification}
       onAddressSelect={this.selectAddress}
       onCountrySelect={this.onCountryChange}

diff --git a/...ckchain-wallet-v4-frontend/src/modals/Exchange/IdentityVerification/Personal/selectors.js b/...ckchain-wallet-v4-frontend/src/modals/Exchange/IdentityVerification/Personal/selectors.js
@@ -43,6 +43,14 @@ const getCoinifyUserCountry = state => {
   return userSelectedCountry || profileCountry
 }
 
+// const getSimpleBuyInvited = state => {
+//   const invitedR = selectors.core.settings.getInvitations(state).getOrElse({ simpleBuy: false })
+
+//   const check = invitedR.
+//   console.log(check)
+//   return check
+// }
+
 const isCountryAndStateSelected = state => {
   const country = prop('code', formValSelector(state, 'country'))
   if (!country) return false
@@ -90,6 +98,9 @@ export const getData = state => {
       getUserData
     )(state),
     coinifyUserCountry: getCoinifyUserCountry(state),
-    pathName: selectors.router.getPathname(state)
+    pathName: selectors.router.getPathname(state),
+    simpleBuyInvited: selectors.core.settings
+      .getInvitations(state)
+      .getOrElse({ simpleBuy: false }).simpleBuy
   }
 }