From a142c01d840ebf8fd49b16ad999d2cfec9a13e30 Mon Sep 17 00:00:00 2001
From: COURTES Guillaume <guillaumecourtes88@gmail.com>
Date: Sat, 19 Jun 2021 01:35:39 +0200
Subject: [PATCH] fix pages display & texts
---
.../ChatApp/components/DiscussionsScreen.js | 1 +
react-native/ChatApp/components/HomeScreen.js | 31 ++++++++++++++++++-
.../ChatApp/components/LoginScreen.js | 13 +++++---
.../ChatApp/components/SignupScreen.js | 16 +++++-----
4 files changed, 46 insertions(+), 15 deletions(-)
diff --git a/react-native/ChatApp/components/DiscussionsScreen.js b/react-native/ChatApp/components/DiscussionsScreen.js
index 42d4ff0e6..cc7bf81dd 100644
--- a/react-native/ChatApp/components/DiscussionsScreen.js
+++ b/react-native/ChatApp/components/DiscussionsScreen.js
@@ -27,6 +27,7 @@ class DiscussionsScreen extends React.Component {
icon={<Icon solid name='plus' type='font-awesome-5' />}
onPress={() => alert('Nouvelle discussion')}
type="clear"
+ containerStyle={{margin: 5}}
/>
),
}}
diff --git a/react-native/ChatApp/components/HomeScreen.js b/react-native/ChatApp/components/HomeScreen.js
index 1c4d6a245..0ab5f7401 100644
--- a/react-native/ChatApp/components/HomeScreen.js
+++ b/react-native/ChatApp/components/HomeScreen.js
@@ -3,6 +3,7 @@ import {
View,
} from 'react-native';
import { Text } from 'react-native-elements';
+import Icon from 'react-native-vector-icons/FontAwesome';
class HomeScreen extends React.Component {
@@ -15,7 +16,35 @@ class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
- <Text h2>Bienvenue !</Text>
+ <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+ <Text h1>Bienvenue !</Text>
+ </View>
+ <View style={{flex: 4, alignItems: 'center', justifyContent: 'center', paddingBottom: 25}}>
+ <Icon
+ name="comments"
+ size={75}
+ color="dodgerblue"
+ />
+ <Text style={{ flex: 1, textAlign: 'center', color: 'dimgrey'}}>
+ ChatApp est une application de discussions instantannées développée sous React Native.
+ </Text>
+ <Icon
+ name="graduation-cap"
+ size={75}
+ color="dodgerblue"
+ />
+ <Text style={{ flex: 1, textAlign: 'center', color: 'dimgrey'}}>
+ Travail réalisé en groupe dans le cadre d'un projet tutoré sur une veille technologique en développement mobile.
+ </Text>
+ <Icon
+ name="mobile"
+ size={90}
+ color="dodgerblue"
+ />
+ <Text style={{ flex: 1, textAlign: 'center', color: 'dimgrey'}}>
+ Le but était de comparer et de développer 3 versions d'une même application sous Flutter, Ionic et React Native, l'ensemble communiquant grâce à une même API.
+ </Text>
+ </View>
</View>
)
}
diff --git a/react-native/ChatApp/components/LoginScreen.js b/react-native/ChatApp/components/LoginScreen.js
index b3a8df338..8e6a6c649 100644
--- a/react-native/ChatApp/components/LoginScreen.js
+++ b/react-native/ChatApp/components/LoginScreen.js
@@ -2,11 +2,14 @@ import React from 'react';
import {
View,
StyleSheet,
- KeyboardAvoidingView
+ KeyboardAvoidingView,
+ Dimensions
} from 'react-native';
import { Input, Button, Text } from 'react-native-elements';
import Icon from 'react-native-vector-icons/FontAwesome';
+const windowHeight = Dimensions.get('window').height;
+
class LoginScreen extends React.Component {
constructor(props) {
@@ -28,12 +31,11 @@ class LoginScreen extends React.Component {
return (
<KeyboardAvoidingView
behavior="height"
- style={{ flex: 1, alignItems: 'center', justifyContent: 'center'}}
>
- <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', width: '100%' }}>
+ <View style={{ height: windowHeight/3, alignItems: 'center', justifyContent: 'center' }}>
<Text h1>Connexion</Text>
</View>
- <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', width: '100%' }}>
+ <View style={{ height: windowHeight/3, alignItems: 'center', justifyContent: 'center' }}>
<Input
placeholder="Pseudonyme"
style={{ fontSize: 16, borderBottomColor: "grey" }}
@@ -64,7 +66,7 @@ class LoginScreen extends React.Component {
}
/>
</View>
- <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', width: '100%' }}>
+ <View style={{ height: windowHeight/3, alignItems: 'center', justifyContent: 'center', width: '100%' }}>
<Text>
Pas encore inscrit ?
@@ -84,6 +86,7 @@ class LoginScreen extends React.Component {
};
const styles = StyleSheet.create({
+ //container global style
customButton: {
borderRadius: 1000,
width: 200,
diff --git a/react-native/ChatApp/components/SignupScreen.js b/react-native/ChatApp/components/SignupScreen.js
index 960ef6d72..5d8e74b0f 100644
--- a/react-native/ChatApp/components/SignupScreen.js
+++ b/react-native/ChatApp/components/SignupScreen.js
@@ -2,11 +2,14 @@ import React from 'react';
import {
View,
StyleSheet,
- KeyboardAvoidingView
+ KeyboardAvoidingView,
+ Dimensions
} from 'react-native';
import { Input, Button, Text } from 'react-native-elements';
import Icon from 'react-native-vector-icons/FontAwesome';
+const windowHeight = Dimensions.get('window').height;
+
class SignupScreen extends React.Component {
constructor(props) {
@@ -29,12 +32,11 @@ class SignupScreen extends React.Component {
return (
<KeyboardAvoidingView
behavior="height"
- style={{ flex: 1, alignItems: 'center', justifyContent: 'center', width: '100%' }}
>
- <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', width: '100%' }}>
+ <View style={{ height: windowHeight/3, alignItems: 'center', justifyContent: 'center' }}>
<Text h1>Inscription</Text>
</View>
- <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', width: '100%' }}>
+ <View style={{ height: windowHeight/3, alignItems: 'center', justifyContent: 'center' }}>
<Input
placeholder="Pseudonyme"
style={{ fontSize: 16, borderBottomColor: "grey" }}
@@ -73,7 +75,7 @@ class SignupScreen extends React.Component {
}
/>
</View>
- <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', width: '100%' }}>
+ <View style={{ height: windowHeight/3, alignItems: 'center', justifyContent: 'center' }}>
<Text>
J'ai déjà un compte
</Text>
@@ -96,10 +98,6 @@ const styles = StyleSheet.create({
borderRadius: 1000,
width: 200,
textAlign: 'center',
- },
- linkText: {
- color: 'dodgerblue',
- textDecorationLine: 'underline'
}
})
--
GitLab