Feature/new ui

app/Entry.js

@@ -2,24 +2,61 @@ import React, {Component } from 'react';
 
 import {NavigationContainer} from '@react-navigation/native';
 import {createStackNavigator} from '@react-navigation/stack';
-
+import {SafeAreaView} from 'react-native';
 import LocationTracking from './views/LocationTracking';
 import Welcome from './views/Welcome';
 import NewsScreen from './views/News';
 import ExportScreen from './views/Export';
 import ImportScreen from './views/Import';
+import Slider from './views/welcomeScreens/Slider';
+import {GetStoreData, SetStoreData} from './helpers/General';
 
 const Stack = createStackNavigator();
 
 class Entry extends Component {
     constructor(props) {
         super(props);
+        this.state={
+          initialRouteName:''
+        }
+    }
+
+    componentDidMount(){
+      GetStoreData('PARTICIPATE')
+      .then(isParticipating => {
+          console.log(isParticipating);
+              this.setState({
+                initialRouteName:isParticipating
+              })
+      })
+      .catch(error => console.log(error))
     }
 
     render() {
       return (
         <NavigationContainer>
-          <Stack.Navigator initialRouteName="WelcomeScreen ">
+          <SafeAreaView style={{flex:1}}>
+          <Stack.Navigator initialRouteName='InitialScreen'>
+            {this.state.initialRouteName === 'true' ? (
+              <Stack.Screen
+              name="InitialScreen"
+              component={LocationTracking}
+              options={{headerShown:false}}
+                />
+            ):(
+              <Stack.Screen
+              name="InitialScreen"
+              component={Slider}
+              options={{headerShown:false}}
+                />
+            )}
+          <Stack.Screen
+              name="Slider"
+              component={Slider}
+              options={{headerShown:false}}
+                />
+
+
             <Stack.Screen
               name="WelcomeScreen"
               component={Welcome}
@@ -46,6 +83,7 @@ class Entry extends Component {
               options={{headerShown:false}}
             />
           </Stack.Navigator>
+          </SafeAreaView>
         </NavigationContainer>
       )
     }

app/helpers/convertPointsToString.js

@@ -0,0 +1,50 @@
+export function convertPointsToString(count){
+
+    // For testing Manually override count 
+    //  count = 3000
+
+    // Get minutes
+    let tot_mins = count * 5;
+
+    // Calculate days
+    var days = (tot_mins / 60/ 24);
+    var rdays = Math.floor(days);
+
+    // Calculate Hours
+     var hours = (days - rdays) * 24;
+     var rhours = Math.floor(hours);
+
+     // Calculate Minutes
+     var minutes = (hours - rhours) * 60;
+     var rminutes = Math.round(minutes);
+
+     if(rdays > 0){
+         if(rdays > 1){
+             if(rhours > 1){
+                 return  rdays + " days, " + rhours + " hours and " + rminutes + " minutes.";
+             }
+             else{
+                 return  rdays + " days, " + rhours + " hour and " + rminutes + " minutes.";                   
+             }
+         }
+         else{
+             if(rhours > 1){
+                 return  rdays + " day, " + rhours + " hours and " + rminutes + " minutes.";
+             }
+             else{
+                 return  rdays + " day, " + rhours + " hour and " + rminutes + " minutes.";                   
+             }
+         }
+     }
+     else if(rhours > 0 ){
+         if(rhours > 1){
+             return rhours + " hours and " + rminutes + " minutes.";
+         }
+         else{
+             return rhours + " hour and " + rminutes + " minutes.";
+         }
+     }
+     else{
+        return  rminutes + " minutes.";                   
+    }
+ }

app/services/LocationService.js

@@ -264,7 +264,7 @@ export default class LocationServices {
     static optOut(nav) {
         BackgroundGeolocation.removeAllListeners();
         SetStoreData('PARTICIPATE', 'false').then(() =>
-            nav.navigate('WelcomeScreen', {})
+            nav.navigate('LocationTrackingScreen', {})
         )
     }
 }

app/views/Export.js

@@ -8,7 +8,9 @@ import {
     Linking,
     View,
     Text,
-    Image
+    Image,
+    Dimensions,
+    TouchableOpacity
 } from 'react-native';
 
 import colors from "../constants/colors";
@@ -17,9 +19,14 @@ import Button from "../components/Button";
 import {
     GetStoreData
 } from '../helpers/General';
+import {
+    convertPointsToString
+} from '../helpers/convertPointsToString';
 import Share from 'react-native-share';
 import RNFetchBlob from 'rn-fetch-blob';
 import LocationServices from '../services/LocationService';
+import backArrow from './../assets/images/backArrow.png'
+const width = Dimensions.get('window').width;
 
 const base64 = RNFetchBlob.base64
 
@@ -61,24 +68,25 @@ class ExportScreen extends Component {
         this.props.navigation.navigate('LocationTrackingScreen', {})
     }
 
-
     render() {
 
         return (
             <SafeAreaView style={styles.container}>
+
                 <View style={styles.headerContainer}>
-                    <Text onPress={() => this.backToMain()} style={styles.backArrow}> &#8249; </Text>
-                    <Text style={styles.sectionDescription}>Export</Text>
+                    <TouchableOpacity style={styles.backArrowTouchable} onPress={() => this.backToMain()}>
+                         <Image style={styles.backArrow} source={backArrow} />
+                    </TouchableOpacity>
+                    <Text style={styles.headerTitle}>Export</Text>
                 </View>
 
-
                 <View style={styles.main}>
-                    <Text style={styles.mainText}>You can share you location trail with anyone using the Share button below.  Once you press the button it will ask you with whom and how you want to share it.</Text>
-                    <Text style={styles.mainText}>Location is shared as a simple list of times and coordinates, no other identifying information.</Text>
-                    <View style={styles.block}>
-                        <Button onPress={this.onShare} title="Share" />
-                    </View>
-                    <Text style={styles.mainText}>Points to be shared: {LocationServices.getPointCount()}</Text>
+                    <Text style={styles.sectionDescription}>You can share you location trail with anyone using the Share button below.  Once you press the button it will ask you with whom and how you want to share it.</Text>
+                    <Text style={styles.sectionDescription}>Location is shared as a simple list of times and coordinates, no other identifying information.</Text>
+                    <TouchableOpacity style={styles.buttonTouchable} onPress={this.onShare}>
+                        <Text style={styles.buttonText}>SHARE</Text>
+                    </TouchableOpacity>
+                    <Text style={[styles.sectionDescription,{marginTop:36}]}>Log has data of {convertPointsToString(LocationServices.getPointCount()) }</Text>
                 </View>
 
             </SafeAreaView>
@@ -92,7 +100,7 @@ const styles = StyleSheet.create({
         flex: 1,
         flexDirection: 'column',
         color: colors.PRIMARY_TEXT,
-        backgroundColor: colors.APP_BACKGROUND,
+        backgroundColor: colors.WHITE
     },
     headerTitle: {
         textAlign: 'center',
@@ -111,14 +119,28 @@ const styles = StyleSheet.create({
         flex: 1,
         flexDirection: 'column',
         textAlignVertical: 'top',
-        alignItems: 'center',
-        width: "95%"
+       // alignItems: 'center',
+        padding:20,
+        width:'96%',
+        alignSelf:'center'
+    },
+    buttonTouchable: {
+        borderRadius: 12,
+        backgroundColor: "#665eff",
+        height:52,
+        alignSelf:'center',
+        width:width*.7866,
+        marginTop:30,
+        justifyContent:'center'
     },
-    block: {
-        margin: 20,
-        width: "75%",
-        alignItems: 'center',
-        justifyContent: 'center'
+    buttonText:{
+
+        fontFamily: "OpenSans-Bold",
+        fontSize: 14,
+        lineHeight: 19,
+        letterSpacing: 0,
+        textAlign: "center",
+        color: "#ffffff"
     },
     mainText: {
         fontSize: 18,
@@ -137,19 +159,31 @@ const styles = StyleSheet.create({
 
     headerContainer: {
         flexDirection: 'row',
+        height:60,
+        borderBottomWidth:1,
+        borderBottomColor:'rgba(189, 195, 199,0.6)'
+    },
+    backArrowTouchable:{
+        width:60,
+        height:60,
+        paddingTop:21,
+        paddingLeft:20
     },
     backArrow: {
-        fontSize: 60,
-        lineHeight: 60,
-        fontWeight: '400',
-        marginRight: 5,
-        textAlignVertical: 'center'
+        height: 18, 
+        width: 18.48
     },
-    sectionDescription: {
+    headerTitle:{
         fontSize: 24,
         lineHeight: 24,
-        fontWeight: '800',
-        textAlignVertical: 'center'
+        fontFamily:'OpenSans-Bold',
+        top:21
+    },
+    sectionDescription: {
+        fontSize: 16,
+        lineHeight: 24,
+        marginTop:12,
+        fontFamily:'OpenSans-Regular',
     },
 });
 

app/views/Import.js

@@ -7,13 +7,15 @@ import {
     ScrollView,
     Linking,
     View,
-    Text
+    Text,
+    Image,
+    TouchableOpacity
 } from 'react-native';
 
 import colors from "../constants/colors";
 import WebView from 'react-native-webview';
 import Button from "../components/Button";
-
+import backArrow from './../assets/images/backArrow.png'
 import {
     SearchAndImport
 } from '../helpers/GoogleTakeOutAutoImport';
@@ -41,14 +43,16 @@ class ImportScreen extends Component {
         return (
             <SafeAreaView style={styles.container}>
                 <View style={styles.headerContainer}>
-                    <Text onPress={() => this.backToMain()} style={styles.backArrow}> &#8249; </Text>
-                    <Text style={styles.sectionDescription}>Import Locations</Text>
+                    <TouchableOpacity style={styles.backArrowTouchable} onPress={() => this.backToMain()}>
+                         <Image style={styles.backArrow} source={backArrow} />
+                    </TouchableOpacity>
+                    <Text style={styles.headerTitle}>Import Locations</Text>
                 </View>
 
                 <View style={styles.main}>
                     <View style={styles.subHeaderTitle}>
-                        <Text style={styles.sectionDescription, { fontSize: 18, marginTop: 8 }}>1. Login to your Google Account and Download your Location History</Text>
-                        <Text style={styles.sectionDescription, { fontSize: 18, marginTop: 8 }}>2. After downloaded, open this screen again. The data will import automatically.</Text>
+                        <Text style={styles.sectionDescription}>1. Login to your Google Account and Download your Location History</Text>
+                        <Text style={styles.sectionDescription}>2. After downloaded, open this screen again. The data will import automatically.</Text>
                     </View>
                     <View style={styles.web}>
                         <WebView
@@ -68,7 +72,7 @@ const styles = StyleSheet.create({
         flex: 1,
         flexDirection: 'column',
         color: colors.PRIMARY_TEXT,
-        backgroundColor: colors.APP_BACKGROUND,
+        backgroundColor: colors.WHITE,
     },
     headerTitle: {
         textAlign: 'center',
@@ -98,19 +102,32 @@ const styles = StyleSheet.create({
 
     headerContainer: {
         flexDirection: 'row',
+        height:60,
+        borderBottomWidth:1,
+        borderBottomColor:'rgba(189, 195, 199,0.6)'
+    },
+    backArrowTouchable:{
+        width:60,
+        height:60,
+        paddingTop:21,
+        paddingLeft:20
     },
     backArrow: {
-        fontSize: 60,
-        lineHeight: 60,
-        fontWeight: '400',
-        marginRight: 5,
-        textAlignVertical: 'center'
+        height: 18, 
+        width: 18.48
     },
-    sectionDescription: {
+    headerTitle:{
         fontSize: 24,
         lineHeight: 24,
-        fontWeight: '800',
-        textAlignVertical: 'center'
+        fontFamily:'OpenSans-Bold',
+        top:21
+    },
+    sectionDescription: {
+        fontSize: 16,
+        lineHeight: 24,
+        textAlignVertical: 'center',
+        marginTop:12,
+        fontFamily:'OpenSans-Regular'
     },
 
 });