[Wallet][ReDesign] Onboarding sucess screen (#4361)

### Description

This PR implements the [onboarding success screen redesign](https://www.figma.com/file/zt7aTQ5wuXycIwxq5oAmF9/Wallet--Refresh?node-id=5592%3A335).

This also adds a subtle shadow on iOS to the Valora logo like in the designs.

See assets diff: valora-inc/valora-app-branding@8a74a2c...4f414a0

### Other changes

- Fix fast refresh triggered constantly while building android (when both iOS and Android dev apps are running)

### Tested

Yes.

### Related issues

- #3645 

### Backwards compatibility

Yes

Author: jeanregisser

.watchmanconfig

@@ -1,7 +1,7 @@
 {
   "__comment": "On macOS the first 8 items listed in ignore_dirs can be accelerated at the OS level. See https://facebook.github.io/watchman/docs/config.html#ignore_dirs", 
   "ignore_dirs": [
-    "packages/mobile/android/build",
+    "packages/mobile/android/app/build",
     "packages/mobile/ios/build",
     "packages/mobile/e2e/artifacts"
   ]

packages/mobile/branding/celo/src/icons/Logo.v2.tsx

@@ -5,6 +5,7 @@ import Svg, { Path } from 'svgs'
 export enum LogoTypes {
   COLOR = 'COLOR',
   DARK = 'DARK',
+  LIGHT = 'LIGHT',
 }
 
 interface Props {
@@ -13,19 +14,31 @@ interface Props {
 }
 
 export default function Logo({ height = 25, type = LogoTypes.COLOR }: Props) {
+  let mainColor
+  switch (type) {
+    case LogoTypes.DARK:
+      mainColor = colors.dark
+      break
+    case LogoTypes.LIGHT:
+      mainColor = colors.light
+      break
+    default:
+      break
+  }
+
   return (
     <Svg width={height} height={height} viewBox="0 0 25 25" fill="none">
       <Path
         d="M9.86842 22.3684C13.8653 22.3684 17.1053 19.1284 17.1053 15.1316C17.1053 11.1348 13.8653 7.89476 9.86842 7.89476C5.87158 7.89476 2.63158 11.1348 2.63158 15.1316C2.63158 19.1284 5.87158 22.3684 9.86842 22.3684ZM9.86842 25C4.41842 25 0 20.5816 0 15.1316C0 9.6816 4.41842 5.26318 9.86842 5.26318C15.3184 5.26318 19.7368 9.6816 19.7368 15.1316C19.7368 20.5816 15.3184 25 9.86842 25Z"
-        fill={type === LogoTypes.DARK ? colors.dark : colors.goldBrand}
+        fill={type === LogoTypes.COLOR ? colors.goldBrand : mainColor}
       />
       <Path
         d="M15.1316 17.1053C19.1284 17.1053 22.3684 13.8653 22.3684 9.86842C22.3684 5.87158 19.1284 2.63158 15.1316 2.63158C11.1348 2.63158 7.89476 5.87158 7.89476 9.86842C7.89476 13.8653 11.1348 17.1053 15.1316 17.1053ZM15.1316 19.7368C9.6816 19.7368 5.26318 15.3184 5.26318 9.86842C5.26318 4.41842 9.6816 0 15.1316 0C20.5816 0 25 4.41842 25 9.86842C25 15.3184 20.5816 19.7368 15.1316 19.7368Z"
-        fill={type === LogoTypes.DARK ? colors.dark : colors.greenBrand}
+        fill={type === LogoTypes.COLOR ? colors.greenBrand : mainColor}
       />
       <Path
         d="M15.4577 19.7369C16.1419 18.9077 16.6324 17.9361 16.8932 16.8932C17.9361 16.6324 18.9077 16.1421 19.7369 15.4579C19.699 16.6658 19.439 17.8563 18.9695 18.9698C17.8561 19.439 16.6656 19.6992 15.4577 19.7369ZM8.10687 8.10687C7.06397 8.36766 6.09239 8.85792 5.26318 9.54213C5.30108 8.33424 5.56108 7.14371 6.03055 6.03029C7.14397 5.56108 8.3345 5.30082 9.54239 5.26318C8.85818 6.09239 8.36766 7.06397 8.10687 8.10687Z"
-        fill={type === LogoTypes.DARK ? colors.dark : '#5EA33B'}
+        fill={type === LogoTypes.COLOR ? '#5EA33B' : mainColor}
       />
     </Svg>
   )

packages/mobile/branding/celo/src/images/background.jpg

@@ -95,5 +95,8 @@
     "description": "This account doesn’t have any funds. Would you still like to use it?",
     "useAccount": "Use Account",
     "title": "Balance <0></0>"
+  },
+  "success": {
+    "message": "You're all set!"
   }
 }

packages/mobile/locales/en-US/onboarding.json

@@ -95,5 +95,8 @@
     "description": "Esta cuenta no tiene fondos. ¿Todavía te gustaría usarlo?",
     "useAccount": "Usar cuenta",
     "title": "Saldo <0></0>"
+  },
+  "success": {
+    "message": "Estás listo!"
   }
 }

packages/mobile/locales/es-419/onboarding.json

@@ -21,7 +21,7 @@ echo $mobile_root
 cd "$mobile_root"
 
 # Please update the sha when valora branding updates are needed
-valora_branding_sha=8a74a2c
+valora_branding_sha=4f414a0
 
 if [[ "$branding" == "valora" ]]; then
   # prevents git from asking credentials

packages/mobile/scripts/sync_branding.sh

@@ -3,6 +3,7 @@ export const accountKey2 = require('src/images/account-key-2.png')
 export const accountKey3 = require('src/images/account-key-3.png')
 export const accountKey4 = require('src/images/account-key-4.png')
 export const backupKey = require('src/images/backup-key.png')
+export const background = require('src/images/background.jpg')
 export const celoEducation1 = require('src/images/celo-education-1.png')
 export const celoEducation2 = require('src/images/celo-education-2.png')
 export const celoEducation3 = require('src/images/celo-education-3.png')

packages/mobile/src/images/Images.ts

@@ -1,14 +1,29 @@
-import colors from '@celo/react-components/styles/colors'
-import React from 'react'
-import { StyleSheet, View } from 'react-native'
-import DancingRings from 'src/icons/DancingRings'
+import colors from '@celo/react-components/styles/colors.v2'
+import fontStyles from '@celo/react-components/styles/fonts.v2'
+import { Spacing } from '@celo/react-components/styles/styles.v2'
+import React, { useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Image, StyleSheet, Text, View } from 'react-native'
+import { Namespaces } from 'src/i18n'
+import Logo, { LogoTypes } from 'src/icons/Logo.v2'
+import { background } from 'src/images/Images'
 import { nuxNavigationOptionsNoBackButton } from 'src/navigator/Headers.v2'
 import { navigateHome } from 'src/navigator/NavigationService'
 
 function OnboardingSuccessScreen() {
+  useEffect(() => {
+    const timeout = setTimeout(() => navigateHome(), 3000)
+
+    return () => clearTimeout(timeout)
+  }, [])
+
+  const { t } = useTranslation(Namespaces.onboarding)
+
   return (
     <View style={styles.container}>
-      <DancingRings onAnimationFinish={navigateHome} />
+      <Image source={background} style={styles.backgroundImage} />
+      <Logo type={LogoTypes.LIGHT} height={70} />
+      <Text style={styles.text}>{t('success.message')}</Text>
     </View>
   )
 }
@@ -22,6 +37,24 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  backgroundImage: {
+    ...StyleSheet.absoluteFillObject,
+    resizeMode: 'stretch',
+    width: undefined,
+    height: undefined,
+  },
+  text: {
+    ...fontStyles.h2,
+    fontSize: 30,
+    lineHeight: 36,
+    color: colors.light,
+    marginTop: Spacing.Regular16,
+    marginBottom: 30,
+    shadowOffset: { width: 0, height: 1 },
+    shadowRadius: 2,
+    shadowOpacity: 1,
+    shadowColor: 'rgba(46, 51, 56, 0.15)',
+  },
 })
 
 export default OnboardingSuccessScreen