Merge pull request #1 from letstrace/newUI

New UI polish

android/app/build.gradle

@@ -192,7 +192,6 @@ android {
 }
 
 dependencies {
-    implementation project(':react-native-svg')
     implementation project(':react-native-webview')
     implementation fileTree(dir: "libs", include: ["*.jar"])
     implementation "com.facebook.react:react-native:+"  // From node_modules

android/app/src/main/java/edu/mit/privatekit/MainApplication.java

@@ -4,7 +4,6 @@
 import android.content.Context;
 import com.facebook.react.PackageList;
 import com.facebook.react.ReactApplication;
-import com.horcrux.svg.SvgPackage;
 import com.reactnativecommunity.webview.RNCWebViewPackage;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;

android/settings.gradle

@@ -1,6 +1,4 @@
 rootProject.name = 'PrivateKit'
-include ':react-native-svg'
-project(':react-native-svg').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-svg/android')
 include ':react-native-fs'
 project(':react-native-fs').projectDir = new File(settingsDir, '../node_modules/react-native-fs/android')
 include ':react-native-zip-archive'

app/Entry.js

@@ -12,6 +12,7 @@ import OverlapScreen from './views/Overlap';
 import LicencesScreen from './views/Licenses';
 import NotificationScreen from './views/Notification';
 import Slider from './views/welcomeScreens/Slider';
+import SimpleWelcomeScreen from './views/welcomeScreens/SimpleWelcomeScreen';
 import { GetStoreData } from './helpers/General';
 
 const Stack = createStackNavigator();
@@ -49,13 +50,13 @@ class Entry extends Component {
             ) : (
               <Stack.Screen
                 name='InitialScreen'
-                component={Slider}
+                component={SimpleWelcomeScreen}
                 options={{ headerShown: false }}
               />
             )}
             <Stack.Screen
-              name='Slider'
-              component={Slider}
+              name='SimpleWelcomeScreen'
+              component={SimpleWelcomeScreen}
               options={{ headerShown: false }}
             />
             <Stack.Screen

app/components/Button.js

@@ -1,25 +1,31 @@
 import * as React from 'react';
 import { StyleSheet, Text, TouchableOpacity } from 'react-native';
 import colors from '../constants/colors';
+import LinearGradient from 'react-native-linear-gradient';
+import PropTypes from 'prop-types';
 
