Loggin screen with new layout

src/app/components/Button.js

@@ -1,16 +1,18 @@
 import React from "react";
-import { StyleSheet, Text, TouchableOpacity } from "react-native";
+import { View, StyleSheet, Text, TouchableOpacity } from "react-native";
 
 import colors from "../config/colors";
 
-function AppButton({ title, onPress, color = "lightBlue" }) {
+function AppButton({ title, onPress, color = colors.lightBlue, style }) {
   return (
+    <View style={style}>
     <TouchableOpacity
-      style={[styles.button, { backgroundColor: colors[color] }]}
+      style={[styles.button, { backgroundColor: color }]}
       onPress={onPress}
     >
       <Text style={styles.text}>{title}</Text>
     </TouchableOpacity>
+      </View>
   );
 }
 

src/app/components/TextInput.js

@@ -38,7 +38,7 @@ const styles = StyleSheet.create({
   container: {
     backgroundColor: colors.white,
     borderRadius: 6,
-    borderColor: colors.medium,
+    borderColor: colors.grayBG,
     borderWidth: 1,
     padding: 5,
   },

src/app/config/colors.js

@@ -9,6 +9,7 @@ export default {
   danger: "#ff5252",
   notActivated: "rgba(201, 69, 54, 0.87)",
   activated: "rgba(26, 138, 17, 0.63)",
+  green: "#1A8A11",
   lightGray: "#C4C4C4",
   gray: "#999999",
   separatorGray: "#D9D9D9",

src/app/screens/LoginScreen.js

@@ -1,5 +1,5 @@
 import React, { useState, useContext } from "react";
-import { StyleSheet, View } from "react-native";
+import { StyleSheet, View, Text } from "react-native";
 import * as Yup from "yup";
 import {
   Form,
@@ -15,6 +15,8 @@ import jwdDecode from "jwt-decode";
 import { AuthContext } from "../auth/context";
 import authStorage from "../auth/storage";
 import assets from "../config/assets";
+import Button from "../components/Button";
+import { TouchableNativeFeedback } from "react-native-gesture-handler";
 
 const phoneRegex = RegExp(
   /^\(?[\(]?([0-9]{2})?\)?[)\b]?([0-9]{4,5})[-. ]?([0-9]{4})$/
@@ -30,6 +32,46 @@ const validationSchema = Yup.object().shape({
     .matches(/[a-zA-Z]/, "A senha só pode conter letras"),
 });
 
+function DashedOrSeparator() {
+  return (
+    <View
+      style={{
+        flexDirection: "row",
+        marginVertical: 20,
+        alignItems: "center",
+        paddingHorizontal: 14,
+      }}
+    >
+      <View
+        style={{
+          flex: 1,
+          height: 1,
+          backgroundColor: colors.subText,
+        }}
+      ></View>
+
+      <Text
+        style={{
+          marginHorizontal: 10,
+          fontSize: 14,
+          fontWeight: "bold",
+          color: colors.subText,
+        }}
+      >
+        OU
+      </Text>
+
+      <View
+        style={{
+          height: 1,
+          flex: 1,
+          backgroundColor: colors.subText,
+        }}
+      ></View>
+    </View>
+  );
+}
+
 export default function LoginScreen(props) {
   const authContext = useContext(AuthContext);
 
@@ -47,7 +89,7 @@ export default function LoginScreen(props) {
 
   const [loginFailed, setLoginFailed] = useState(false);
   return (
-    <Screen style={styles.containter}>
+    <Screen style={[styles.containter, { backgroundColor: colors.grayBG }]}>
       <Form
         initialValues={{
           name: "",
@@ -58,7 +100,7 @@ export default function LoginScreen(props) {
           handleSubmit(name, password, setLoginFailed)
         }
       >
-        <View>
+        <View paddingHorizontal={14}>
           <assets.AppLogoTitle
             preserveAspectRatio="xMidYMid meet"
             width={300}
@@ -92,18 +134,31 @@ export default function LoginScreen(props) {
             />
           </View>
 
-            <SubmitButton title="entrar" backgroundColor={colors.primary} />
+          <SubmitButton title="entrar" backgroundColor={colors.primary} />
+
+          <TouchableNativeFeedback
+            onPress={() => {
+              props.navigation.navigate("ForgotPassword");
+            }}
+          >
+            <View flexDirection="row" alignSelf="center">
+              <Text style={{ color: colors.lightBlue, fontWeight: "bold" }}>
+                Esqueceu a senha?
+              </Text>
+            </View>
+          </TouchableNativeFeedback>
+
+          <DashedOrSeparator />
+
+          <Button
+            title="cadastrar-se"
+            color={colors.green}
+            style={{ paddingHorizontal: 16 }}
+            onPress={() => {
+              props.navigation.navigate("Register");
+            }}
+          />
         </View>
-        {/* <TouchableNativeFeedback
-          onPress={() => {
-            props.navigation.navigate("Register");
-          }}
-        >
-          <View flexDirection="row" alignSelf="center">
-            <Text>Não tem uma conta? </Text>
-            <Text style={{ color: colors.lightBlue }}>Cadastre-se</Text>
-          </View>
-        </TouchableNativeFeedback>*/}
       </Form>
     </Screen>
   );