Merge pull request #1250 from NastiaS/ui-polish-branch

add account error step in modal

src/components/Onboarding/steps/GenuineCheck/GenuineCheckErrorPage.js

@@ -5,9 +5,11 @@ import { i } from 'helpers/staticPath'
 
 import type { T } from 'types/common'
 import type { OnboardingState } from 'reducers/onboarding'
+import { urls } from 'config/urls'
 
 import Box from 'components/base/Box'
 import Button from 'components/base/Button'
+import ExternalLinkButton from 'components/base/ExternalLinkButton'
 import TrackPage from 'analytics/TrackPage'
 
 import { Title, Description, OnboardingFooterWrapper } from '../../helperComponents'
@@ -15,7 +17,6 @@ import { Title, Description, OnboardingFooterWrapper } from '../../helperCompone
 type Props = {
   t: T,
   redoGenuineCheck: () => void,
-  contactSupport: () => void,
   onboarding: OnboardingState,
 }
 
@@ -69,7 +70,7 @@ class GenuineCheckErrorPage extends PureComponent<Props, *> {
   }
 
   render() {
-    const { redoGenuineCheck, contactSupport, t } = this.props
+    const { redoGenuineCheck, t } = this.props
     return (
       <Box sticky pt={50}>
         <Box grow alignItems="center" justifyContent="center">
@@ -79,9 +80,12 @@ class GenuineCheckErrorPage extends PureComponent<Props, *> {
           <Button outlineGrey onClick={() => redoGenuineCheck()}>
             {t('app:common.back')}
           </Button>
-          <Button danger onClick={() => contactSupport()} ml="auto">
+          <ExternalLinkButton
-            {t('onboarding:genuineCheck.buttons.contactSupport')}
+            danger
-          </Button>
+            ml="auto"
+            label={t('onboarding:genuineCheck.buttons.contactSupport')}
+            url={urls.contactSupport}
+          />
         </OnboardingFooterWrapper>
       </Box>
     )

src/components/Onboarding/steps/GenuineCheck/index.js

@@ -1,11 +1,9 @@
 // @flow
 
 import React, { PureComponent } from 'react'
-import { openURL } from 'helpers/linking'
 import { connect } from 'react-redux'
 import styled from 'styled-components'
 import { colors } from 'styles/theme'
-import { urls } from 'config/urls'
 
 import { updateGenuineCheck } from 'reducers/onboarding'
 
@@ -143,10 +141,6 @@ class GenuineCheck extends PureComponent<StepProps, State> {
     })
   }
 
