Merge pull request #61 from ito-org/alpha-warning

Added AlphaWarning Screen

App/App.tsx

@@ -12,6 +12,7 @@ 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 {Home} from './screens/Home';
@@ -28,6 +29,7 @@ const Stack = createStackNavigator();
 
 export type RootStackParamList = {
   Loading: undefined;
+  AlphaWarning: undefined;
   Onboarding: undefined;
   OnboardingHow: undefined;
   HomeTour: undefined;
@@ -50,6 +52,7 @@ const App = () => {
     <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} />

App/components/AlphaNotice.tsx

@@ -3,7 +3,7 @@ import {StyleSheet, View, Text} from 'react-native';
 
 const styles = StyleSheet.create({
   root: {
-    backgroundColor: 'red',
+    backgroundColor: '#FF3E3E',
   },
   text: {
     color: 'white',

App/screens/AlphaWarning.tsx

@@ -0,0 +1,112 @@
+import React from 'react';
+import {View, StyleSheet, Text, Linking} from 'react-native';
+import {Button} from 'react-native-elements';
+import {RootStackParamList} from 'App/App';
+import {StackNavigationProp} from '@react-navigation/stack';
+import AlphaNotice from '../components/AlphaNotice';
+
+type AlphaWarningScreenNavigationProp = StackNavigationProp<
+  RootStackParamList,
+  'AlphaWarning'
+>;
+
+interface AlphaWarningProps {
+  navigation: AlphaWarningScreenNavigationProp;
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 12,
+    backgroundColor: 'white',
+    textAlign: 'center',
+    justifyContent: 'space-between',
+  },
+  logoWrapper: {
+    marginLeft: 'auto',
+    marginRight: 'auto',
+  },
+  logo: {
+    color: '#7dc6b6',
+    fontSize: 56,
+    textAlign: 'center',
+    fontFamily: 'Righteous-Regular',
+  },
+  subtitle: {
+    color: '#595959',
+    fontSize: 18,
+    fontWeight: '300',
+    paddingTop: 12,
+    paddingBottom: 8,
+    textAlign: 'center',
+    fontFamily: 'Ubuntu-L',
+  },
+  generalText: {
+    color: '#595959',
+    fontSize: 18,
+    paddingTop: 16,
+    textAlign: 'center',
+    fontFamily: 'UbuntuMono-R',
+  },
+  githubLink: {
+    textDecorationLine: 'underline',
+  },
+  alphaNoticeRoot: {marginLeft: 'auto', marginRight: 'auto', margin: 16},
+  alphaNoticeText: {fontSize: 60},
+  bottomButtonContainer: {
+    marginBottom: 16,
+  },
+  buttonHow: {
+    backgroundColor: '#91e6d3',
+    borderRadius: 6,
+  },
+  buttonHowTitle: {
+    color: '#2c2c2c',
+    letterSpacing: 1,
+    textTransform: 'uppercase',
+    fontSize: 14,
+    fontFamily: 'Ubuntu-M',
+  },
+});
+
+export const AlphaWarning: React.FC<AlphaWarningProps> = ({navigation}) => {
+  return (
+    <View style={styles.container}>
+      <View style={styles.logoWrapper}>
+        <Text style={styles.logo}>ito</Text>
+        <Text style={styles.subtitle}>track infections, not people!</Text>
+        <AlphaNotice
+          rootStyle={styles.alphaNoticeRoot}
+          textStyle={styles.alphaNoticeText}
+        />
+      </View>
+      <View>
+        <Text style={styles.generalText}>
+          This version is for demonstration purpose only.
+        </Text>
+        <Text style={styles.generalText}>
+          Not all features are implemented yet nor is everything audited.
+        </Text>
+        <Text style={styles.generalText}>
+          Please review the app, have a look at the code and report issues, bugs
+          or general feedback at
+        </Text>
+      </View>
+      <Text
+        style={[styles.generalText, styles.githubLink]}
+        onPress={() =>
+          Linking.openURL('https://github.com/ito-org/react-native-app/issues')
+        }>
+        https://github.com/ito-org/react-native-app/issues
+      </Text>
+      <View style={styles.bottomButtonContainer}>
+        <Button
+          title="ok, let´s start"
+          onPress={() => navigation.navigate('Onboarding')}
+          titleStyle={styles.buttonHowTitle}
+          buttonStyle={styles.buttonHow}
+        />
+      </View>
+    </View>
+  );
+};

App/screens/Loading.tsx

@@ -60,7 +60,7 @@ export function Loading({
           () =>
             navigation.reset({
               index: 0,
-              routes: [{name: 'Onboarding'}],
+              routes: [{name: 'AlphaWarning'}],
             }),
           500,
         );