UI v3

.gitattributes

@@ -1 +1,3 @@
 *.pbxproj -text
+*.tsx text eol=lf
+*.js text eol=lf

.prettierrc.js

@@ -3,4 +3,5 @@ module.exports = {
   jsxBracketSameLine: true,
   singleQuote: true,
   trailingComma: 'all',
+  endOfLine: 'lf',
 };

App/App.tsx

@@ -7,47 +7,22 @@
  *
  * @format
  */
-import React, {useEffect, Suspense} from 'react';
-import 'react-native-get-random-values';
 import {NavigationContainer} from '@react-navigation/native';
 import {createStackNavigator} from '@react-navigation/stack';
-import {Loading} from './screens/Loading';
-import {AlphaWarning} from './screens/AlphaWarning';
-import {Onboarding} from './screens/Onboarding';
-import {OnboardingHow} from './screens/OnboardingHow';
-import {HomeBluetooth} from './screens/HomeBluetooth';
-import {HomeTourOLD} from './screens/HomeTourOLD';
-import {HomeTour} from './screens/HomeTour';
-import {Endangerment} from './screens/Endangerment';
-import {BluetoothNotification} from './screens/BluetoothNotification';
-import {SymptomInfo} from './screens/SymptomInfo';
-import {DataUpload} from './screens/DataUpload';
-import {AlphaPositiveResult} from './screens/AlphaPositiveResult';
-import {IDMatch} from './screens/IDMatch';
-import AsyncStorage from '@react-native-community/async-storage'; // eslint-disable-line @typescript-eslint/no-unused-vars
-import {PositiveResult} from './screens/PositiveResult';
-import {Upload} from './screens/Upload';
+import React, {Suspense, useEffect} from 'react';
+import 'react-native-get-random-values';
+import {Bluetooth} from './screens/Bluetooth';
 import {Home} from './screens/Home';
+import {Loading} from './screens/Loading';
+import {Infected} from './screens/Infected';
 
 const Stack = createStackNavigator();
 
 export type RootStackParamList = {
   Loading: undefined;
-  AlphaWarning: undefined;
-  Onboarding: undefined;
-  OnboardingHow: undefined;
-  HomeTourOLD: undefined;
-  HomeTour: undefined;
-  HomeBluetooth: undefined;
-  Endangerment: undefined;
-  BluetoothNotification: undefined;
-  SymptomInfo: undefined;
-  DataUpload: undefined;
-  AlphaPositiveResult: undefined;
-  IDMatch: undefined;
-  PositiveResult: undefined;
-  Upload: undefined;
+  Bluetooth: undefined;
   Home: undefined;
+  Infected: undefined;
 };
 
 declare const global: {HermesInternal: null | {}};
