diff --git a/react-native/ChatApp/components/DiscussionsScreen.js b/react-native/ChatApp/components/DiscussionsScreen.js index 42d4ff0e68eca9e6545224bb2014ff5cb97d7b75..cc7bf81dd15ddafb31ffdb748fcd75a56fba35f5 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 1c4d6a245992b7d24d22c5ea3666fe360a7b3ff8..0ab5f7401c737814e4dbeae056598b5ea79135fc 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 b3a8df33831686ca62d00dd59af53356e76ecdf9..8e6a6c6493ea9d0bf93c6668cb9659bbf522e240 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 960ef6d721a710df14e9b2e216014f876fbd95e9..5d8e74b0fe4e40bd47d3c5fb8d931dde10182779 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' } })