Converted buttons to TouchableOpacity

Helps with styling later, also updated StatusBar color

1 files changed, 16 insertions, 11 deletions

diff --git a/App.tsx b/App.tsx
index 037a1390..242ca47c 100644
--- a/App.tsx
+++ b/App.tsx
@@ -41,6 +41,9 @@ const App = () => {
 
   return (
     <>
+      <StatusBar
+        barStyle='light-content'
+      />
       <View style={styles.container}>
         <LinearGradient colors={['#8F00FF', '#6EE7E7']} style={styles.linearGradient} useAngle={true} angle={154.72} angleCenter={{x:0.5,y:0.5}}>
           <Image
@@ -68,14 +71,9 @@ const App = () => {
             textContentType='password'
             returnKeyType='go'
           />
-          <View style={styles.forgotPassword}>
-            <Button
-              onPress={() => Alert.alert("tagg! You're it!")}
-              title="Forgot password"
-              color='#FFFFFF'
-              accessibilityLabel="Forgot password button"
-            />
-          </View>
+          <TouchableOpacity style={styles.forgotPassword} onPress={() => Alert.alert("tagg! You're it!")} accessibilityLabel="Forgot password button">
+            <Text style={styles.forgotPasswordText}>Forgot password</Text>
+          </TouchableOpacity>
           <TouchableOpacity style={styles.start} onPress={() => Alert.alert("My favorite Girl Scout Cookies are taggalongs!")}>
             <Text style={styles.startText}>Let's Start!</Text>
           </TouchableOpacity>
@@ -115,8 +113,13 @@ const styles = StyleSheet.create({
     color: '#FFFFFF'
   },
   forgotPassword: {
-    top: 200,
-    left: -50
+    top: 205,
+    left: -45,
+  },
+  forgotPasswordText: {
+    color: '#FFFFFF',
+    textDecorationLine: 'underline',
+    fontSize: 20
   },
   start: {
     top: 220,
@@ -125,7 +128,8 @@ const styles = StyleSheet.create({
     height: 36,
     justifyContent: 'center',
     alignItems: 'center',
-    borderRadius: 20
+    borderRadius: 20,
+    marginTop: 15
   },
   startText: {
     color: '#78A0EF',
@@ -134,6 +138,7 @@ const styles = StyleSheet.create({
   },
   getStarted: {
     color: '#FFFFFF',
+    textDecorationLine: 'underline'
   },
   newUser: {
     top: 230,