@@ -63,28 +38,9 @@ export const App: React.FC<void> = () => {
       <NavigationContainer>
         <Stack.Navigator initialRouteName="Loading" headerMode="none">
           <Stack.Screen name="Loading" component={Loading} />
-          <Stack.Screen name="AlphaWarning" component={AlphaWarning} />
-          <Stack.Screen name="Onboarding" component={Onboarding} />
-          <Stack.Screen name="OnboardingHow" component={OnboardingHow} />
-          <Stack.Screen name="HomeTour" component={HomeTour} />
-          <Stack.Screen name="HomeTourOLD" component={HomeTourOLD} />
-          <Stack.Screen name="HomeBluetooth" component={HomeBluetooth} />
-          <Stack.Screen name="Endangerment" component={Endangerment} />
-          <Stack.Screen name="PositiveResult" component={PositiveResult} />
-          <Stack.Screen name="Upload" component={Upload} />
+          <Stack.Screen name="Bluetooth" component={Bluetooth} />
           <Stack.Screen name="Home" component={Home} />
-          <Stack.Screen
-            name="BluetoothNotification"
-            component={BluetoothNotification}
-          />
-          <Stack.Screen name="IDMatch" component={IDMatch} />
-
-          <Stack.Screen name="SymptomInfo" component={SymptomInfo} />
-          <Stack.Screen
-            name="AlphaPositiveResult"
-            component={AlphaPositiveResult}
-          />
-          <Stack.Screen name="DataUpload" component={DataUpload} />
+          <Stack.Screen name="Infected" component={Infected} />
         </Stack.Navigator>
       </NavigationContainer>
     </Suspense>

App/App_old.tsx

@@ -0,0 +1,94 @@
+/**
+ * Sample React Native App
+ * https://github.com/facebook/react-native
+ *
+ * Generated with the TypeScript template
+ * https://github.com/react-native-community/react-native-template-typescript
+ *
+ * @format
+ */
+import React, {useEffect, Suspense} from 'react';
+import 'react-native-get-random-values';
+import {NavigationContainer} from '@react-navigation/native';
+import {createStackNavigator} from '@react-navigation/stack';
+import {Loading} from './screens/Loading';
+import {AlphaWarning} from './screens/AlphaWarning';
+import {Onboarding} from './screens/Onboarding';
+import {OnboardingHow} from './screens/OnboardingHow';
+import {HomeBluetooth} from './screens/HomeBluetooth';
+import {HomeTourOLD} from './screens/HomeTourOLD';
+import {HomeTour} from './screens/HomeTour';
+import {Endangerment} from './screens/Endangerment';
+import {BluetoothNotification} from './screens/BluetoothNotification';
+import {SymptomInfo} from './screens/SymptomInfo';
+import {DataUpload} from './screens/DataUpload';
+import {AlphaPositiveResult} from './screens/AlphaPositiveResult';
+import {IDMatch} from './screens/IDMatch';
+import AsyncStorage from '@react-native-community/async-storage'; // eslint-disable-line @typescript-eslint/no-unused-vars
+import {PositiveResult} from './screens/PositiveResult';
+import {Upload} from './screens/Upload';
+import {Home} from './screens/Home';
+
+const Stack = createStackNavigator();
+
+export type RootStackParamList = {
+  Loading: undefined;
+  AlphaWarning: undefined;
+  Onboarding: undefined;
+  OnboardingHow: undefined;
+  HomeTourOLD: undefined;
+  HomeTour: undefined;
+  HomeBluetooth: undefined;
+  Endangerment: undefined;
+  BluetoothNotification: undefined;
+  SymptomInfo: undefined;
+  DataUpload: undefined;
+  AlphaPositiveResult: undefined;
+  IDMatch: undefined;
+  PositiveResult: undefined;
+  Upload: undefined;
+  Home: undefined;
+};
+
+declare const global: {HermesInternal: null | {}};
+
+export const App: React.FC<void> = () => {
+  useEffect(() => {
+    // Uncomment this to show onboarding again
+    // AsyncStorage.setItem('userHasSeenOnboarding', 'false');
+  });
+
+  return (
+    <Suspense fallback={null}>
+      <NavigationContainer>
+        <Stack.Navigator initialRouteName="Loading" headerMode="none">
+          <Stack.Screen name="Loading" component={Loading} />
+          <Stack.Screen name="AlphaWarning" component={AlphaWarning} />
+          <Stack.Screen name="Onboarding" component={Onboarding} />
+          <Stack.Screen name="OnboardingHow" component={OnboardingHow} />
+          <Stack.Screen name="HomeTour" component={HomeTour} />
+          <Stack.Screen name="HomeTourOLD" component={HomeTourOLD} />
+          <Stack.Screen name="HomeBluetooth" component={HomeBluetooth} />
+          <Stack.Screen name="Endangerment" component={Endangerment} />
+          <Stack.Screen name="PositiveResult" component={PositiveResult} />
+          <Stack.Screen name="Upload" component={Upload} />
+          <Stack.Screen name="Home" component={Home} />
+          <Stack.Screen
+            name="BluetoothNotification"
+            component={BluetoothNotification}
+          />
+          <Stack.Screen name="IDMatch" component={IDMatch} />
+
+          <Stack.Screen name="SymptomInfo" component={SymptomInfo} />
+          <Stack.Screen
+            name="AlphaPositiveResult"
+            component={AlphaPositiveResult}
+          />
+          <Stack.Screen name="DataUpload" component={DataUpload} />
+        </Stack.Navigator>
+      </NavigationContainer>
+    </Suspense>
+  );
+};
+
+export default App;

App/components/BasicButton.tsx

@@ -1,48 +1,65 @@
 import React from 'react';
 import {StyleSheet, NativeTouchEvent, NativeSyntheticEvent} from 'react-native';
 import {Button} from 'react-native-elements';
+import {
+  wPercent,
+  hPercent,
+  textColors,
+  buttonColors,
+  colors,
+} from '../styles/style-v3';
 
 const designStyles = {
   titleFilled: {
-    color: '#595959',
+    color: textColors.main,
   },
   titleOutlined: {
-    color: '#2c2c2c',
+    color: textColors.main,
+  },
+  titleTextOnly: {
+    color: textColors.light,
   },
   buttonFilled: {
-    backgroundColor: '#91e6d3',
+    backgroundColor: buttonColors.bg,
   },
   buttonOutlined: {
-    backgroundColor: '#fff',
+    backgroundColor: buttonColors.bg,
+  },
+  buttonTextOnly: {
+    backgroundColor: colors.transparent,
+    borderWidth: 0,
   },
 };
 
 const styles = StyleSheet.create({
   buttonTitle: {
     letterSpacing: 1,
-    textTransform: 'uppercase',
-    fontSize: 14,
-    fontFamily: 'Ubuntu-M',
+    fontSize: hPercent(0.019),
+    fontFamily: 'Ubuntu',
   },
   button: {
     borderRadius: 6,
-    borderColor: '#91e6d3',
+    borderColor: buttonColors.bg,
     borderStyle: 'solid',
     borderWidth: 1,
+    width: wPercent(0.634375),
+    height: hPercent(0.077),
+    left: wPercent(1) / 2 - wPercent(0.634375) / 2,
   },
 });
 
 interface BasicButtonProps {
   onPress: (ev: NativeSyntheticEvent<NativeTouchEvent>) => void;
   title: string;
-  variant?: 'filled' | 'outlined';
+  variant?: 'filled' | 'outlined' | 'textOnly';
   textStyle?: object;
   buttonStyle?: object;
 }
 
 const VARIANT_SUFFIXES = {
   filled: 'Filled',
   outlined: 'Outlined',
+  textOnly: 'TextOnly',
 };
 
 export const BasicButton: React.FC<BasicButtonProps> = ({

App/components/Header.tsx

@@ -1,92 +1,62 @@
 import React from 'react';
 import {
-  View,
-  StyleSheet,
   NativeSyntheticEvent,
   NativeTouchEvent,
+  StyleSheet,
+  View,
 } from 'react-native';
-import Icon from 'react-native-vector-icons/Feather';
+import {global, wPercent} from '../styles/style-v3';
 import {NavigationButton} from './NavigationButton';
-import {Logo} from './Logo';
-import {AlphaNotice} from './AlphaNotice';
-import {useNavigation} from '@react-navigation/native';
 
 const styles = StyleSheet.create({
-  root: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-  },
-  navigationButton: {},
-  logoWrapper: {marginLeft: 'auto', marginRight: 'auto'},
-  logo: {padding: 0},
-  questionMark: {},
-  alphaNoticeRoot: {
-    position: 'absolute',
-    top: '25%',
-    right: -60,
-    minWidth: 56,
-  },
-  alphaNoticeText: {
-    fontSize: 14,
-    lineHeight: 14,
-  },
+  left: {flex: 0.5, justifyContent: 'center'},
+  right: {flex: 0.5, justifyContent: 'center'},
+  leftButton: {left: wPercent(0.01)},
+  rightButton: {right: wPercent(0.01)},
+  font: {...global.textSubtitle},
 });
 
 interface HeaderProps {
-  showAlpha?: boolean;
-  showHelp?: boolean;
-  showShare?: boolean;
   style?: object;
-  navigationButton?: {
+  leftNavigtion?: {
+    title: string;
+    fn: (ev: NativeSyntheticEvent<NativeTouchEvent>) => void;
+  };
+  rightNavigtion?: {
     title: string;
     fn: (ev: NativeSyntheticEvent<NativeTouchEvent>) => void;
   };
 }
 
 export const Header: React.FC<HeaderProps> = ({
-  showAlpha = true,
-  showHelp = false,
-  showShare = true,
-  navigationButton,
+  leftNavigtion,
+  rightNavigtion,
   style = {},
 }) => {
-  const {navigate} = useNavigation();
-
   return (
-    <View style={[styles.root, style]}>
-      {navigationButton ? (
-        <NavigationButton
-          onPress={navigationButton.fn}
-          title={navigationButton.title}
-          style={styles.navigationButton}
-        />
-      ) : null}
-      <View style={styles.logoWrapper}>
-        <Logo textStyle={styles.logo} />
-        {showAlpha ? (
-          <AlphaNotice
-            rootStyle={styles.alphaNoticeRoot}
-            textStyle={styles.alphaNoticeText}
+    <View style={[global.row, {flex: 0.05}, style]}>
+      <View style={styles.left}>
+        {leftNavigtion ? (
+          <NavigationButton
+            direction="left"
+            onPress={leftNavigtion.fn}
+            title={leftNavigtion.title}
+            style={styles.leftButton}
+            textStyle={styles.font}
+          />
+        ) : null}
+      </View>
+      <View style={styles.right}>
+        {rightNavigtion ? (
+          <NavigationButton
+            direction="right"
+            onPress={rightNavigtion.fn}
+            title={rightNavigtion.title}
+            style={styles.rightButton}
+            textStyle={styles.font}
           />
         ) : null}
       </View>
-      {showHelp ? (
-        <Icon
-          style={styles.questionMark}
-          name="help-circle"
-          size={24}
-          onPress={(): void => navigate('Onboarding')}
-        />
-      ) : null}
-      {showShare ? (
-        <Icon
-          style={styles.questionMark}
-          name="share-2"
-          size={24}
-          //onPress={() => navigate('Onboarding')}
-        />
-      ) : null}
     </View>
   );
 };