Merge branch 'develop' into ts-dev-setup-tests

* develop:
  Fix usage of URL from a Healthcare Authority (#507)
  Event history UX update (#467)
  Move Google import block, disable for release builds (#505)
  Add French translation (#490)
  Notify "Location tracking was disabled" on Android (#503)
  Russian Translation by Ksenia Lukacher (#479)
  Feature/cn-language (#493)
  Italian i18n updates from @andreanuzzo, @diarmidmackenzie (#498)
  Android StatusBar transparency fix (#497)
  Remove hardcoded link to Haitian health authority (#499)
  Spanish Translation from Miquel Vila Porte (#491)
  Configure Android to use singleTask launchMode (#501)

.prettierignore

@@ -2,7 +2,6 @@ node_modules/
 ios/
 android/
 patches/
-__tests__/
 package-lock.json
 yarn.lock
 package.json

android/app/src/main/AndroidManifest.xml

@@ -38,7 +38,8 @@
         android:screenOrientation="portrait"
         android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
         android:windowSoftInputMode="adjustResize"
-        android:exported="true">
+        android:exported="true"
+        android:launchMode="singleTask">
       </activity>
       <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
         <meta-data  android:name="com.dieam.reactnativepushnotification.notification_channel_name"

app/Entry.js

@@ -10,12 +10,12 @@ import { GetStoreData } from './helpers/General';
 import AboutScreen from './views/About';
 import ChooseProviderScreen from './views/ChooseProvider';
 import ExportScreen from './views/Export';
+import { ExposureHistoryScreen } from './views/ExposureHistory/ExposureHistory';
 import ImportScreen from './views/Import';
 import LicencesScreen from './views/Licenses';
 import LocationTracking from './views/LocationTracking';
 import MapLocation from './views/MapLocation';
 import NewsScreen from './views/News';
-import NotificationScreen from './views/Notification';
 import Onboarding1 from './views/onboarding/Onboarding1';
 import Onboarding2 from './views/onboarding/Onboarding2';
 import Onboarding3 from './views/onboarding/Onboarding3';
@@ -135,8 +135,8 @@ class Entry extends Component {
             options={{ headerShown: false }}
           />
           <Stack.Screen
-            name='NotificationScreen'
-            component={NotificationScreen}
+            name='ExposureHistoryScreen'
+            component={ExposureHistoryScreen}
             options={{ headerShown: false }}
           />
           <Stack.Screen

app/Util.js

@@ -1,4 +1,4 @@
-import Moment from 'moment';
+import dayjs from 'dayjs';
 import { Platform } from 'react-native';
 
 export function isPlatformiOS() {
@@ -10,7 +10,7 @@ export function isPlatformAndroid() {
 }
 
 export function nowStr() {
-  return Moment(new Date()).format('H:mm');
+  return dayjs().format('H:mm');
 }
 
 export default {

app/components/NavigationBarWrapper.js

@@ -1,82 +1,96 @@
+import styled from '@emotion/native';
+import { useTheme } from 'emotion-theming';
 import PropTypes from 'prop-types';
 import * as React from 'react';
-import {
-  SafeAreaView,
-  StatusBar,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
+import { StatusBar } from 'react-native';
 import { SvgXml } from 'react-native-svg';
 
 import backArrow from './../assets/svgs/backArrow';
 import { isPlatformiOS } from './../Util';
 import Colors from '../constants/colors';
-import fontFamily from '../constants/fonts';
 
-class NavigationBarWrapper extends React.Component {
-  render() {
-    return (
-      <>
-        <StatusBar
-          barStyle='light-content'
-          backgroundColor={Colors.VIOLET}
-          translucent={isPlatformiOS()}
-        />
-        <SafeAreaView style={styles.topSafeAreaContainer} />
-        <SafeAreaView style={styles.bottomSafeAreaContainer}>
-          <View style={styles.headerContainer}>
-            <TouchableOpacity
-              style={styles.backArrowTouchable}
-              onPress={() => this.props.onBackPress()}>
-              <SvgXml style={styles.backArrow} xml={backArrow} />
-            </TouchableOpacity>
-            <Text style={styles.headerTitle}>{this.props.title}</Text>
-          </View>
-          {this.props.children}
-        </SafeAreaView>
-      </>
-    );
-  }
-}
+/**
+ * Navigation bar and status bar
+ *
+ * @param {{
+ *   title: string,
+ *   onBackPress: () => void,
+ * }} param0
+ */
+const NavigationBarWrapper = ({ children, title, onBackPress }) => {
+  const theme = useTheme();
 
-const styles = StyleSheet.create({
-  topSafeAreaContainer: {
-    flex: 0,
-    backgroundColor: Colors.VIOLET,
-  },
-  bottomSafeAreaContainer: {
-    flex: 1,
-    backgroundColor: Colors.INTRO_WHITE_BG,
-  },
-  headerContainer: {
-    flexDirection: 'row',
-    borderBottomWidth: 1,
-    borderBottomColor: Colors.NAV_BAR_VIOLET,
-    backgroundColor: Colors.VIOLET,
-  },
-  headerTitle: {
-    fontSize: 26,
-    fontFamily: fontFamily.primaryMedium,
-    color: Colors.WHITE,
-    position: 'absolute',
-    alignSelf: 'center',
-    textAlign: 'center',
-    width: '100%',
-  },
-  backArrowTouchable: {
-    width: 60,
-    height: 55,
-    justifyContent: 'center',
-    alignItems: 'center',
-    zIndex: 1,
-  },
-  backArrow: {
-    height: 18,
-    width: 18,
-  },
-});
+  const barColor = (theme && theme.navBar) || Colors.VIOLET;
+
+  return (
+    <>
+      <StatusBar
+        barStyle='light-content'
+        backgroundColor={barColor}
+        translucent={isPlatformiOS()}
+      />
+      <TopContainer />
+      <BottomContainer>
+        <Header>
+          <BackArrow onPress={() => onBackPress()}>
+            <BackArrowIcon xml={backArrow} />
+          </BackArrow>
+          <Title>{title}</Title>
+        </Header>
+        {children}
+      </BottomContainer>
+    </>
+  );
+};
+
+const themeNavBar = ({ theme }) => theme.navBar || Colors.VIOLET;
+
+// TODO: this breaks transitions...
+// const themeBackground = ({ theme }) =>
+//   theme.background || Colors.INTRO_WHITE_BG;
+
+const TopContainer = styled.SafeAreaView`
+  flex: 0;
+  background-color: ${themeNavBar};
+`;
+
+const BottomContainer = styled.SafeAreaView`
+  flex: 1;
+  background-color: ${Colors.INTRO_WHITE_BG};
+`;
+
+const themeNavBarBorder = ({ theme }) =>
+  theme.navBarBorder || Colors.NAV_BAR_VIOLET;
+
+const Header = styled.View`
+  background-color: ${themeNavBar};
+  border-bottom-color: ${themeNavBarBorder};
+  border-bottom-width: 1px;
+  flex-direction: row;
+`;
+
+const Title = styled.Text`
+  align-self: center;
+  color: ${Colors.WHITE};
+  font-family: IBMPlexSans-Medium;
+  font-size: 26px;
+  position: absolute;
+  text-align: center;
+  width: 100%;
+`;
+
+const BackArrow = styled.TouchableOpacity`
+  align-items: center;
+  height: 55px;
+  justify-content: center;
+  width: 60px;
+  z-index: 1;
+`;
+
+const BackArrowIcon = styled(SvgXml)`
+  height: 18px;
+  width: 18px;
+`;
 
 NavigationBarWrapper.propTypes = {
   title: PropTypes.string.isRequired,

app/components/Typography.js

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import styled from '@emotion/native';
+
+export const Type = {
+  Headline1: 'headline1',
+  Headline2: 'headline2',
+  Headline3: 'headline3',
+  Body1: 'body1',
+  Body2: 'body2',
+  Body3: 'body3',
+};
+
+/**
+ * Render a theme and visual style aware text element.
+ *
+ * It uses the theme's `text(Primary|Secondary)OnBackground` color and a set of
+ * predefined font size and line height values.
+ *
+ * Inspired by: https://material-components.github.io/material-components-web-catalog/#/component/typography
+ *
+ * Usage:
+ *
+ * ```jsx
+ * <Theme use="charcoal">
+ *   <Typography use="headline2">Heading</Typography>
+ *   <Typography use="body1" secondary>Paragraph text ...</Typography>
+ *   <Typography use="body2" monospace>link</Typography>
+ * </Theme>
+ * ```
+ *
+ * Use within a `<ThemeProvider>`
+ *
+ * @param {{
+ *   use?: string,
+ *   secondary?: boolean,
+ *   monospace?: boolean,
+ * }} param0
+ */
+export const Typography = ({
+  use = Type.Body1,
+  secondary,
+  monospace,
+  children,
+  ...otherProps
+}) => {
+  return (
+    <ThemedText
+      use={use}
+      secondary={secondary}
+      monospace={monospace}
+      {...otherProps}>
+      {children}
+    </ThemedText>
+  );
+};
+
+const FONT_SIZE_MAP = {
+  [Type.Headline1]: '52px',
+  [Type.Headline2]: '26px',
+  [Type.Headline3]: '16px',
+  [Type.Body1]: '18px',
+  [Type.Body2]: '16px',
+  [Type.Body3]: '15px',
+};
+
+const getFontSize = ({ use = Type.Body1 }) => FONT_SIZE_MAP[use];
+
+const LINE_HEIGHT_MAP = {
+  [Type.Headline1]: '48px',
+  [Type.Headline2]: '34px',
+  [Type.Headline3]: '40px',
+  [Type.Body1]: '24px',
+  [Type.Body2]: '22px',
+  [Type.Body3]: '24px',
+};
+
+const getLineHeight = ({ use = Type.Body1 }) => LINE_HEIGHT_MAP[use];
+
+const getTextColor = ({ theme, secondary = false }) =>
+  secondary ? theme.textSecondaryOnBackground : theme.textPrimaryOnBackground;
+
+const getFontWeight = ({ use = Type.Body1 }) =>
+  use.startsWith('headline') ? 'bold' : 'normal';
+
+const ThemedText = styled.Text`
+  color: ${getTextColor};
+  font-family: ${({ monospace }) =>
+    monospace ? 'IBM Plex Mono' : 'IBM Plex Sans'};
+  font-size: ${getFontSize};
+  font-weight: ${getFontWeight};
+  line-height: ${getLineHeight};
+`;

app/components/__tests__/Typography.spec.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+
+import { Typography } from '../Typography';
+import { Theme } from '../../constants/themes';
+
+it('headline1 is large and bold', () => {
+  const { asJSON } = render(
+    <Theme>
+      <Typography use='headline1'>headline1</Typography>
+    </Theme>,
+  );
+
+  expect(asJSON()).toMatchSnapshot();
+});
+
+it('body1 is regular', () => {
+  const { asJSON } = render(
+    <Theme>
+      <Typography use='body1'>body1</Typography>
+    </Theme>,
+  );
+
+  expect(asJSON()).toMatchSnapshot();
+});
+
+it('changes color based on theme', () => {
+  const { asJSON } = render(
+    <>
+      <Theme use='charcoal'>
+        <Typography use='body1'>white</Typography>
+      </Theme>
+      <Theme use='default'>
+        <Typography use='body1'>violet</Typography>
+      </Theme>
+    </>,
+  );
+
+  expect(asJSON()).toMatchSnapshot();
+});