cds-snc · timarney · Jul 8, 2020 · Jul 7, 2020 · Jul 7, 2020 · Jul 8, 2020
diff --git a/src/assets/icon-x.svg b/src/assets/icon-x.svg
diff --git a/src/assets/privacypolicy-fr.js b/src/assets/privacypolicy-fr.js
@@ -1,4 +1,4 @@
-const privacy = `# Votre vie privée est protégée
+const privacy = `## Votre vie privée est protégée
 
 Alerte COVID suit tous les principes du Commissariat à la protection de la vie privée du Canada sur les applications de traçage pour protéger la vie privée des personnes.
 

diff --git a/src/assets/privacypolicy.js b/src/assets/privacypolicy.js
@@ -1,4 +1,4 @@
-const privacy = `# Your privacy is protected
+const privacy = `## Your privacy is protected
 
 COVID Alert follows all the principles of the Privacy Commissioner of Canada for contact tracing apps to protect people's privacy.
 

diff --git a/src/components/BulletPointCheck.tsx b/src/components/BulletPointCheck.tsx
@@ -3,7 +3,7 @@ import {Box, Text, Icon} from 'components';
 
 export const BulletPointCheck = ({text}: {text: string}) => {
   return (
-    <Box flexDirection="row" marginBottom="m">
+    <Box flexDirection="row" marginBottom="s">
       <Box marginTop="xxs" flex={0}>
         <Icon size={20} name="icon-green-check" />
       </Box>

diff --git a/src/components/BulletPointX.tsx b/src/components/BulletPointX.tsx
@@ -3,7 +3,7 @@ import {Box, Text, Icon} from 'components';
 
 export const BulletPointX = ({text}: {text: string}) => {
   return (
-    <Box flexDirection="row" marginBottom="l">
+    <Box flexDirection="row" marginBottom="m">
       <Box marginTop="xxs">
         <Icon size={20} name="icon-x" />
       </Box>

diff --git a/src/components/ButtonSingleLine.tsx b/src/components/ButtonSingleLine.tsx
@@ -3,7 +3,6 @@ import {useTheme} from '@shopify/restyle';
 import {
   Platform,
   StyleSheet,
-  Text,
   TextStyle,
   TouchableOpacity,
   ViewStyle,
@@ -16,6 +15,7 @@ import {useI18n} from '@shopify/react-i18n';
 import {Box} from './Box';
 import {Ripple} from './Ripple';
 import {Icon, IconName} from './Icon';
+import {Text} from './Text';
 
 export interface ButtonSingleLineProps {
   text?: string;
@@ -45,16 +45,8 @@ export const ButtonSingleLine = ({
   const variantProps = theme.buttonVariants[variant];
   const disabledProps = disabled ? variantProps.disabled || {} : {};
   const themedStyles = {...variantProps, ...disabledProps};
-  const {
-    fontSize,
-    fontWeight,
-    fontFamily,
-    color,
-    borderWidth,
-    height,
-    borderBottomWidth,
-    borderBottomColor,
-  } = (themedStyles as unknown) as TextStyle & ViewStyle;
+  const {color, borderWidth, height, borderBottomWidth, borderBottomColor} = (themedStyles as unknown) as TextStyle &
+    ViewStyle;
   const textColor = themedStyles.textColor;
   const buttonColor = buttonColorName && theme.colors[buttonColorName];
 
@@ -106,12 +98,10 @@ export const ButtonSingleLine = ({
           )}
           <Box flex={1} marginLeft="s" alignItems="flex-start" justifyContent="flex-end">
             <Text
+              variant="menuItemTitle"
               style={{
                 ...styles.content,
                 color: textColor || buttonColor,
-                fontWeight,
-                fontFamily,
-                fontSize,
               }}
             >
               {text}
@@ -130,7 +120,7 @@ export const ButtonSingleLine = ({
 
   if (Platform.OS === 'android') {
     return (
-      <Ripple rippleContainerBorderRadius={4} onPress={onPressHandler} {...accessibilityProps}>
+      <Ripple rippleContainerBorderRadius={10} onPress={onPressHandler} {...accessibilityProps}>
         {content}
       </Ripple>
     );

diff --git a/src/components/InfoBlock.tsx b/src/components/InfoBlock.tsx
@@ -33,27 +33,27 @@ export const InfoBlock = ({
   return (
     <Box borderRadius={10} backgroundColor={backgroundColor} padding="m" alignItems="flex-start">
       {icon && (
-        <Box marginBottom="m">
+        <Box marginBottom="s">
           <Icon name={icon} size={24} />
         </Box>
       )}
       {(title || titleBolded) && (
-        <Box marginBottom="m" justifyContent="center" flexDirection="row" flexWrap="wrap">
-          <Text variant="overlayTitle" accessibilityRole="header" textAlign="center">
+        <Box marginBottom="s" justifyContent="center" flexDirection="row" flexWrap="wrap">
+          <Text variant="menuItemTitle" accessibilityRole="header" textAlign="center">
             {title && <Text color={color}>{title}</Text>}
             {titleBolded && (
-              <Text color={color} fontFamily="Noto Sans" fontWeight="bold">
+              <Text color={color} variant="menuItemTitle" fontWeight="bold">
                 {titleBolded}
               </Text>
             )}
           </Text>
         </Box>
       )}
-      <Text variant="bodyText" color={color} marginBottom="m">
+      <Text variant="bodyText" color={color}>
         {text}
       </Text>
       {showButton ? (
-        <Box marginHorizontal="none" alignSelf="stretch">
+        <Box marginTop="m" marginHorizontal="none" alignSelf="stretch">
           <Button text={buttonText} onPress={action} variant="thinFlat" color={color} />
         </Box>
       ) : null}

diff --git a/src/components/InfoButton.tsx b/src/components/InfoButton.tsx
@@ -3,7 +3,6 @@ import {useTheme} from '@shopify/restyle';
 import {
   Platform,
   StyleSheet,
-  Text,
   TextStyle,
   TouchableOpacity,
   ViewStyle,
@@ -16,6 +15,7 @@ import {useI18n} from '@shopify/react-i18n';
 import {Box} from './Box';
 import {Ripple} from './Ripple';
 import {Icon} from './Icon';
+import {Text} from './Text';
 
 export interface InfoButtonProps {
   title?: string;
@@ -45,7 +45,7 @@ export const InfoButton = ({
   const variantProps = theme.buttonVariants[variant];
   const disabledProps = disabled ? variantProps.disabled || {} : {};
   const themedStyles = {...variantProps, ...disabledProps};
-  const {fontSize, fontWeight, fontFamily, borderWidth, height} = (themedStyles as unknown) as TextStyle & ViewStyle;
+  const {borderWidth, height} = (themedStyles as unknown) as TextStyle & ViewStyle;
   const textColor = themedStyles.textColor;
   const buttonColor = buttonColorName && theme.colors[buttonColorName];
 
@@ -74,10 +74,10 @@ export const InfoButton = ({
       ) : (
         <>
           <Box>
-            <Text style={{...styles.contentBold, fontFamily, fontSize}}>{title}</Text>
-            <Text style={{...styles.content, color: textColor || buttonColor, fontWeight, fontFamily, fontSize}}>
-              {text}
+            <Text variant="menuItemTitle" fontWeight="bold" marginBottom="s">
+              {title}
             </Text>
+            <Text variant="menuItemTitle">{text}</Text>
           </Box>
           <Box style={{...styles.chevronOffset}}>
             {externalLink && <Icon name={externalArrowIcon} />}

diff --git a/src/screens/home/components/BaseHomeView.tsx b/src/screens/home/components/BaseHomeView.tsx
@@ -13,9 +13,9 @@ export const BaseHomeView = ({children, iconName}: BaseHomeViewProps) => {
     <SafeAreaView style={styles.flex}>
       <Header />
       <ScrollView contentContainerStyle={[styles.scrollContainer]} bounces={false}>
-        <Box width="100%" justifyContent="flex-start">
+        <Box width="100%" justifyContent="flex-start" marginBottom="-l">
           <Box style={{...styles.primaryIcon}}>
-            <Icon name={iconName} size={150} />
+            <Icon name={iconName} size={120} />
           </Box>
         </Box>
         <Box width="100%" flex={1} alignItems="flex-start" justifyContent="flex-start" paddingHorizontal="m">
@@ -29,7 +29,7 @@ export const BaseHomeView = ({children, iconName}: BaseHomeViewProps) => {
 const styles = StyleSheet.create({
   primaryIcon: {marginLeft: 0, marginBottom: 30},
   flex: {
-    flex: 1,
+    flex: 0,
   },
   scrollContainerWithAnimation: {
     marginTop: -100,

diff --git a/src/screens/home/views/CollapsedOverlayView.tsx b/src/screens/home/views/CollapsedOverlayView.tsx
@@ -29,7 +29,7 @@ export const CollapsedOverlayView = ({status, notificationWarning, bottomSheetBe
             <Icon name="sheet-handle-bar" size={36} />
           </View>
           <Box>
-            <Box marginBottom="m">
+            <Box marginBottom="s">
               <StatusHeaderView enabled={status === SystemStatus.Active} />
             </Box>
             {notificationWarning && (
@@ -43,11 +43,11 @@ export const CollapsedOverlayView = ({status, notificationWarning, bottomSheetBe
                 justifyContent="center"
                 flexDirection="row"
               >
-                <Text variant="overlayTitle" color="overlayBodyText" accessibilityRole="header">
+                <Text variant="menuItemTitle" color="overlayBodyText" accessibilityRole="header">
                   {i18n.translate('OverlayClosed.NotificationStatus')}
                 </Text>
                 <Text
-                  variant="overlayTitle"
+                  variant="menuItemTitle"
                   color="overlayBodyText"
                   fontFamily="Noto Sans"
                   fontWeight="bold"

diff --git a/src/screens/home/views/DiagnosedShareView.tsx b/src/screens/home/views/DiagnosedShareView.tsx
@@ -18,11 +18,11 @@ export const DiagnosedShareView = () => {
       <Text variant="bodyText" color="bodyText" marginBottom="m">
         {i18n.translate('Home.DiagnosedShareView.Body1')}
       </Text>
-      <Text variant="bodyText" color="bodyText" marginBottom="m">
+      <Text variant="bodyText" color="bodyText">
         <Text fontWeight="bold">{i18n.translate('Home.DiagnosedShareView.Body2')}</Text>
         {i18n.translate('Home.DiagnosedShareView.Body3')}
       </Text>
-      <Box alignSelf="stretch" marginTop="xl" marginBottom="xl">
+      <Box alignSelf="stretch" marginTop="l" marginBottom="xl">
         <ButtonSingleLine
           text={i18n.translate('Home.DiagnosedShareView.ButtonCTA')}
           variant="bigFlat"

diff --git a/src/screens/home/views/ExposureNotificationsDisabledView.tsx b/src/screens/home/views/ExposureNotificationsDisabledView.tsx
@@ -27,10 +27,10 @@ export const ExposureNotificationsDisabledView = () => {
       <Text variant="bodyTitle" color="bodyText" marginBottom="m" accessibilityRole="header">
         {i18n.translate('Home.ExposureNotificationsDisabled')}
       </Text>
-      <Text variant="bodyText" color="bodyText" marginBottom="m">
+      <Text variant="bodyText" color="bodyText">
         {i18n.translate('Home.ExposureNotificationsDisabledDetailed')}
       </Text>
-      <Box alignSelf="stretch" marginBottom="xl" marginTop="xl">
+      <Box alignSelf="stretch" marginBottom="l" marginTop="l">
         <ButtonSingleLine
           text={i18n.translate('Home.EnableExposureNotificationsCTA')}
           variant="danger50Flat"

diff --git a/src/screens/home/views/ExposureView.tsx b/src/screens/home/views/ExposureView.tsx
@@ -44,7 +44,7 @@ export const ExposureView = () => {
         <Text fontWeight="bold">{i18n.translate('Home.ExposureDetected.Body3')}</Text>
       </Text>
 
-      <Box alignSelf="stretch" marginTop="xxl" marginBottom="m">
+      <Box alignSelf="stretch" marginTop="l" marginBottom="m">
         <ButtonSingleLine text={getGuidanceCTA()} variant="bigFlatPurple" externalLink onPress={onActionGuidance} />
       </Box>
       <Box alignSelf="stretch" marginBottom="xl">

diff --git a/src/screens/home/views/InfoShareView.tsx b/src/screens/home/views/InfoShareView.tsx
@@ -8,7 +8,7 @@ interface InfoShareItemProps extends TouchableOpacityProps {
   onPress: () => void;
   text: string;
   icon: IconProps['name'];
-  lastItem: boolean;
+  lastItem?: boolean;
 }
 const InfoShareItem = ({onPress, text, icon, lastItem, ...touchableProps}: InfoShareItemProps) => (
   <>
@@ -47,22 +47,21 @@ export const InfoShareView = () => {
   return (
     <>
       <Box marginTop="l" marginBottom="m">
-        <Text variant="overlayTitle">{i18n.translate('Info.SettingsTitle')}</Text>
+        <Text variant="settingTitle" fontWeight="normal">
+          {i18n.translate('Info.SettingsTitle')}
+        </Text>
       </Box>
       <Box paddingHorizontal="m" borderRadius={10} overflow="hidden" marginBottom="m">
-        <InfoShareItem
-          onPress={onRegion}
-          text={i18n.translate('Info.ChangeRegion')}
-          icon="icon-chevron"
-          lastItem={false}
-        />
+        <InfoShareItem onPress={onRegion} text={i18n.translate('Info.ChangeRegion')} icon="icon-chevron" />
         <InfoShareItem onPress={onLanguage} text={i18n.translate('Info.ChangeLanguage')} icon="icon-chevron" lastItem />
       </Box>
       <Box marginTop="l" marginBottom="m">
-        <Text variant="overlayTitle">{i18n.translate('Info.InformationTitle')}</Text>
+        <Text variant="settingTitle" fontWeight="normal">
+          {i18n.translate('Info.InformationTitle')}
+        </Text>
       </Box>
       <Box paddingHorizontal="m" borderRadius={10} overflow="hidden" marginBottom="l">
-        <InfoShareItem lastItem={false} onPress={onGetCode} text={i18n.translate('Info.GetCode')} icon="icon-chevron" />
+        <InfoShareItem onPress={onGetCode} text={i18n.translate('Info.GetCode')} icon="icon-chevron" />
         <InfoShareItem
           lastItem={false}
           onPress={onLearnMore}

diff --git a/src/screens/home/views/StatusHeaderView.tsx b/src/screens/home/views/StatusHeaderView.tsx
@@ -10,16 +10,14 @@ export const StatusHeaderView = ({enabled}: Props) => {
   const color = enabled ? 'statusSuccess' : 'statusError';
   return (
     <Box justifyContent="center" flexDirection="row" alignItems="flex-start" paddingHorizontal="m">
-      <Box paddingTop="xs" flexDirection="row" flexWrap="wrap">
-        <Text>
-          <Text variant="overlayTitle" lineHeight={19} color={color}>
-            {i18n.translate('OverlayClosed.SystemStatus')}
-          </Text>
-          <Text variant="overlayTitle" lineHeight={19} color={color} fontFamily="Noto Sans" fontWeight="bold">
-            {enabled ? i18n.translate('OverlayClosed.SystemStatusOn') : i18n.translate('OverlayClosed.SystemStatusOff')}
-          </Text>
+      <Text>
+        <Text variant="overlayTitle" color={color}>
+          {i18n.translate('OverlayClosed.SystemStatus')}
         </Text>
-      </Box>
+        <Text variant="overlayTitle" color={color} fontWeight="bold">
+          {enabled ? i18n.translate('OverlayClosed.SystemStatusOn') : i18n.translate('OverlayClosed.SystemStatusOff')}
+        </Text>
+      </Text>
     </Box>
   );
 };
diff --git a/src/screens/language/Language.tsx b/src/screens/language/Language.tsx
@@ -10,11 +10,21 @@ interface LanguageSelectItemProps {
   onPress: () => void;
   text: string;
   isActive?: boolean;
+  lastItem?: boolean;
 }
-const LanguageSelectItem = ({onPress, text, isActive}: LanguageSelectItemProps) => (
+const LanguageSelectItem = ({onPress, text, lastItem, isActive}: LanguageSelectItemProps) => (
   <>
     <TouchableOpacity onPress={onPress} accessibilityRole="radio" accessibilityState={{selected: isActive}}>
-      <Box paddingVertical="s" flexDirection="row" alignContent="center" justifyContent="space-between">
+      <Box
+        paddingVertical="s"
+        marginHorizontal="-m"
+        paddingHorizontal="m"
+        borderRadius={5}
+        flexDirection="row"
+        alignContent="center"
+        justifyContent="space-between"
+        backgroundColor="infoBlockNeutralBackground"
+      >
         <Text variant="bodyText" marginVertical="s" color="overlayBodyText">
           {text}
         </Text>
@@ -25,7 +35,7 @@ const LanguageSelectItem = ({onPress, text, isActive}: LanguageSelectItemProps)
         )}
       </Box>
     </TouchableOpacity>
-    <Box height={1} marginHorizontal="-m" backgroundColor="overlayBackground" />
+    {!lastItem && <Box height={5} marginHorizontal="-m" backgroundColor="overlayBackground" />}
   </>
 );
 
@@ -45,18 +55,21 @@ export const LanguageScreen = () => {
     <Box backgroundColor="overlayBackground" flex={1}>
       <SafeAreaView style={styles.flex}>
         <Toolbar
-          title={i18n.translate('LanguageSelect.Title')}
+          title=""
           navIcon="icon-back-arrow"
           navText={i18n.translate('LanguageSelect.Close')}
           navLabel={i18n.translate('LanguageSelect.Close')}
           onIconClicked={close}
         />
         <ScrollView>
+          <Text paddingHorizontal="m" variant="bodyTitle" color="bodyText" accessibilityRole="header">
+            {i18n.translate('LanguageSelect.Title')}
+          </Text>
           <Box
             marginHorizontal="m"
             paddingHorizontal="m"
             borderRadius={10}
-            backgroundColor="infoBlockNeutralBackground"
+            overflow="hidden"
             marginTop="m"
             accessibilityRole="radiogroup"
           >
@@ -69,6 +82,7 @@ export const LanguageScreen = () => {
               onPress={toggle('fr')}
               text={i18n.translate('LanguageSelect.Fr')}
               isActive={i18n.locale === 'fr'}
+              lastItem
             />
           </Box>
         </ScrollView>

diff --git a/src/screens/nocode/NoCode.tsx b/src/screens/nocode/NoCode.tsx
@@ -1,6 +1,6 @@
 import React, {useCallback} from 'react';
 import {ScrollView, StyleSheet, Linking} from 'react-native';
-import {Box, Text, Toolbar, ButtonSingleLine, ButtonMultiline} from 'components';
+import {Box, Text, Toolbar, ButtonSingleLine} from 'components';
 import {useI18n} from '@shopify/react-i18n';
 import {useNavigation} from '@react-navigation/native';
 import {useStorage} from 'services/StorageService';
@@ -20,7 +20,7 @@ interface ContentProps {
 const Content = ({title, body, list, externalLinkText, externalLinkCTA}: ContentProps) => {
   const externalLinkButton =
     externalLinkCTA && externalLinkText ? (
-      <ButtonMultiline
+      <ButtonSingleLine
         variant="bigFlat"
         text={externalLinkText}
         onPress={() => Linking.openURL(externalLinkCTA).catch(err => console.error('An error occurred', err))}