Skip to content

Commit

Permalink
Merge pull request #64 from cds-snc/intro
Browse files Browse the repository at this point in the history 
Updated start screens
  • Loading branch information
@timarney
timarney authored Jun 19, 2020
2 parents 41010f3 + ee24cd3 commit b54fc27
Show file tree
Hide file tree
Showing 6 changed files with 139 additions and 58 deletions.
24 changes: 17 additions & 7 deletions src/locale/translations/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,15 +121,25 @@
"ActionBack": "Back"
},
"OnboardingPermissions": {
"Title": "Your data is private",
"Body": "StopCOVID takes a privacy-first approach to exposure notification.",
"Body2": "Your random IDs are stored exclusively on your phone unless you choose to share them.",
"Body3": "Use of StopCOVID is voluntary. You can delete your random IDs at any time."
"Title": "Your location is not tracked",
"Body": "your location",
"Body2": "where you’ve been",
"Body3": "who you’ve been with"
},
"YourData": {
"Title": "Your data and identity are private",
"Body": "StopCOVID does not know",
"Body1": "your identity",
"Body2": "any identifiable information about you or your contacts",
"Body3": "your medical information, unless you choose to share it anonymously, if you test positive",
"Body4": "Data collected through this app is never shared without your permission",
"Body5": "Use of the app is voluntary. You can delete it at any time."
},
"OnboardingStart": {
"Title": "Keep yourself and others safe",
"Body1": "Get notified if you have potentially been exposed to COVID-19.",
"Body2": "If you test positive for COVID-19, you can choose to anonymously share your data so others can be notified of possible exposure.",
"Title": "How it works",
"Body1": "Using Bluetooth, StopCOVID shares anonymous, randomly generated codes, with other app users nearby.",
"Body2": "If you have been exposed to COVID-19 by another app user in the past 14 days, you will receive an anonymous notification.",
"Body3": "If you test positive for COVID-19, you can anonymously notify others who have been near you, in the past 14 days.",
"TutorialAction": "Learn how StopCOVID works"
},
"Privacy": {
Expand Down
2 changes: 1 addition & 1 deletion src/locale/translations/index.js
View file

Large diffs are not rendered by default.

6 changes: 4 additions & 2 deletions src/screens/onboarding/Onboarding.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,15 @@ import {useMaxContentWidth} from 'shared/useMaxContentWidth';

import {Permissions} from './views/Permissions';
import {Start} from './views/Start';
import {YourData} from './views/YourData';

type ViewKey = 'start' | 'permissions';
type ViewKey = 'start' | 'permissions' | 'yourdata';

const contentData: ViewKey[] = ['start', 'permissions'];
const contentData: ViewKey[] = ['start', 'permissions', 'yourdata'];
const viewComponents = {
start: Start,
permissions: Permissions,
yourdata: YourData,
};

export const OnboardingScreen = () => {
Expand Down
41 changes: 25 additions & 16 deletions src/screens/onboarding/views/Permissions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,31 +7,40 @@ export const Permissions = () => {
const [i18n] = useI18n();
return (
<ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={styles.content}>
<Box paddingHorizontal="xl">
<Box paddingHorizontal="l" marginTop="m">
<Text
variant="bodyTitle"
color="overlayBodyText"
marginHorizontal="l"
marginBottom="l"
textAlign="center"
accessibilityRole="header"
>
<Box flex={1} marginTop="xl" paddingHorizontal="xl">
<Box marginTop="m">
<Text variant="bodyTitle" color="overlayBodyText" marginBottom="l" accessibilityRole="header">
{i18n.translate('OnboardingPermissions.Title')}
</Text>
</Box>
<Box marginBottom="l">
<Text variant="bodyText" color="overlayBodyText" textAlign="center">

<Box flexDirection="row" marginBottom="l">
<Text marginRight="s">
<span role="img" aria-label={i18n.translate('X')}>
❌
</span>
</Text>
<Text variant="bodyText" color="overlayBodyText" marginRight="m">
{i18n.translate('OnboardingPermissions.Body')}
</Text>
</Box>
<Box marginBottom="l">
<Text variant="bodyText" color="overlayBodyText" textAlign="center">
<Box flexDirection="row" marginBottom="l">
<Text marginRight="s">
<span role="img" aria-label={i18n.translate('X')}>
❌
</span>
</Text>
<Text variant="bodyText" color="overlayBodyText" marginRight="m">
{i18n.translate('OnboardingPermissions.Body2')}
</Text>
</Box>
<Box marginBottom="l">
<Text variant="bodyText" color="overlayBodyText" textAlign="center">
<Box flexDirection="row" alignItems="center" marginBottom="l">
<Text marginRight="s">
<span role="img" aria-label={i18n.translate('X')}>
❌
</span>
</Text>
<Text variant="bodyText" color="overlayBodyText" marginRight="m">
{i18n.translate('OnboardingPermissions.Body3')}
</Text>
</Box>
Expand Down
52 changes: 20 additions & 32 deletions src/screens/onboarding/views/Start.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,45 +1,33 @@
import React from 'react';
import {ScrollView, StyleSheet} from 'react-native';
import {Box, Text, Button, Icon} from 'components';
import {useNavigation} from '@react-navigation/native';
import {Box, Text} from 'components';
import {useI18n} from '@shopify/react-i18n';

export const Start = () => {
const [i18n] = useI18n();
const navigation = useNavigation();
return (
<ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={styles.content}>
<Box paddingHorizontal="xl">
<Box paddingHorizontal="l" marginTop="m">
<Text
variant="bodyTitle"
color="overlayBodyText"
marginHorizontal="l"
marginBottom="l"
textAlign="center"
accessibilityRole="header"
>
<Box flex={1} marginTop="xl" paddingHorizontal="xl">
<Box marginTop="m">
<Text variant="bodyTitle" color="overlayBodyText" marginBottom="l" accessibilityRole="header">
{i18n.translate('OnboardingStart.Title')}
</Text>
</Box>
<Box flexDirection="row" alignItems="center" marginBottom="l">
<Icon size={30} name="icon-notifications" />
<Text variant="bodyText" color="overlayBodyText" marginLeft="m" marginRight="m">
{i18n.translate('OnboardingStart.Body1')}
</Text>
</Box>
<Box flexDirection="row" alignItems="center" marginBottom="l">
<Icon size={30} name="icon-notify" />
<Text variant="bodyText" color="overlayBodyText" marginLeft="m" marginRight="m">
{i18n.translate('OnboardingStart.Body2')}
</Text>
</Box>
<Box flexDirection="row" justifyContent="space-around" alignItems="center" marginBottom="l">
<Button
text={i18n.translate('OnboardingStart.TutorialAction')}
variant="bigFlatWhite"
onPress={() => navigation.navigate('Tutorial')}
/>

<Box flexDirection="row" marginBottom="l">
<Text variant="bodyText" color="overlayBodyText" marginRight="m">
{i18n.translate('OnboardingStart.Body1')}
</Text>
</Box>
<Box flexDirection="row" marginBottom="l">
<Text variant="bodyText" color="overlayBodyText" marginRight="m">
{i18n.translate('OnboardingStart.Body2')}
</Text>
</Box>
<Box flexDirection="row" marginBottom="l">
<Text variant="bodyText" color="overlayBodyText" marginRight="m">
{i18n.translate('OnboardingStart.Body3')}
</Text>
</Box>
</Box>
</Box>
</ScrollView>
Expand Down
72 changes: 72 additions & 0 deletions src/screens/onboarding/views/YourData.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
import React from 'react';
import {ScrollView, StyleSheet} from 'react-native';
import {Box, Text} from 'components';
import {useI18n} from '@shopify/react-i18n';

export const YourData = () => {
const [i18n] = useI18n();
return (
<ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={styles.content}>
<Box flex={1} marginTop="xl" paddingHorizontal="xl">
<Box marginTop="m">
<Text variant="bodyTitle" color="overlayBodyText" marginBottom="l" accessibilityRole="header">
{i18n.translate('YourData.Title')}
</Text>
</Box>

<Box flexDirection="row" marginBottom="l">
<Text variant="bodyText" color="overlayBodyText" marginRight="m">
{i18n.translate('YourData.Body')}
</Text>
</Box>
<Box flexDirection="row" marginBottom="l">
<Text marginRight="s">
<span role="img" aria-label={i18n.translate('X')}>
❌
</span>
</Text>
<Text variant="bodyText" color="overlayBodyText" marginRight="m">
{i18n.translate('YourData.Body1')}
</Text>
</Box>
<Box flexDirection="row" marginBottom="l">
<Text marginRight="s">
<span role="img" aria-label={i18n.translate('X')}>
❌
</span>
</Text>
<Text variant="bodyText" color="overlayBodyText" marginRight="m">
{i18n.translate('YourData.Body2')}
</Text>
</Box>
<Box flexDirection="row" alignItems="center" marginBottom="l">
<Text marginRight="s">
<span role="img" aria-label={i18n.translate('X')}>
❌
</span>
</Text>
<Text variant="bodyText" color="overlayBodyText" marginRight="m">
{i18n.translate('YourData.Body3')}
</Text>
</Box>
<Box flexDirection="row" alignItems="center" marginBottom="l">
<Text variant="bodyText" color="overlayBodyText" marginRight="m">
{i18n.translate('YourData.Body4')}
</Text>
</Box>
<Box flexDirection="row" alignItems="center" marginBottom="l">
<Text variant="bodyText" color="overlayBodyText" marginRight="m">
{i18n.translate('YourData.Body5')}
</Text>
</Box>
</Box>
</ScrollView>
);
};

const styles = StyleSheet.create({
content: {
flexGrow: 1,
justifyContent: 'center',
},
});

0 comments on commit b54fc27

Please sign in to comment.