Merge pull request #46 from cds-snc/no-exposure-text

Format text for no exposure screen
CovidShield · Jun 18, 2020 · 84b0742 · 84b0742
2 parents 9bf68ef + 7cb15ec
commit 84b0742
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 9 deletions.
diff --git a/src/components/LastCheckedDisplay.tsx b/src/components/LastCheckedDisplay.tsx
@@ -5,7 +5,11 @@ import {useExposureStatus} from 'services/ExposureNotificationService';
 import {daysFromNow, hoursFromNow, minutesFromNow} from 'shared/date-fns';
 import {pluralizeKey} from 'shared/pluralization';
 
-export const LastCheckedDisplay = () => {
+export interface LastCheckedDisplayProps {
+  textDark: boolean;
+}
+
+export const LastCheckedDisplay = ({textDark}: LastCheckedDisplayProps) => {
   const [i18n] = useI18n();
   const [exposureStatus] = useExposureStatus();
   if (!exposureStatus.lastChecked) return null;
@@ -25,9 +29,13 @@ export const LastCheckedDisplay = () => {
 
   return (
     <Box marginTop="s">
-      <Text variant="smallText" color="bodyTextFaded" lineHeight={24} textAlign="center">
+      <Text variant="smallText" color={textDark ? 'bodyText' : 'bodyTextFaded'} lineHeight={24} textAlign="center">
         {text}
       </Text>
     </Box>
   );
 };
+
+LastCheckedDisplay.defaultProps = {
+  textDark: false,
+};
diff --git a/src/screens/home/views/NoExposureView.tsx b/src/screens/home/views/NoExposureView.tsx
@@ -4,9 +4,12 @@ import {Text, Box, Button, LastCheckedDisplay} from 'components';
 import {useI18n} from '@shopify/react-i18n';
 import {useStorage} from 'services/StorageService';
 import {getRegionCase} from 'shared/RegionLogic';
+import {Theme} from 'shared/theme';
 
 import {BaseHomeView} from '../components/BaseHomeView';
 
+type Color = keyof Theme['colors'];
+
 export const NoExposureView = () => {
   const [i18n] = useI18n();
   const {region} = useStorage();
@@ -15,8 +18,16 @@ export const NoExposureView = () => {
 
   // console.log('the region', regionCase);
 
-  const titleTextColor = 'bodyTitleWhite';
-  const bodyTextColor = 'bodyTextWhite';
+  let titleTextColor = 'bodyTitleWhite';
+  let bodyTextColor = 'bodyTextWhite';
+
+  if (regionCase === 'regionCovered') {
+    titleTextColor = 'successText';
+    bodyTextColor = 'bodyText';
+  }
+
+  const titleColor: Color = titleTextColor as Color;
+  const textColor: Color = bodyTextColor as Color;
 
   const onAction = useCallback(() => {
     Linking.openURL(i18n.translate('Home.GuidanceUrl')).catch(err => console.error('An error occurred', err));
@@ -37,14 +48,14 @@ export const NoExposureView = () => {
   return (
     // note you can add an icon i.e. <BaseHomeView iconName="icon-offline>
     <BaseHomeView>
-      <Text variant="bodyTitle" color={titleTextColor} marginBottom="l" accessibilityRole="header">
+      <Text variant="bodyTitle" color={titleColor} marginBottom="l" accessibilityRole="header">
         {i18n.translate(regionTranslationsTitle[regionCase])}
       </Text>
-      <Text variant="bodyText" color={bodyTextColor} marginBottom="l">
+      <Text variant="bodyText" color={textColor} marginBottom="l">
         {i18n.translate(regionTranslationsBody[regionCase])}
       </Text>
 
-      <LastCheckedDisplay />
+      <LastCheckedDisplay textDark />
 
       <Box alignSelf="stretch" marginTop="l" marginBottom="l">
         <Button text={i18n.translate('Home.How')} variant="opaqueGrey" externalLink onPress={onAction} />

diff --git a/src/shared/theme/default.ts b/src/shared/theme/default.ts
@@ -1,7 +1,7 @@
 export const palette = {
   brandBlue: '#26374A',
   linkBlue: '#0278A4',
-  bodyBlack: '#212121',
+  bodyBlack: '#000000',
   bodySubdued: '#5B5B5B',
   greenBright: '#A4DE82',
   white: '#FFFFFF',
@@ -10,7 +10,7 @@ export const palette = {
   fadedWhite: 'rgba(0, 0, 0, 0.2)',
   successLight: '#D8EECA',
   success: '#278400',
-  successDark: '#2B542C',
+  successDark: '#003620',
   errorLight: '#F3E9EB',
   error: '#D3080C',
   errorDark: '#923534',
@@ -38,6 +38,7 @@ const theme = {
     overlayBodyText: palette.bodyBlack,
     fadedBackground: palette.fadedWhite,
     bodyText: palette.bodyBlack,
+    successText: palette.successDark,
     bodyTitleWhite: palette.white,
     bodyTextWhite: palette.white,
     bodyTextNutmeg: palette.nutmeg,