Update genuine check error style in onboarding

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)};

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 (
-    <Box align="center" flow={1} color={colors.alertRed}>
+    <Box
+      horizontal
+      align="center"
+      flow={2}
+      color={colors.alertRed}
+      ff="Open Sans|SemiBold"
+      fontSize={4}
+    >
+      <IconExclamationCircle size={16} />
+      <span>
+        <TranslatedError error={onboarding.genuine.genuineCheckUnavailable} />
+      </span>
       <FakeLink
-        ff="Open Sans|Regular"
+        color="alertRed"
+        ff="Open Sans|SemiBold"
         fontSize={4}
         underline
         onClick={() => {
@@ -72,14 +84,6 @@ export function GenuineCheckUnavailableMessage({
       >
         {t('app:common.retry')}
       </FakeLink>
-      <Box horizontal justify="center">
-        <Box justifyContent="center">
-          <IconCross size={12} />
-        </Box>
-        <Box ff="Open Sans|Regular" style={{ maxWidth: 150 }} fontSize={2} ml={1}>
-          <TranslatedError error={onboarding.genuine.genuineCheckUnavailable} />
-        </Box>
-      </Box>
     </Box>
   )
 }

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<StepProps, State> {
             </GenuineCheckCardWrapper>
           </Box>
           <Box mt={3}>
-            <GenuineCheckCardWrapper isDisabled={!genuine.recoveryStepPass}>
+            <GenuineCheckCardWrapper
+              isDisabled={!genuine.recoveryStepPass}
+              isError={genuine.genuineCheckUnavailable}
+            >
               <Box justify="center">
                 <Box horizontal>
                   <IconOptionRow color={!genuine.recoveryStepPass ? 'grey' : 'wallet'}>
@@ -239,11 +243,9 @@ class GenuineCheck extends PureComponent<StepProps, State> {
                       </Box>
                     </Box>
                   ) : genuine.genuineCheckUnavailable ? (
-                    <GenuineCheckUnavailableMessage
+                    <Box color="alertRed">
-                      handleOpenGenuineCheckModal={this.handleOpenGenuineCheckModal}
+                      <IconCross size={16} />
-                      onboarding={onboarding}
+                    </Box>
-                      t={t}
-                    />
                   ) : (
                     <Button
                       primary
@@ -256,6 +258,15 @@ class GenuineCheck extends PureComponent<StepProps, State> {
                 </Box>
               )}
             </GenuineCheckCardWrapper>
+            {genuine.genuineCheckUnavailable && (
+              <Box mt={4}>
+                <GenuineCheckUnavailableMessage
+                  handleOpenGenuineCheckModal={this.handleOpenGenuineCheckModal}
+                  onboarding={onboarding}
+                  t={t}
+                />
+              </Box>
+            )}
           </Box>
         </StepContainerInner>
         {genuine.genuineCheckUnavailable ? (

static/i18n/en/errors.yml

@@ -18,7 +18,7 @@ DisconnectedDevice:
   title: 'The device was disconnected.'
   description: ''
 Error: # as this is a generic unhandled error i think it's ok to have a generic title. but keep description to {{message}}
-  title: 'Oops, an error occurred'
+  title: 'Oops, an error occurred.'
   description: '{{message}}'
 FeeEstimationFailed:
   title: 'Fee estimation error. Try again or set a custom fee (status: {{status}})'