-interface Props {
-  label: string;
-  bgColor: string;
-  onPress: () => void;
-}
-
-class Button extends React.Component<Props> {
+class Button extends React.Component {
   render() {
-    const { title, onPress, bgColor } = this.props;
+    const {
+      title,
+      onPress,
+      bgColor = colors.DODGER_BLUE,
+      toBgColor = bgColor,
+      titleStyle,
+      buttonStyle,
+    } = this.props;
     return (
-      <TouchableOpacity
-        style={[
-          styles.container,
-          { backgroundColor: bgColor || colors.DODGER_BLUE },
-        ]}
-        onPress={onPress}>
-        <Text style={styles.text}>{title}</Text>
-      </TouchableOpacity>
+      <LinearGradient
+        start={{ x: 0, y: 0 }}
+        end={{ x: 1, y: 0 }}
+        colors={[bgColor, toBgColor]}
+        style={[buttonStyle ? buttonStyle : styles.container]}>
+        <TouchableOpacity
+          style={[buttonStyle ? buttonStyle : styles.container]}
+          onPress={onPress}>
+          <Text style={titleStyle ? titleStyle : styles.text}>{title}</Text>
+        </TouchableOpacity>
+      </LinearGradient>
     );
   }
 }
@@ -29,9 +35,8 @@ const styles = StyleSheet.create({
     width: '100%',
     alignItems: 'center',
     justifyContent: 'center',
-    paddingVertical: 12,
-    borderRadius: 4,
-    borderWidth: StyleSheet.hairlineWidth,
+    paddingVertical: 8,
+    borderRadius: 12,
     borderColor: 'rgba(255,255,255,0.7)',
   },
   text: {
@@ -43,4 +48,13 @@ const styles = StyleSheet.create({
   },
 });
 
+Button.propTypes = {
+  title: PropTypes.string.isRequired,
+  onPress: PropTypes.func.isRequired,
+  bgColor: PropTypes.string.isRequired,
+  toBgColor: PropTypes.string,
+  titleStyle: PropTypes.object,
+  buttonStyle: PropTypes.object,
+};
+
 export default Button;

app/components/ButtonWrapper.js

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { StyleSheet, Dimensions, View } from 'react-native';
+const width = Dimensions.get('window').width;
+import FontWeights from '../constants/fontWeights';
+import Button from './Button';
+import PropTypes from 'prop-types';
+
+class ButtonWrapper extends React.Component {
+  render() {
+    return (
+      <View style={styles.buttonContainer}>
+        <Button titleStyle={styles.primaryButtonText} {...this.props} />
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  primaryButtonText: {
+    fontWeight: FontWeights.BOLD,
+    fontSize: 16,
+    lineHeight: 19,
+    letterSpacing: 0,
+    textAlign: 'center',
+    color: '#ffffff',
+  },
+  buttonContainer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    width: width * 0.7,
+    alignSelf: 'center',
+  },
+});
+
+ButtonWrapper.propTypes = {
+  title: PropTypes.string.isRequired,
+  onPress: PropTypes.func.isRequired,
+  bgColor: PropTypes.string.isRequired,
+  toBgColor: PropTypes.string,
+  titleStyle: PropTypes.object,
+  buttonStyle: PropTypes.object,
+};
+
+export default ButtonWrapper;

app/constants/colors.js

@@ -16,6 +16,15 @@ const colors = {
   POS_BUTTON: '#32A852',
   NEG_BUTTON: '#F8262F',
   SENS_BUTTON: '#6C3794',
+
+  BLUE_BUTTON: '#05369B',
+  BLUE_TO_BUTTON: '#185BD3',
+  RED_BUTTON: '#E3554E',
+  RED_TO_BUTTON: '#E97C79',
+  GRAY_BUTTON: '#868686',
+  GRAY_TO_BUTTON: '#868686',
+
+  BLUE_LINK: '#007AFF',
 };
 
 export default colors;

app/constants/fontWeights.js

@@ -0,0 +1,13 @@
+const fontWeight = {
+    THIN: '100',
+    ULTRA_LIGHT: '200',
+    LIGHT: '300',
+    REGULAR: '400',
+    MEDIUM: '500',
+    SEMIBOLD: '600',
+    BOLD: '700',
+    HEAVY: '800',
+    BLACK: '900',
+};
+
+export default fontWeight;

app/locales/en/intro.json

@@ -10,5 +10,15 @@
     "intro2_para2": "Data Never Leaves Your Device Without Your Consent",
     "intro3_title1":"The Future",
     "intro3_para1": "The Next Step in Solving Today's and Tomorrow’s Problems Enabling individuals to log their location trail offers new opportunities for researchers studying pandemic tracking, refugee migration, and community traffic analysis.",
-    "intro3_para2":"Learn More http://privatekit.mit.edu/"
+    "intro3_para2":"Learn More http://privatekit.mit.edu/",
+
+    "intro_title":"CoronaTime",
+    "intro_subtitle":"We can fight COVID-19 together",
+    "intro_header_0":"Map where you go",
+    "intro_subheader_0":"The app saves your location every 5 minutes",
+    "intro_header_1":"Keep your privacy",
+    "intro_subheader_1":"Your data never leaves your phone without your consent",
+    "intro_header_2":"Stay informed of risk",
+    "intro_subheader_2":"Check if you crossed paths with a COVID-19 patient",
+    "intro_get_started":"I want to help!"
 }

app/locales/en/locationTracking.json

@@ -1,13 +1,21 @@
 {
-    "start_logging":"START LOGGING",
-    "stop_logging":"STOP LOGGING",
-    "logging_message":"It is currently logging your location privately every five minutes. Your location information will NOT leave your phone.",
-    "not_logging_message":"NOTE: After clicking this button you may be prompted to grant Private Kit access to your location.",
     "import":"Import",
     "export":"Export",
     "news":"News",
     "latest_news":"Latest News",
     "url_info":"For more information visit the Private Kit homepage:",
     "private_kit_url":"privatekit.mit.edu",
-    "overlap": "CHECK OVERLAP"
+    "overlap": "CHECK OVERLAP",
+
+    "home_title": "CoronaTime",
+    "home_start_tracking": "Start tracking",
+    "home_start_tracking_description": "You'll need to allow location permissions",
+    "home_stop_tracking": "Stop tracking",
+    "home_stop_tracking_description": "Your location is being saved privately to your phone",
+    "home_check_risk": "Check if you are at risk",
+    "home_check_risk_description": "See if you have crossed paths with someone who has later tested positive for COVID-19",
+    "home_footer": "CoronaTime is powered by",
+    "home_footer_link": "PrivateKit from MIT",
+    "home_privacy_header": "Privacy Policy",
+    "home_privacy_subheader": "Your location history stays on your phone and is never shared without your consent"
 }