Add on intro slider

components/ui/Text.tsx

@@ -28,7 +28,7 @@ interface TextProps {
   weight?: 'regular' | 'semibold' | 'bold';
   align?: TextStyle['textAlign'];
   margin?: Spacing;
-  size?: 'small' | 'smaller' | 'regular';
+  size?: 'small' | 'smaller' | 'regular' | 'large';
   lineHeight?: number;
   numLines?: number;
   style?: StyleProp<TextStyle>;

components/ui/themes/DefaultTheme.ts

@@ -442,6 +442,9 @@ export const DefaultTheme = {
       fontSize: 11,
       lineHeight: 18,
     },
+    large: {
+      fontSize: 18,
+    },
   }),
   VcItemStyles: StyleSheet.create({
     title: {
@@ -871,6 +874,7 @@ export const DefaultTheme = {
   walletIntro: require('../../../assets/intro-wallet-binding.png'),
   IntroScanner: require('../../../assets/intro-scanner.png'),
   injiSmallLogo: require('../../../assets/inji_small_logo.png'),
+  protectPrivacy: require('../../../assets/phone_mockup_1.png'),
 
   elevation(level: ElevationLevel): ViewStyle {
     // https://ethercreative.github.io/react-native-shadow-generator/

locales/en.json

@@ -174,13 +174,15 @@
     "downloadingYourId": "Downloading your ID, this can take upto 5 minutes"
   },
   "OnboardingOverlay": {
-    "stepOneTitle": "Secure Sharing!",
-    "stepOneText": "Share and receive {{vcLabel}} switfly using your phone camera to scan QR codes",
-    "stepTwoTitle": "Trusted Digital Wallet",
-    "stepTwoText": "Keep your digital credential with you at all times",
-    "stepThreeTitle": "Quick Access",
-    "stepThreeText": "Once generated, {{vcLabel}} are safely stored on your mobile.",
-    "stepThreeButton": "Get Started",
+    "stepOneTitle":"Protect Privacy",
+    "stepOneText":"Lorem Ipsum is simply a standard text of the printing and typesetting industry",
+    "stepTwoTitle": "Secure Sharing!",
+    "stepTwoText": "Share and receive {{vcLabel}} switfly using your phone camera to scan QR codes",
+    "stepThreeTitle": "Trusted Digital Wallet",
+    "stepThreeText": "Keep your digital credential with you at all times",
+    "stepFourTitle": "Quick Access",
+    "stepFourText": "Once generated, {{vcLabel}} are safely stored on your mobile.",
+    "stepFourButton": "Get Started",
     "skip": "Skip",
     "next": "Next"
   },

screens/Home/IntroSlidersScreen.tsx

@@ -24,19 +24,25 @@ export const IntroSlidersScreen: React.FC<RootRouteProps> = (props) => {
     {
       key: 'one',
       title: t('stepOneTitle'),
-      text: t('stepOneText', { vcLabel: vcLabel.plural }),
-      image: Theme.sharingIntro,
+      text: t('stepOneText'),
+      image: Theme.protectPrivacy,
     },
     {
       key: 'two',
-      title: t('stepTwoTitle', { vcLabel: vcLabel.singular }),
-      text: t('stepTwoText', { vcLabel: vcLabel.plural }),
-      image: Theme.walletIntro,
+      title: t('stepTwoTitle'),
+      text: t('stepTwoText'),
+      image: Theme.sharingIntro,
     },
     {
       key: 'three',
       title: t('stepThreeTitle'),
-      text: t('stepThreeText', { vcLabel: vcLabel.plural }),
+      text: t('stepThreeText'),
+      image: Theme.walletIntro,
+    },
+    {
+      key: 'four',
+      title: t('stepFourTitle'),
+      text: t('stepFourText', { vcLabel: vcLabel.plural }),
       image: Theme.IntroScanner,
     },
   ];
@@ -79,7 +85,7 @@ export const IntroSlidersScreen: React.FC<RootRouteProps> = (props) => {
             <Text weight="semibold" margin="0 0 18 0">
               {item.title}
             </Text>
-            <Text margin="0 0 150 0" color={Theme.Colors.GrayText}>
+            <Text margin="0 0 150 0" size="large" color={Theme.Colors.GrayText}>
               {item.text}
             </Text>
             {item.footer}
@@ -117,7 +123,7 @@ export const IntroSlidersScreen: React.FC<RootRouteProps> = (props) => {
             align="center"
             color="#FFFFFF"
             margin="15 0 0 0">
-            {t('stepThreeButton')}
+            {t('stepFourButton')}
           </Text>
         </LinearGradient>
       </View>