From 7f3be86835573c43f602e5604acc1a504990f46d Mon Sep 17 00:00:00 2001
From: Loule | Louis <35641311+Loule95450@users.noreply.github.com>
Date: Wed, 28 Feb 2024 14:28:32 +0100
Subject: [PATCH] Add style in login

---
 src/screens/login/LoginScreen.styles.ts | 68 +++++++++++++++++++++++
 src/screens/login/LoginScreen.tsx       | 71 ++++++++-----------------
 2 files changed, 89 insertions(+), 50 deletions(-)

diff --git a/src/screens/login/LoginScreen.styles.ts b/src/screens/login/LoginScreen.styles.ts
index e69de29b..eec9f748 100644
--- a/src/screens/login/LoginScreen.styles.ts
+++ b/src/screens/login/LoginScreen.styles.ts
@@ -0,0 +1,68 @@
+import {StyleSheet} from 'react-native';
+
+export const styles = StyleSheet.create({
+  safeAreaView: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  image: {
+    width: 200,
+    height: 200,
+  },
+  text: {
+    fontSize: 24,
+    fontWeight: 'bold',
+  },
+  view: {
+    flex: 3,
+    alignItems: 'center',
+    justifyContent: 'space-evenly',
+    backgroundColor: '#BB93E5',
+    borderTopLeftRadius: 30,
+    borderTopRightRadius: 30,
+    marginTop: 20,
+  },
+  innerView: {
+    width: '80%',
+  },
+  textInput: {
+    borderWidth: 1,
+    padding: 10,
+    borderRadius: 10,
+    borderColor: 'grey',
+  },
+  passwordInput: {
+    borderWidth: 1,
+    padding: 10,
+    marginTop: 10,
+    borderRadius: 10,
+    borderColor: 'grey',
+    color: 'black',
+  },
+  buttonView: {
+    marginTop: 10,
+  },
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  leftText: {
+    textAlign: 'left',
+    width: '50%',
+  },
+  rightText: {
+    textAlign: 'right',
+    width: '50%',
+  },
+  button: {
+    backgroundColor: 'white',
+    padding: 10,
+    borderRadius: 10,
+    marginTop: 50,
+    alignItems: 'center',
+    width: '80%',
+  },
+  buttonText: {
+    fontSize: 18,
+  },
+});
diff --git a/src/screens/login/LoginScreen.tsx b/src/screens/login/LoginScreen.tsx
index 12b8a51f..d2af935c 100644
--- a/src/screens/login/LoginScreen.tsx
+++ b/src/screens/login/LoginScreen.tsx
@@ -1,79 +1,50 @@
 import React from 'react';
 import {
-  Button,
   Image,
   SafeAreaView,
-  StyleSheet,
   Text,
   TextInput,
+  TouchableOpacity,
   View,
 } from 'react-native';
+import {styles} from './LoginScreen.styles.ts';
 
 const LoginScreen = () => {
   return (
-    <SafeAreaView style={styles.screen}>
-      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
+    <>
+      <SafeAreaView style={styles.safeAreaView}>
         <Image
           source={require('../../../assets/kayu.png')}
-          style={{width: 200, height: 200}}
+          style={styles.image}
         />
-        <Text style={{fontSize: 24, fontWeight: 'bold'}}>
-          Welcome back to Kayu
-        </Text>
-      </View>
-      <View
-        style={{
-          flex: 3,
-          alignItems: 'center',
-          justifyContent: 'space-evenly',
-        }}>
-        <Text style={{fontSize: 24, fontWeight: 'bold'}}>Login</Text>
-
-        <View style={{width: '80%'}}>
+        <Text style={styles.text}>Welcome back to Kayu</Text>
+      </SafeAreaView>
+      <View style={styles.view}>
+        <View style={styles.innerView}>
           <View>
             <TextInput
               placeholder="Email"
-              style={{
-                borderWidth: 1,
-                padding: 10,
-                borderRadius: 10,
-                borderColor: 'grey',
-              }}
+              textContentType={'emailAddress'}
+              style={styles.textInput}
             />
             <TextInput
               placeholder="Password"
-              style={{
-                borderWidth: 1,
-                padding: 10,
-                marginTop: 10,
-                borderRadius: 10,
-                borderColor: 'grey',
-              }}
+              textContentType={'password'}
+              style={styles.passwordInput}
             />
           </View>
-          <View style={{width: '80%', marginTop: 10}}>
-            <View
-              style={{flexDirection: 'row', justifyContent: 'space-between'}}>
-              <Text style={{textAlign: 'left', width: '50%'}}>
-                Forgot Password?
-              </Text>
-              <Text style={{textAlign: 'right', width: '50%'}}>
-                You don't have an account?
-              </Text>
+          <View style={styles.buttonView}>
+            <View style={styles.row}>
+              <Text style={styles.leftText}>Forgot Password?</Text>
+              <Text style={styles.rightText}>You don't have an account?</Text>
             </View>
-            <Button title="Login" />
           </View>
         </View>
+        <TouchableOpacity style={styles.button}>
+          <Text style={styles.buttonText}>Login</Text>
+        </TouchableOpacity>
       </View>
-    </SafeAreaView>
+    </>
   );
 };
-
-const styles = StyleSheet.create({
-  screen: {
-    flex: 1,
-    backgroundColor: 'white',
-  },
-});
-
 export default LoginScreen;