Skip to content

S
safetcut-app
Commit 9de5f137 by Tonk
Options

update intro stack style

parent 04871b41
Showing with 110 additions and 42 deletions
constants/Styles.js
......@@ -12,29 +12,33 @@ export const color = {
export const theme = StyleSheet.create({
startContainer: {
top: '15%',
top: '12%',
paddingHorizontal: 50,
},
startTitle: {
textAlign: 'center',
// textAlign: 'center',
color: color.grey3,
fontSize: 36,
fontSize: 22,
fontFamily: 'Avenir-Roman',
fontWeight: 'bold',
},
startFormContainer: {
paddingRight: 10,
// paddingRight: 10,
marginBottom: 10,
marginTop: 40,
marginTop: 30,
},
roundedBtn: {
alignItems: 'center',
borderRadius: 24,
},
input: {
width: 300,
marginLeft: 5,
color: color.grey1,
marginTop: 30,
marginTop: 25,
fontSize: 17,
paddingBottom: 5,
borderBottomColor: '#cfd7db',
borderBottomWidth: 1,
fontFamily: 'Avenir-Roman',
},
inputErrIcon: {
color: color.red1,
......@@ -47,8 +51,8 @@ export const theme = StyleSheet.create({
color: color.red1,
fontSize: 10,
position: 'absolute',
bottom: -12,
left: 5,
bottom: -15,
fontFamily: 'Avenir-Roman',
},
inputContainer: {
flex: 1,
......
screens/Public/ForgotPasswordScreen.js
import React, { Component } from 'react';
import { Container, Text, Content, Input, View, Form, Item, Button } from 'native-base';
import { Container, Text, Content, View, Button } from 'native-base';
import { theme, color } from '../../constants/Styles';
import { LinearGradient } from 'expo-linear-gradient';
import { Form, Field } from 'react-native-validate-form';
import InputField from '../../components/InputField';
// validations
const required = value => (value ? undefined : 'This is a required field.');
const email = value =>
value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,5}$/i.test(value)
? 'Please provide a valid email address.'
: undefined;
export default class ForgotPasswordScreen extends Component {
state = {
errors: [],
email: '',
};
submitForm() {
let submitResults = this.registerForm.validate();
let errors = [];
submitResults.forEach(item => {
errors.push({ field: item.fieldName, error: item.error });
});
this.setState({ errors: errors });
}
submitSuccess() {
console.log('Submit Success!');
}
submitFailed() {
console.log('Submit Failed!');
}
render() {
return (
<Container>
<Content style={theme.startContainer}>
<Text style={[theme.startTitle, { fontSize: 22, fontWeight: 'bold' }]}>Forgot Password</Text>
<View style={{ paddingHorizontal: 15, marginTop: 40 }}>
<Text style={{ color: color.grey1 }}>Please enter your email address.</Text>
<Text style={{ color: color.grey1 }}>
<Text style={[theme.startTitle, { textAlign: 'center' }]}>Forgot Password</Text>
<View style={{ marginTop: 40 }}>
<Text style={{ color: color.grey1, fontFamily: 'Avenir-Roman' }}>
Please enter your email address.
</Text>
<Text style={{ color: color.grey1, fontFamily: 'Avenir-Roman' }}>
You will receive a link to create a new password via email.
</Text>
</View>
<Form style={theme.startFormContainer}>
<Item>
<Input
placeholder="Your E-mail"
placeholderTextColor={color.grey2}
style={{ color: color.grey1 }}
/>
</Item>
<Form
ref={ref => (this.registerForm = ref)}
validate={true}
submit={this.submitSuccess.bind(this)}
failed={this.submitFailed.bind(this)}
errors={this.state.errors}
style={theme.startFormContainer}
>
<Field
required
component={InputField}
validations={[required, email]}
name="email"
value={this.state.email}
onChangeText={val => this.setState({ email: val })}
customStyle={theme.input}
placeholder="Your E-mail"
/>
</Form>
<LinearGradient
colors={['#f97070', '#f44c4c']}
......@@ -38,7 +80,7 @@ export default class ForgotPasswordScreen extends Component {
this.props.navigation.navigate('SendEmail');
}}
>
<Text style={{ color: 'white' }}>SEND</Text>
<Text style={{ color: 'white', fontFamily: 'Avenir-Roman' }}>SEND</Text>
</Button>
</LinearGradient>
</Content>
......
screens/Public/LoginScreen.js
import React, { Component } from 'react';
import { Container, Text, Content, Input, Radio, Item, Left, Right, Button, Row, CheckBox } from 'native-base';
import { Container, Text, Content, Left, Right, Button, Row, CheckBox } from 'native-base';
import { theme } from '../../constants/Styles';
import { LinearGradient } from 'expo-linear-gradient';
import { Form, Field } from 'react-native-validate-form';
......@@ -81,13 +81,23 @@ export default class LoginScreen extends Component {
return (this.state.isCheck = !this.state.isCheck);
})
}
style={{ left: 0 }}
/>
<Text style={{ color: '#cacaca', marginLeft: 12, fontSize: 13 }}>Remember me</Text>
<Text
style={{
color: '#cacaca',
marginLeft: 5,
fontSize: 13,
fontFamily: 'Avenir-Roman',
}}
>
Remember me
</Text>
</Row>
</Left>
<Right>
<Text
style={{ color: '#cacaca', fontSize: 13, marginRight: 10 }}
style={{ color: '#cacaca', fontSize: 13, fontFamily: 'Avenir-Roman' }}
onPress={() => {
// Actions.ForgotPass();
this.props.navigation.navigate('Forget');
......@@ -104,13 +114,13 @@ export default class LoginScreen extends Component {
style={[theme.roundedBtn, { marginTop: 75 }]}
>
<Button full transparent onPress={this.submitForm.bind(this)}>
<Text style={{ color: 'white' }}>LOGIN</Text>
<Text style={{ color: 'white', fontFamily: 'Avenir-Roman' }}>LOGIN</Text>
</Button>
</LinearGradient>
<Text style={{ color: '#4a4a4a', textAlign: 'center', marginTop: 20 }}>
<Text style={{ color: '#4a4a4a', textAlign: 'center', marginTop: 20, fontFamily: 'Avenir-Roman' }}>
Don't have an account?{' '}
<Text
style={{ color: '#f44c4c', fontWeight: 'bold' }}
style={{ color: '#f44c4c', fontWeight: 'bold', fontFamily: 'Avenir-Roman' }}
onPress={() => {
// Actions.Register();
this.props.navigation.navigate('Register');
......
screens/Public/RegisterScreen.js
......@@ -150,7 +150,7 @@ export default class RegisterScreen extends Component {
placeholder="Phone number"
/>
</Form>
<Row style={{ marginTop: 30 }}>
<Row style={{ marginTop: 30, alignItems: 'center' }}>
<CheckBox
color={'#888888'}
checked={this.state.isCheck}
......@@ -159,10 +159,18 @@ export default class RegisterScreen extends Component {
return (this.state.isCheck = !this.state.isCheck);
})
}
style={{ left: 0 }}
/>
<Text style={{ color: '#9ea0a5', marginLeft: 15, fontSize: 14 }}>
<Text style={{ color: '#9ea0a5', marginLeft: 5, fontSize: 14, fontFamily: 'Avenir-Roman' }}>
I have read the{' '}
<Text style={{ textDecorationLine: 'underline', color: '#56575a', fontSize: 14 }}>
<Text
style={{
textDecorationLine: 'underline',
color: '#56575a',
fontSize: 14,
fontFamily: 'Avenir-Roman',
}}
>
Terms and Conditions
</Text>
.
......@@ -175,7 +183,7 @@ export default class RegisterScreen extends Component {
style={[theme.roundedBtn, { marginTop: 50 }]}
>
<Button full transparent onPress={this.submitForm.bind(this)}>
<Text style={{ color: 'white' }}>CONTINUE</Text>
<Text style={{ color: 'white', fontFamily: 'Avenir-Roman' }}>CONTINUE</Text>
</Button>
</LinearGradient>
</Content>
......
screens/Public/SendEmailScreen.js
......@@ -9,21 +9,25 @@ export default class SendEmailScreen extends Component {
return (
<Container>
<Content style={theme.startContainer}>
<Text style={{ fontSize: 22, fontFamily: 'Avenir-Roman', color: '#00ce82', textAlign: 'center' }}>
Reset Password Successfully
</Text>
<Image
style={{
width: 135,
height: 135,
alignSelf: 'center',
borderRadius: 65,
marginTop: 50,
}}
source={{
uri:
'https://constructioncompanieslebanon.com/wp-content/uploads/2018/02/6ba96ffc82c13a9c4271233ab23e9afe.jpg',
}}
/>
<Text style={[theme.startTitle, { marginTop: 45 }]}>Check you email</Text>
<View style={{ paddingHorizontal: 15, marginTop: 40 }}>
<Text style={{ color: '#808080' }}>
<Text style={[theme.startTitle, { marginTop: 45, textAlign: 'center' }]}>Check you email</Text>
<View style={{ paddingHorizontal: 15, marginTop: 20 }}>
<Text style={{ color: '#808080', textAlign: 'center', fontFamily: 'Avenir-Roman' }}>
We sent an email with instructions for resetting your password.
</Text>
</View>
......@@ -31,7 +35,7 @@ export default class SendEmailScreen extends Component {
colors={['#f97070', '#f44c4c']}
start={[0, 0]}
end={[1, 0]}
style={[theme.roundedBtn, { marginTop: 60 }]}
style={[theme.roundedBtn, { marginTop: 50 }]}
>
<Button
full
......@@ -41,11 +45,11 @@ export default class SendEmailScreen extends Component {
this.props.navigation.navigate('Login');
}}
>
<Text style={{ color: 'white' }}>DONE</Text>
<Text style={{ color: 'white', fontFamily: 'Avenir-Roman' }}>DONE</Text>
</Button>
</LinearGradient>
<Button transparent style={{ marginTop: 40, alignSelf: 'center' }}>
<Text style={{ color: '#9b9b9b' }}>RESEND</Text>
<Button transparent style={{ marginTop: 10, alignSelf: 'center' }}>
<Text style={{ color: '#9b9b9b', fontFamily: 'Avenir-Roman' }}>RESEND</Text>
</Button>
</Content>
</Container>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment