1 files changed, 52 insertions, 2 deletions
diff --git a/App.tsx b/App.tsx
index 5ec3b5e8..e58025b7 100644
--- a/App.tsx
+++ b/App.tsx
@@ -17,6 +17,9 @@ import {
   Text,
   StatusBar,
   Image,
+  TextInput,
+  Button,
+  Alert,
 } from 'react-native';
 
 import {
@@ -36,7 +39,36 @@ const App = () => {
     <>
       <View style={styles.container}>
         <LinearGradient colors={['#8F00FF', '#6EE7E7']} style={styles.linearGradient} useAngle={true} angle={154.72} angleCenter={{x:0.5,y:0.5}}>
-          <Image source={require('./src/assets/sign_in_logo.png')} style={styles.logo}/>
+          <Image
+            source={require('./src/assets/sign_in_logo.png')}
+            style={styles.logo}
+          />
+          <TextInput
+            style={styles.credentials}
+            placeholder="Username"
+            placeholderTextColor='#FFFFFF'
+          />
+          <TextInput
+            style={styles.credentials}
+            placeholder="Password"
+            placeholderTextColor='#FFFFFF'
+          />
+          <View style={styles.forgotPassword}>
+            <Button
+              onPress={() => Alert.alert("Tagg! You're it!")}
+              title="Forgot password"
+              color='#FFFFFF'
+              accessibilityLabel="Forgot password button"
+            />
+          </View>
+          <View style={styles.startButton}>
+            <Button
+              onPress={() => Alert.alert("My favorite Girl Scout Cookies are Taggalongs!")}
+              title="Let's Start!"
+              color='#FFFFFF'
+              accessibilityLabel="Let's start button"
+            />
+          </View>
         </LinearGradient>
       </View>
     </>
@@ -53,7 +85,25 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   logo: {
-    top: 108,
+    top: 165,
+  },
+  credentials: {
+    top: 215,
+    borderColor: '#FFFDFD',
+    borderWidth: 2,
+    borderRadius: 20,
+    width: 248,
+    height: 40,
+    padding: 13,
+    marginVertical: 15,
+    fontSize: 15
+  },
+  forgotPassword: {
+    top: 200,
+    left: -50
+  },
+  startButton: {
+    top: 220
   }
 });