feat(security): update security center with warnings and new styles

packages/blockchain-wallet-v4-frontend/src/scenes/SecurityCenter/BasicSecurity/EmailAddress/ChangeEmailSteps/index.js

@@ -1,13 +1,14 @@
-import { Button, Text } from 'blockchain-info-components'
 import { Field } from 'redux-form'
 import { FormattedHTMLMessage, FormattedMessage } from 'react-intl'
-import { SecuritySummary } from 'components/Security'
-import { TextBox } from 'components/Form'
 import React from 'react'
 import styled from 'styled-components'
 
+import { Button, Text } from 'blockchain-info-components'
+import { TextBox } from 'components/Form'
 import { validEmail } from 'services/FormHelper'
 
+import { SecuritySummary } from '../../../components'
+
 const ChangeEmailWrapper = styled.div`
   width: 100%;
 `

packages/blockchain-wallet-v4-frontend/src/scenes/SecurityCenter/BasicSecurity/EmailAddress/template.error.js

@@ -1,13 +1,15 @@
 import { FormattedMessage } from 'react-intl'
+import React from 'react'
+
+import { Text } from 'blockchain-info-components'
+
 import {
   SecurityComponent,
   SecurityContainer,
   SecurityDescription,
   SecurityHeader,
   SecuritySummary
-} from 'components/Security'
-import { Text } from 'blockchain-info-components'
-import React from 'react'
+} from '../../components'
 
 const EmailAddress = props => {
   const { message } = props

packages/blockchain-wallet-v4-frontend/src/scenes/SecurityCenter/BasicSecurity/EmailAddress/template.loading.js

@@ -1,15 +1,17 @@
-import { FlatLoader } from 'blockchain-info-components'
 import { FormattedMessage } from 'react-intl'
+import React from 'react'
+
+import { FlatLoader } from 'blockchain-info-components'
+
 import {
   SecurityComponent,
   SecurityContainer,
   SecurityDescription,
   SecurityHeader,
   SecuritySummary
-} from 'components/Security'
-import React from 'react'
+} from '../../components'
 
