Change login design

CodingFactory-Repos · Feb 28, 2024 · e71eac2 · e71eac2
1 parent ed46938
commit e71eac2
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 41 deletions.
diff --git a/src/screens/login/LoginScreen.styles.ts b/src/screens/login/LoginScreen.styles.ts
@@ -28,6 +28,14 @@ export const styles = StyleSheet.create({
     backgroundColor: Colors.primary,
     borderTopLeftRadius: 30,
     borderTopRightRadius: 30,
+    width: '100%',
+  },
+  viewRegister: {
+    flex: 3,
+    alignItems: 'center',
+    backgroundColor: 'white',
+    borderTopLeftRadius: 30,
+    borderTopRightRadius: 30,
     marginTop: 20,
   },
   innerView: {
@@ -38,7 +46,7 @@ export const styles = StyleSheet.create({
   },
   passwordInput: {
     ...baseTextInput,
-    marginTop: 10,
+    marginTop: 20,
     color: 'black',
   },
   buttonView: {
@@ -48,21 +56,22 @@ export const styles = StyleSheet.create({
     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%',
+    textAlign: 'center',
+    backgroundColor: 'white',
+    marginTop: 50,
+  },
+  registerButton: {
+    width: '100%',
+    textAlign: 'center',
+    paddingTop: 20,
+    paddingBottom: 20,
+    fontSize: 18,
+    fontWeight: 'bold',
   },
   buttonText: {
     fontSize: 18,

diff --git a/src/screens/login/LoginScreen.tsx b/src/screens/login/LoginScreen.tsx
@@ -60,39 +60,41 @@ const LoginScreen = () => {
         />
         <Text style={styles.text}>Welcome back to Kayu</Text>
       </SafeAreaView>
-      <View style={styles.view}>
-        <View style={styles.innerView}>
-          <View>
-            <TextInput
-              placeholder="Email"
-              textContentType={'emailAddress'}
-              style={styles.textInput}
-              onChangeText={text => setEmail(text)}
-            />
-            <TextInput
-              placeholder="Password"
-              textContentType={'password'}
-              style={styles.passwordInput}
-              secureTextEntry={true}
-              onChangeText={text => setPassword(text)}
-            />
-          </View>
-          <View style={styles.buttonView}>
-            <View style={styles.row}>
-              <Text style={styles.leftText}>Forgot Password?</Text>
-              <Text
-                style={styles.rightText}
-                onPress={() => RedirectToRegister()}>
-                Don't have an account?
-              </Text>
+      <View style={styles.viewRegister}>
+        <Text
+          style={styles.registerButton}
+          onPress={() => RedirectToRegister()}>
+          S'inscrire
+        </Text>
+        <View style={styles.view}>
+          <View style={styles.innerView}>
+            <View>
+              <TextInput
+                placeholder="Adresse email"
+                textContentType={'emailAddress'}
+                style={styles.textInput}
+                onChangeText={text => setEmail(text)}
+              />
+              <TextInput
+                placeholder="Mot de passe"
+                textContentType={'password'}
+                style={styles.passwordInput}
+                secureTextEntry={true}
+                onChangeText={text => setPassword(text)}
+              />
+            </View>
+            <View style={styles.buttonView}>
+              <View style={styles.row}>
+                <Text>Mot de passe oublié?</Text>
+              </View>
             </View>
           </View>
+          <TouchableOpacity style={styles.button}>
+            <Text style={styles.buttonText} onPress={() => Login()}>
+              Se connecter
+            </Text>
+          </TouchableOpacity>
         </View>
-        <TouchableOpacity style={styles.button}>
-          <Text style={styles.buttonText} onPress={() => Login()}>
-            Se connecter
-          </Text>
-        </TouchableOpacity>
       </View>
     </>
   );