Adding bold text to onboarding screens

Missing bold text - to match figma #480
cds-snc · Jul 16, 2020 · 575952f · 575952f
1 parent 58bb475
commit 575952f
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 17 deletions.
diff --git a/src/locale/translations/en.json b/src/locale/translations/en.json
@@ -194,8 +194,8 @@
     "Anonymous": {
       "Title": "Your privacy is safe",
       "ImageAltText": "A hand-drawn illustration of shaded glasses and hat to go incognito. Above the hat, a location pin icon is crossed out.",
-      "Body1": "COVID Alert does not use GPS or location services.",
-      "Body2": "It has no way of knowing:",
+      "Body1": "COVID Alert **does not use GPS** or location services.",
+      "Body2": "It has **no way of knowing**:",
       "Bullet1": "Your location.",
       "Bullet2": "Your name or address.",
       "Bullet3": "Your phone's contacts.",
@@ -213,8 +213,8 @@
     "Permissions": {
       "Title": "The app will now ask your permission",
       "ImageAltText": "A hand-drawn illustration of a mobile phone displaying a dialogue box with a red X and a green check mark on the screen.",
-      "Body1": "Allow the app to start logging random codes or “random IDs” when you’re near other phones. The app will access the date, duration and signal strength related to the random codes, but they never leave your phone.",
-      "Body2": "You’ll also need to let the app send you notifications.",
+      "Body1": "**Allow the app** to start logging random codes or “random IDs” when you’re near other phones. The app will access the date, duration and signal strength related to the random codes, but they never leave your phone.",
+      "Body2": "You’ll also need to **let the app send you notifications**.",
       "PrivacyButtonCTA": "Learn more about privacy"
     }
   },

diff --git a/src/locale/translations/fr.json b/src/locale/translations/fr.json
@@ -226,8 +226,8 @@
     "Anonymous": {
       "Title": "Votre vie privée est protégée",
       "ImageAltText": "Dessin à la main d’une paire de lunettes de soleil et d’un chapeau pour passer incognito. Au-dessus du chapeau, une icône de marqueur de géolocalisation est biffée.",
-      "Body1": "Alerte COVID n’utilise pas le GPS ou les services de localisation.",
-      "Body2": "L’application n’a aucun moyen de connaître\u00A0:",
+      "Body1": "Alerte COVID **n’utilise pas le GPS** ou les services de localisation.",
+      "Body2": "L’application **n’a aucun moyen** de connaître\u00A0:",
       "Bullet1": "votre emplacement,",
       "Bullet2": "votre nom ou votre adresse,",
       "Bullet3": "les contacts de votre téléphone,",
@@ -245,8 +245,8 @@
     "Permissions": {
       "Title": "L’application demandera votre autorisation",
       "ImageAltText": "Dessin à la main d’un téléphone mobile dont l’écran affiche une fenêtre de dialogue avec un X rouge et un crochet vert.",
-      "Body1": "Permettez à l’application de collecter des codes aléatoires quand vous êtes près d’autres téléphones. L’application connaîtra la date, la durée et la puissance de signal associées à ces codes, mais ces données resteront sur votre téléphone. ",
-      "Body2": "Vous devrez aussi lui permettre de vous envoyer des notifications.",
+      "Body1": "**Permettez à l’application** de collecter des codes aléatoires quand vous êtes près d’autres téléphones. L’application connaîtra la date, la durée et la puissance de signal associées à ces codes, mais ces données resteront sur votre téléphone. ",
+      "Body2": "Vous devrez aussi **lui permettre de vous envoyer des notifications**.",
       "PrivacyButtonCTA": "En savoir plus sur la confidentialité"
     }
   },

diff --git a/src/locale/translations/index.js b/src/locale/translations/index.js
diff --git a/src/screens/onboarding/views/Anonymous.tsx b/src/screens/onboarding/views/Anonymous.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import {Box, BulletPointX, Text} from 'components';
 import {useI18n} from 'locale';
+import Markdown from 'react-native-markdown-display';
+import {StyleSheet} from 'react-native';
 
 import {ItemView, ItemViewProps} from './ItemView';
 
@@ -17,14 +19,22 @@ export const Anonymous = (props: Pick<ItemViewProps, 'isActive'>) => {
     >
       <>
         <Box flexDirection="row" marginBottom="m">
-          <Text variant="bodyText" color="overlayBodyText">
+          <Markdown
+            style={{
+              body: styles.bodyContent,
+            }}
+          >
             {i18n.translate('Onboarding.Anonymous.Body1')}
-          </Text>
+          </Markdown>
         </Box>
         <Box flexDirection="row" marginBottom="s">
-          <Text variant="bodyText" color="overlayBodyText">
+          <Markdown
+            style={{
+              body: styles.bodyContent,
+            }}
+          >
             {i18n.translate('Onboarding.Anonymous.Body2')}
-          </Text>
+          </Markdown>
         </Box>
 
         <BulletPointX text={i18n.translate('Onboarding.Anonymous.Bullet1')} />
@@ -36,3 +46,12 @@ export const Anonymous = (props: Pick<ItemViewProps, 'isActive'>) => {
     </ItemView>
   );
 };
+const styles = StyleSheet.create({
+  flex: {
+    flex: 1,
+  },
+  bodyContent: {
+    fontFamily: 'Noto Sans',
+    fontSize: 18,
+  },
+});
diff --git a/src/screens/onboarding/views/Permissions.tsx b/src/screens/onboarding/views/Permissions.tsx
@@ -2,6 +2,8 @@ import React, {useCallback} from 'react';
 import {useI18n} from 'locale';
 import {Box, Text, ButtonSingleLine} from 'components';
 import {useNavigation} from '@react-navigation/native';
+import Markdown from 'react-native-markdown-display';
+import {StyleSheet} from 'react-native';
 
 import {ItemView, ItemViewProps} from './ItemView';
 
@@ -20,14 +22,22 @@ export const Permissions = (props: Pick<ItemViewProps, 'isActive'>) => {
     >
       <>
         <Box marginBottom="m">
-          <Text variant="bodyText" color="overlayBodyText">
+          <Markdown
+            style={{
+              body: styles.bodyContent,
+            }}
+          >
             {i18n.translate('Onboarding.Permissions.Body1')}
-          </Text>
+          </Markdown>
         </Box>
         <Box marginBottom="l">
-          <Text variant="bodyText" color="overlayBodyText">
+          <Markdown
+            style={{
+              body: styles.bodyContent,
+            }}
+          >
             {i18n.translate('Onboarding.Permissions.Body2')}
-          </Text>
+          </Markdown>
         </Box>
         <Box alignSelf="stretch" marginTop="m" marginBottom="l">
           <Box>
@@ -43,3 +53,12 @@ export const Permissions = (props: Pick<ItemViewProps, 'isActive'>) => {
     </ItemView>
   );
 };
+const styles = StyleSheet.create({
+  flex: {
+    flex: 1,
+  },
+  bodyContent: {
+    fontFamily: 'Noto Sans',
+    fontSize: 18,
+  },
+});