-const EmailAddress = props => {
+const EmailAddress = () => {
   return (
     <SecurityContainer>
       <SecuritySummary>

packages/blockchain-wallet-v4-frontend/src/scenes/SecurityCenter/BasicSecurity/EmailAddress/template.success.js

@@ -1,6 +1,12 @@
 /* stylelint-disable */
-import { Button, Text } from 'blockchain-info-components'
 import { FormattedHTMLMessage, FormattedMessage } from 'react-intl'
+import { reduxForm } from 'redux-form'
+import React from 'react'
+import styled from 'styled-components'
+
+import { Button, Text } from 'blockchain-info-components'
+import media from 'services/ResponsiveService'
+
 import {
   IconContainer,
   SecurityComponent,
@@ -9,12 +15,8 @@ import {
   SecurityHeader,
   SecurityIcon,
   SecuritySummary
-} from 'components/Security'
-import { reduxForm } from 'redux-form'
+} from '../../components'
 import ChangeEmailSteps from './ChangeEmailSteps'
-import media from 'services/ResponsiveService'
-import React from 'react'
-import styled from 'styled-components'
 
 const EmailExplanation = styled.div``
 const ChangeEmailText = styled(Text)`
@@ -183,7 +185,7 @@ const EmailAddress = props => {
       </IconAndHeaderContainer>
       <EmailSecurityComponent>
         {uiHelper() && !verified ? (
-          <React.Fragment>
+          <>
             <EmailButton nature='primary' onClick={props.handleVerifyClick}>
               <FormattedMessage
                 id='scenes.security.email.settings.updateform.resendemail'
@@ -197,24 +199,23 @@ const EmailAddress = props => {
               data-e2e='changeYourEmailLink'
             >
               <FormattedMessage
-                id='scenes.security.email.upateform.changetext'
-                defaultMessage='Change Your Email'
+                id='scenes.security.email.updateform.change'
+                defaultMessage='Change Email'
               />
             </ChangeEmailText>
-          </React.Fragment>
+          </>
         ) : null}
         {uiHelper() && verified ? (
-          <Text
-            color='blue600'
-            size='13px'
-            style={{ cursor: 'pointer' }}
+          <Button
+            nature='primary'
             onClick={props.handleChangeEmailView}
+            data-e2e='changeEmailButton'
           >
             <FormattedMessage
-              id='scenes.security.email.settings.updateform.changeyouremail'
-              defaultMessage='Change Your Email'
+              id='scenes.security.email.settings.updateform.change'
+              defaultMessage='Change Email'
             />
-          </Text>
+          </Button>
         ) : null}
       </EmailSecurityComponent>
       <FieldsContainer>

packages/blockchain-wallet-v4-frontend/src/scenes/SecurityCenter/BasicSecurity/TwoStepVerification/Choices/index.js

@@ -1,11 +1,11 @@
 /* stylelint-disable */
-
 import { FormattedMessage } from 'react-intl'
-import { Icon, Image, Text } from 'blockchain-info-components'
-import media from 'services/ResponsiveService'
 import React from 'react'
 import styled from 'styled-components'
 
+import { Icon, Image, Text } from 'blockchain-info-components'
+import media from 'services/ResponsiveService'
+
 const Choice = styled.div`
   display: flex;
   flex-direction: row;

packages/blockchain-wallet-v4-frontend/src/scenes/SecurityCenter/BasicSecurity/TwoStepVerification/GoogleAuth/index.js

@@ -1,11 +1,13 @@
-import { actions } from 'data'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { formValueSelector } from 'redux-form'
+import React from 'react'
+
+import { actions } from 'data'
+
 import { getData } from './selectors'
 import Error from './template.error'
 import Loading from './template.loading'
-import React from 'react'
 import Success from './template.success'
 
 class GoogleAuthContainer extends React.PureComponent {

packages/blockchain-wallet-v4-frontend/src/scenes/SecurityCenter/BasicSecurity/TwoStepVerification/GoogleAuth/template.error.js

@@ -1,13 +1,15 @@
 import { FormattedMessage } from 'react-intl'
+import React from 'react'
+
+import { Text } from 'blockchain-info-components'
+
 import {
   SecurityComponent,
   SecurityContainer,
   SecurityDescription,
   SecurityHeader,
   SecuritySummary
-} from 'components/Security'
-import { Text } from 'blockchain-info-components'
-import React from 'react'
+} from '../../../components'
 
 const EmailAddress = props => {
   const { message } = props

packages/blockchain-wallet-v4-frontend/src/scenes/SecurityCenter/BasicSecurity/TwoStepVerification/GoogleAuth/template.loading.js

@@ -1,15 +1,17 @@
-import { FlatLoader } from 'blockchain-info-components'
 import { FormattedMessage } from 'react-intl'
+import React from 'react'
+
+import { FlatLoader } from 'blockchain-info-components'
+
 import {
   SecurityComponent,
   SecurityContainer,
   SecurityDescription,
   SecurityHeader,
   SecuritySummary
-} from 'components/Security'
-import React from 'react'
+} from '../../../components'
 
-const EmailAddress = props => {
+const EmailAddress = () => {
   return (
     <SecurityContainer>
       <SecuritySummary>

packages/blockchain-wallet-v4-frontend/src/scenes/SecurityCenter/BasicSecurity/TwoStepVerification/GoogleAuth/template.success.js

@@ -1,15 +1,15 @@
 /* stylelint-disable */
-
-import { Button, Text } from 'blockchain-info-components'
 import { Field, reduxForm } from 'redux-form'
 import { FormattedMessage } from 'react-intl'
+import PropTypes from 'prop-types'
+import React from 'react'
+import styled from 'styled-components'
+
+import { Button, Text } from 'blockchain-info-components'
 import { required } from 'services/FormHelper'
 import { spacing } from 'services/StyleService'
 import { TextBox } from 'components/Form'
-import PropTypes from 'prop-types'
 import QRCodeWrapper from 'components/QRCodeWrapper'
-import React from 'react'
-import styled from 'styled-components'
 
 const AuthenticatorSummary = styled.div`
   width: 100%;

packages/blockchain-wallet-v4-frontend/src/scenes/SecurityCenter/BasicSecurity/TwoStepVerification/SMS/index.js

@@ -1,12 +1,12 @@
-import { actions } from 'data'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { formValueSelector } from 'redux-form'
-import { getData } from './selectors'
-import Error from './template.error'
-import Loading from './template.loading'
 import React from 'react'
-import Success from './template.success'
+
+import { actions } from 'data'
+
+import { getData } from './selectors'
+import Sms from './template'
 
 class SmsAuthContainer extends React.PureComponent {
   constructor (props) {
@@ -70,11 +70,11 @@ class SmsAuthContainer extends React.PureComponent {
   }
 
   render () {
-    const { data, verificationCode, goBack, ...rest } = this.props
+    const { data, verificationCode, goBack } = this.props
 
     return data.cata({
       Success: value => (
-        <Success
+        <Sms
           data={value}
           handleClick={this.handleClick}
           onSubmit={this.onSubmit}
@@ -84,9 +84,9 @@ class SmsAuthContainer extends React.PureComponent {
           code={verificationCode}
         />
       ),
-      Failure: message => <Error {...rest} message={message} />,
-      Loading: () => <Loading {...rest} />,
-      NotAsked: () => <Loading {...rest} />
+      Failure: () => null,
+      Loading: () => null,
+      NotAsked: () => null
     })
   }
 }

packages/blockchain-wallet-v4-frontend/src/scenes/SecurityCenter/BasicSecurity/TwoStepVerification/Yubikey/index.js

@@ -1,11 +1,11 @@
-import { actions } from 'data'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
-import { getData } from './selectors'
-import Error from './template.error'
-import Loading from './template.loading'
 import React from 'react'
-import Success from './template.success'
+
+import { actions } from 'data'
+
+import { getData } from './selectors'
+import Yubikey from './template'
 
 class YubikeyContainer extends React.PureComponent {
   constructor (props) {
@@ -47,11 +47,9 @@ class YubikeyContainer extends React.PureComponent {
   }
 
   render () {
-    const { data, ...rest } = this.props
-
-    return data.cata({
+    return this.props.data.cata({
       Success: value => (
-        <Success
+        <Yubikey
           data={value}
           handleClick={this.handleClick}
           onSubmit={this.onSubmit}
@@ -61,9 +59,9 @@ class YubikeyContainer extends React.PureComponent {
           uiState={this.state}
         />
       ),
-      Failure: message => <Error {...rest} message={message} />,
-      Loading: () => <Loading {...rest} />,
-      NotAsked: () => <Loading {...rest} />
+      Failure: () => null,
+      Loading: () => null,
+      NotAsked: () => null
     })
   }
 }

packages/blockchain-wallet-v4-frontend/src/scenes/SecurityCenter/BasicSecurity/TwoStepVerification/template.error.js

@@ -1,14 +1,16 @@
 import { FormattedMessage } from 'react-intl'
+import React from 'react'
+
+import { Text } from 'blockchain-info-components'
+
 import {
   SecurityComponent,
   SecurityContainer,
   SecurityDescription,
   SecurityHeader,
   SecurityIcon,
   SecuritySummary
-} from 'components/Security'
-import { Text } from 'blockchain-info-components'
-import React from 'react'
+} from '../../components'
 
 const TwoStepVerification = props => {
   const { message } = props

packages/blockchain-wallet-v4-frontend/src/scenes/SecurityCenter/BasicSecurity/TwoStepVerification/template.loading.js

@@ -1,16 +1,18 @@
-import { FlatLoader, Text } from 'blockchain-info-components'
 import { FormattedMessage } from 'react-intl'
+import React from 'react'
+
+import { FlatLoader, Text } from 'blockchain-info-components'
+
 import {
   SecurityComponent,
   SecurityContainer,
   SecurityDescription,
   SecurityHeader,
   SecurityIcon,
   SecuritySummary
-} from 'components/Security'
-import React from 'react'
+} from '../../components'
 
-const TwoStepVerification = props => {
+const TwoStepVerification = () => {
   return (
     <SecurityContainer>
       <SecurityIcon name='lock' enabled={false} />

packages/blockchain-wallet-v4-frontend/src/scenes/SecurityCenter/BasicSecurity/TwoStepVerification/template.success.js

@@ -1,7 +1,15 @@
 /* stylelint-disable */
+import { FormattedMessage } from 'react-intl'
+import { pulse } from 'react-animations'
+import { reduxForm } from 'redux-form'
+import PropTypes from 'prop-types'
+import React, { Fragment } from 'react'
+import styled, { css, keyframes } from 'styled-components'
 
 import { Button, Link, Text } from 'blockchain-info-components'
-import { FormattedMessage } from 'react-intl'
+import { spacing } from 'services/StyleService'
+import media from 'services/ResponsiveService'
+
 import {
   IconContainer,
   SecurityComponent,
@@ -11,17 +19,10 @@ import {
   SecurityIcon,
   SecuritySummary,
   SecurityTip
-} from 'components/Security'
-import { pulse } from 'react-animations'
-import { reduxForm } from 'redux-form'
-import { spacing } from 'services/StyleService'
+} from '../../components'
 import Choices from './Choices'
 import GoogleAuth from './GoogleAuth'
-import media from 'services/ResponsiveService'
-import PropTypes from 'prop-types'
-import React, { Fragment } from 'react'
 import SmsAuth from './SMS'
-import styled, { css, keyframes } from 'styled-components'
 import Yubikey from './Yubikey'
 
 const pulseFrames = keyframes`${pulse}`