diff --git a/src/components/AccountPage/EmptyStateAccount.js b/src/components/AccountPage/EmptyStateAccount.js index 9dbaae0e..705a3bf2 100644 --- a/src/components/AccountPage/EmptyStateAccount.js +++ b/src/components/AccountPage/EmptyStateAccount.js @@ -41,7 +41,7 @@ class EmptyStateAccount extends PureComponent { /> {t('app:account.emptyState.title')} - + {'Make sure the'} @@ -50,7 +50,7 @@ class EmptyStateAccount extends PureComponent { {'app is installed to receive funds.'} - @@ -76,11 +78,9 @@ export const Description = styled(Box).attrs({ ff: 'Open Sans|Regular', fontSize: 4, color: p => p.theme.colors.graphite, -})` - margin: 10px auto 25px; - display: block; - text-align: center; -` + textAlign: 'center', +})`` + export default compose( connect( null, diff --git a/src/components/DeviceInteraction/components.js b/src/components/DeviceInteraction/components.js index fe678da4..3477110a 100644 --- a/src/components/DeviceInteraction/components.js +++ b/src/components/DeviceInteraction/components.js @@ -100,12 +100,21 @@ export const ErrorDescContainer = ({ error: Error, onRetry: void => void, }) => ( - + - + - + {'Retry'} diff --git a/src/components/DeviceInteraction/index.js b/src/components/DeviceInteraction/index.js index b11e038b..0c261790 100644 --- a/src/components/DeviceInteraction/index.js +++ b/src/components/DeviceInteraction/index.js @@ -107,7 +107,7 @@ class DeviceInteraction extends PureComponent { ) })} {error && - shouldRenderRetry && } + shouldRenderRetry && } ) } diff --git a/src/components/DeviceInteraction/stories.js b/src/components/DeviceInteraction/stories.js index e111336b..2ae99f16 100644 --- a/src/components/DeviceInteraction/stories.js +++ b/src/components/DeviceInteraction/stories.js @@ -34,6 +34,7 @@ class Wrapper extends React.Component { {'reset'} (this._ref = n)} steps={[ { diff --git a/src/components/Onboarding/helperComponents.js b/src/components/Onboarding/helperComponents.js index d1d668f2..7a0e7d39 100644 --- a/src/components/Onboarding/helperComponents.js +++ b/src/components/Onboarding/helperComponents.js @@ -140,7 +140,10 @@ export const GenuineCheckCardWrapper = styled(Box).attrs({ height: 74px; transition: all ease-in-out 0.2s; color: ${p => (p.isDisabled ? p.theme.colors.grey : p.theme.colors.black)}; - border: ${p => `1px ${p.isDisabled ? 'dashed' : 'solid'} ${p.theme.colors.fog}`}; + border: ${p => + `1px ${p.isDisabled ? 'dashed' : 'solid'} ${ + p.isError ? p.theme.colors.alertRed : p.theme.colors.fog + }`}; pointer-events: ${p => (p.isDisabled ? 'none' : 'auto')}; background-color: ${p => (p.isDisabled ? p.theme.colors.lightGrey : p.theme.colors.white)}; opacity: ${p => (p.isDisabled ? 0.7 : 1)}; diff --git a/src/components/Onboarding/steps/GenuineCheck/GenuineCheckUnavailable.js b/src/components/Onboarding/steps/GenuineCheck/GenuineCheckUnavailable.js index 3e620983..5f248f57 100644 --- a/src/components/Onboarding/steps/GenuineCheck/GenuineCheckUnavailable.js +++ b/src/components/Onboarding/steps/GenuineCheck/GenuineCheckUnavailable.js @@ -7,7 +7,7 @@ import type { T } from 'types/common' import type { OnboardingState } from 'reducers/onboarding' import FakeLink from 'components/base/FakeLink' -import IconCross from 'icons/Cross' +import IconExclamationCircle from 'icons/ExclamationCircle' import Box from 'components/base/Box' import Button from 'components/base/Button' import TranslatedError from 'components/TranslatedError' @@ -57,9 +57,21 @@ export function GenuineCheckUnavailableMessage({ onboarding: OnboardingState, }) { return ( - + + + + + { @@ -72,14 +84,6 @@ export function GenuineCheckUnavailableMessage({ > {t('app:common.retry')} - - - - - - - - ) } diff --git a/src/components/Onboarding/steps/GenuineCheck/index.js b/src/components/Onboarding/steps/GenuineCheck/index.js index a599d720..36bd1f31 100644 --- a/src/components/Onboarding/steps/GenuineCheck/index.js +++ b/src/components/Onboarding/steps/GenuineCheck/index.js @@ -14,6 +14,7 @@ import Button from 'components/base/Button' import RadioGroup from 'components/base/RadioGroup' import GenuineCheckModal from 'components/GenuineCheckModal' +import IconCross from 'icons/Cross' import IconCheck from 'icons/Check' import { @@ -220,7 +221,10 @@ class GenuineCheck extends PureComponent { - + @@ -239,11 +243,9 @@ class GenuineCheck extends PureComponent { ) : genuine.genuineCheckUnavailable ? ( - + + + ) : (