Sign In Screen UI Completion

Author: Pramad712

src/components/BackButton.js

@@ -1,12 +1,24 @@
 import React from "react";
-import { Text, View, Image} from "react-native";
+import { StyleSheet, Text, View, Image } from "react-native";
 
 export default function BackButton() {
     return (
-      <View style={{flexDirection: "row", alignItems: "center"}}>
+      <View style={styles.back}>
         <Text>{"\n\n\n"}</Text>
         <Image source={require("./../assets/caret-left.png")} />
-        <Text style={{fontWeight: "bold", fontSize: 25}}>Back</Text>
+        <Text style={styles.backText}>Back</Text>
       </View>
     );
-}
+}
+
+const styles = StyleSheet.create({
+  back: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+
+  backText: {
+    fontWeight: "bold",
+    fontSize: 25,
+  },
+});

src/screens/SignInScreen.js

@@ -13,8 +13,17 @@ export default function SignInScreen() {
       <View style={styles.body}>
         <Text style={styles.title}>Sign in</Text>
         <Text style={styles.paragraph}>
-          {}
+          {"\n"}
+          {"Thank you for choosing to help\n"}
+          {"make our volunteer concerts a\n"}
+          {"success! To begin, please sign\n"}
+          {"in using your Google account.\n"}
         </Text>
+
+        <Pressable style={[styles.OAuth, styles.GoogleOAuth]}>
+          <Image style={styles.OAuthLogo} source={require("./../assets/google-logo.png")}/>
+          <Text style={[styles.OAuthText]}>  Sign in with Google</Text>
+        </Pressable>
       </View>
     </SafeAreaView>
   );
@@ -26,27 +35,41 @@ const styles = StyleSheet.create({
     padding: "1%"
   },
 
-  back: {
-    flexDirection: "row",
+  body: {
     alignItems: "center",
+    justifyContent: "center",
   },
 
-  backText: {
+  title: {
     fontWeight: "bold",
-    fontSize: 25,
+    fontSize: 45,
   },
 
-  body: {
+  paragraph: {
+    fontSize: 18,
+  },
+
+  OAuth: {
+    flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
+    width: 300,
+    height: 50,
+    borderRadius: 10,
   },
 
-  title: {
-    fontWeight: "bold",
-    fontSize: 45,
+  OAuthLogo: {
+    width: 40,
+    height: 40,
   },
 
-  paragraph: {
-    fontSize: 30,
+  OAuthText: {
+    color: "#fff",
+    fontSize: 25,
+  },
+
+  GoogleOAuth: {
+    backgroundColor: "#000",
+    color: "#fff",
   },
 });