-  contactSupport = () => {
-    openURL(urls.contactSupport)
-  }
-
   handlePrevStep = () => {
     const { prevStep, onboarding, jumpStep } = this.props
     onboarding.flowType === 'initializedDevice' ? jumpStep('selectDevice') : prevStep()
@@ -158,7 +152,6 @@ class GenuineCheck extends PureComponent<StepProps, State> {
   renderGenuineFail = () => (
     <GenuineCheckErrorPage
       redoGenuineCheck={this.redoGenuineCheck}
-      contactSupport={this.contactSupport}
       t={this.props.t}
       onboarding={this.props.onboarding}
     />

src/components/RenderError.js

@@ -17,6 +17,7 @@ import Box from 'components/base/Box'
 import Space from 'components/base/Space'
 import Button from 'components/base/Button'
 import ConfirmModal from 'components/base/Modal/ConfirmModal'
+import ExternalLinkButton from 'components/base/ExternalLinkButton'
 import IconTriangleWarning from 'icons/TriangleWarning'
 
 // SERIOUSLY plz refactor to use <ResetButton>
@@ -51,10 +52,6 @@ class RenderError extends PureComponent<
     openURL(urls.githubIssues)
   }
 
-  contact = () => {
-    openURL(urls.contactSupport)
-  }
-
   handleRestart = () => {
     remote.getCurrentWindow().webContents.reloadIgnoringCache()
   }
@@ -96,9 +93,12 @@ class RenderError extends PureComponent<
             {t('app:crash.restart')}
           </Button>
           <ExportLogsBtn withoutAppData={withoutAppData} />
-          <Button small primary onClick={this.contact}>
+          <ExternalLinkButton
-            {t('app:crash.support')}
+            small
-          </Button>
+            primary
+            label={t('app:crash.support')}
+            url={urls.contactSupport}
+          />
           <Button small primary onClick={this.github}>
             {t('app:crash.github')}
           </Button>

src/components/base/ExternalLinkButton.js

@@ -0,0 +1,16 @@
+// @flow
+
+import React from 'react'
+import { openURL } from 'helpers/linking'
+
+import Button from 'components/base/Button'
+
+export function ExternalLinkButton({ label, url, ...props }: { label: string, url: string }) {
+  return (
+    <Button onClick={() => openURL(url)} {...props}>
+      {label}
+    </Button>
+  )
+}
+
+export default ExternalLinkButton

src/components/base/RetryButton.js

@@ -0,0 +1,21 @@
+// @flow
+
+import React, { PureComponent } from 'react'
+
+import Button from 'components/base/Button'
+import { translate } from 'react-i18next'
+
+import type { T } from 'types/common'
+
+type Props = {
+  t: T,
+}
+
+class RetryButton extends PureComponent<Props> {
+  render() {
+    const { t, ...props } = this.props
+    return <Button {...props}>{t('app:common.retry')}</Button>
+  }
+}
+
+export default translate()(RetryButton)

src/components/modals/AddAccounts/steps/03-step-import.js

@@ -7,6 +7,9 @@ import { Trans } from 'react-i18next'
 import React, { PureComponent, Fragment } from 'react'
 import type { Account } from '@ledgerhq/live-common/lib/types'
 import uniq from 'lodash/uniq'
+import { urls } from 'config/urls'
+import ExternalLinkButton from 'components/base/ExternalLinkButton'
+import RetryButton from 'components/base/RetryButton'
 
 import { getBridgeForCurrency } from 'bridge'
 
@@ -33,6 +36,23 @@ const LoadingRow = styled(Box).attrs({
   height: 48px;
   border: 1px dashed ${p => p.theme.colors.grey};
 `
+const Title = styled(Box).attrs({
+  ff: 'Museo Sans',
+  fontSize: 5,
+  mt: 2,
+  color: 'black',
+})`
+  text-align: center;
+`
+
+const Desc = styled(Box).attrs({
+  ff: 'Open Sans',
+  fontSize: 4,
+  mt: 2,
+  color: 'graphite',
+})`
+  text-align: center;
+`
 
 class StepImport extends PureComponent<StepProps> {
   componentDidMount() {
@@ -167,21 +187,16 @@ class StepImport extends PureComponent<StepProps> {
     const { err } = this.props
     invariant(err, 'Trying to render inexisting error')
     return (
-      <Box
+      <Box style={{ height: 200 }} px={5} justify="center">
-        style={{ height: 200 }}
+        <Box color="alertRed" align="center">
-        px={5}
+          <IconExclamationCircleThin size={43} />
-        textAlign="center"
-        align="center"
-        justify="center"
-        color="alertRed"
-      >
-        <IconExclamationCircleThin size={43} />
-        <Box mt={4}>
-          <TranslatedError error={err} field="title" />
         </Box>
-        <Box mt={4}>
+        <Title>
+          <TranslatedError error={err} field="title" />
+        </Title>
+        <Desc>
           <TranslatedError error={err} field="description" />
-        </Box>
+        </Desc>
       </Box>
     )
   }
@@ -353,25 +368,25 @@ export const StepImportFooter = ({
     <Fragment>
       {currency && <CurrencyBadge mr="auto" currency={currency} />}
       {scanStatus === 'error' && (
-        <Button mr={2} onClick={() => setScanStatus('scanning')}>
+        <Fragment>
-          {t('app:common.retry')}
+          <ExternalLinkButton mr={2} label={t('app:common.getSupport')} url={urls.faq} />
-        </Button>
+          <RetryButton primary onClick={() => setScanStatus('scanning')} />
+        </Fragment>
       )}
       {scanStatus === 'scanning' && (
         <Button mr={2} onClick={() => setScanStatus('finished')}>
           {t('app:common.stop')}
         </Button>
       )}
-      <Button
+      {scanStatus !== 'error' && (
-        primary
+        <Button
-        disabled={
+          primary
-          (scanStatus !== 'finished' && scanStatus !== 'error') ||
+          disabled={scanStatus !== 'finished' || !(willCreateAccount || willAddAccounts)}
-          !(willCreateAccount || willAddAccounts)
+          onClick={onClick}
-        }
+        >
-        onClick={onClick}
+          {ctaWording}
-      >
+        </Button>
-        {ctaWording}
+      )}
-      </Button>
     </Fragment>
   )
 }

src/components/modals/AddAccounts/steps/04-step-finish.js

@@ -50,13 +50,10 @@ function StepFinish({ currency, t, checkedAccountsIds }: StepProps) {
 
 export default StepFinish
 
-export const StepFinishFooter = ({ onCloseModal, onGoStep1, t }: StepProps) => (
+export const StepFinishFooter = ({ onGoStep1, t }: StepProps) => (
   <Fragment>
-    <Button mr={2} outline onClick={onGoStep1}>
+    <Button mr={2} primary onClick={onGoStep1}>
       {t('app:addAccounts.cta.addMore')}
     </Button>
-    <Button primary onClick={onCloseModal}>
-      {t('app:common.close')}
-    </Button>
   </Fragment>
 )

src/components/modals/Receive/index.js

@@ -12,8 +12,6 @@ import Track from 'analytics/Track'
 import type { Account } from '@ledgerhq/live-common/lib/types'
 
 import { MODAL_RECEIVE } from 'config/constants'
-import { openURL } from 'helpers/linking'
-import { urls } from 'config/urls'
 import type { T, Device } from 'types/common'
 import type { StepProps as DefaultStepProps } from 'components/base/Stepper'
 
@@ -58,7 +56,6 @@ export type StepProps = DefaultStepProps & {
   onChangeAccount: (?Account) => void,
   onChangeAppOpened: boolean => void,
   onChangeAddressVerified: (?boolean, ?Error) => void,
-  contactUs: () => void,
 }
 
 const createSteps = ({ t }: { t: T }) => [
@@ -132,9 +129,7 @@ class ReceiveModal extends PureComponent<Props, State> {
       isAddressVerified: null,
       isAppOpened: false,
     })
-  handleContactUs = () => {
+
-    openURL(urls.contactSupport)
-  }
   handleReset = () => this.setState({ ...INITIAL_STATE })
 
   handleCloseModal = () => this.props.closeModal(MODAL_RECEIVE)
@@ -187,7 +182,6 @@ class ReceiveModal extends PureComponent<Props, State> {
       onChangeAccount: this.handleChangeAccount,
       onChangeAppOpened: this.handleChangeAppOpened,
       onChangeAddressVerified: this.handleChangeAddressVerified,
-      contactUs: this.handleContactUs,
     }
 
     const errorSteps = verifyAddressError

src/components/modals/Receive/steps/03-step-confirm-address.js

@@ -4,9 +4,12 @@ import styled from 'styled-components'
 import React, { Fragment, PureComponent } from 'react'
 
 import TrackPage from 'analytics/TrackPage'
+import { urls } from 'config/urls'
 import Box from 'components/base/Box'
 import Button from 'components/base/Button'
 import DeviceConfirm from 'components/DeviceConfirm'
+import ExternalLinkButton from 'components/base/ExternalLinkButton'
+import RetryButton from 'components/base/RetryButton'
 import type { StepProps } from '../index'
 import TranslatedError from '../../../TranslatedError'
 
@@ -45,14 +48,16 @@ export default class StepConfirmAddress extends PureComponent<StepProps> {
   }
 }
 
-export function StepConfirmAddressFooter({ t, transitionTo, onRetry, contactUs }: StepProps) {
+export function StepConfirmAddressFooter({ t, transitionTo, onRetry }: StepProps) {
   // This will be displayed only if user rejected address
   return (
     <Fragment>
-      <Button onClick={contactUs} event="Receive Flow Step 3 Contact Us Clicked">
+      <ExternalLinkButton
-        {t('app:receive.steps.confirmAddress.support')}
+        event="Receive Flow Step 3 Contact Us Clicked"
-      </Button>
+        label={t('app:receive.steps.confirmAddress.support')}
-      <Button
+        url={urls.contactSupport}
+      />
+      <RetryButton
         ml={2}
         primary
         event="Receive Flow Step 3 Retry Clicked"
@@ -60,9 +65,7 @@ export function StepConfirmAddressFooter({ t, transitionTo, onRetry, contactUs }
           onRetry()
           transitionTo('device')
         }}
-      >
+      />
-        {t('app:common.retry')}
-      </Button>
     </Fragment>
   )
 }

src/components/modals/Send/steps/04-step-confirmation.js

@@ -11,6 +11,7 @@ import TrackPage from 'analytics/TrackPage'
 import Box from 'components/base/Box'
 import Button from 'components/base/Button'
 import Spinner from 'components/base/Spinner'
+import RetryButton from 'components/base/RetryButton'
 import TranslatedError from 'components/TranslatedError'
 import IconCheckCircle from 'icons/CheckCircle'
 import IconExclamationCircleThin from 'icons/ExclamationCircleThin'
@@ -106,16 +107,14 @@ export function StepConfirmationFooter({
           {t('app:send.steps.confirmation.success.cta')}
         </Button>
       ) : error ? (
-        <Button
+        <RetryButton
           ml={2}
           primary
           onClick={() => {
             onRetry()
             transitionTo('amount')
           }}
-        >
+        />
-          {t('app:common.retry')}
-        </Button>
       ) : null}
     </Fragment>
   )

static/i18n/en/app.json

@@ -5,6 +5,7 @@
     "apply": "Apply",
     "confirm": "Confirm",
     "cancel": "Cancel",
+    "getSupport": "Get Support",
     "delete": "Delete",
     "launch": "Launch",
     "continue": "Continue",