Skip to content

S
safetcut-app
Commit 0c262624 by Tonk
Options

update intro stack format & add GradientBtn

parent 9de5f137
Showing with 100 additions and 117 deletions
components/GradientBtn.js 0 → 100644
import React from 'react';
import { LinearGradient } from 'expo-linear-gradient';
import { theme, color } from '../constants/Styles';
import { Button, Text } from 'native-base';
const GradientBtn = props => {
return (
<LinearGradient
colors={[color.lightRed, color.primary]}
start={[0, 0]}
end={[1, 0]}
style={[theme.roundedBtn, { marginTop: 50 }]}
>
<Button full transparent onPress={props.onPress}>
<Text style={{ color: 'white', fontFamily: 'Avenir-Roman' }}>{props.title.toUpperCase()}</Text>
</Button>
</LinearGradient>
);
};
export default GradientBtn;
constants/Styles.js
......@@ -4,10 +4,14 @@ export const color = {
grey1: '#808080',
grey2: '#cacaca',
grey3: '#4a4a4a',
lightRed: '#f97070',
primary: '#f44c4c',
red1: '#fc3d3d',
camBg: 'rgba(51,51,61,0.65)',
defaultBg: '#f3f3f3',
camBg: 'rgba(51,51,61,0.65)',
success: '#00ce82',
powerOn: '#10ca88',
inputBorder: '#cfd7db',
};
export const theme = StyleSheet.create({
......@@ -16,14 +20,12 @@ export const theme = StyleSheet.create({
paddingHorizontal: 50,
},
startTitle: {
// textAlign: 'center',
color: color.grey3,
fontSize: 22,
fontFamily: 'Avenir-Roman',
fontWeight: 'bold',
},
startFormContainer: {
// paddingRight: 10,
marginBottom: 10,
marginTop: 30,
},
......@@ -36,7 +38,7 @@ export const theme = StyleSheet.create({
marginTop: 25,
fontSize: 17,
paddingBottom: 5,
borderBottomColor: '#cfd7db',
borderBottomColor: color.inputBorder,
borderBottomWidth: 1,
fontFamily: 'Avenir-Roman',
},
......@@ -59,13 +61,19 @@ export const theme = StyleSheet.create({
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'flex-end',
borderBottomColor: '#cfd7db',
borderBottomWidth: 1,
paddingBottom: 5,
},
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
subText: {
color: color.grey2,
fontSize: 13,
fontFamily: 'Avenir-Roman',
},
descripText: {
color: color.grey1,
fontFamily: 'Avenir-Roman',
},
});
screens/Public/ForgotPasswordScreen.js
import React, { Component } from 'react';
import { Container, Text, Content, View, Button } from 'native-base';
import { theme, color } from '../../constants/Styles';
import { LinearGradient } from 'expo-linear-gradient';
import { Container, Text, Content, View } from 'native-base';
import { theme } from '../../constants/Styles';
import { Form, Field } from 'react-native-validate-form';
import InputField from '../../components/InputField';
import GradientBtn from '../../components/GradientBtn';
// validations
const required = value => (value ? undefined : 'This is a required field.');
const email = value =>
......@@ -40,10 +40,8 @@ export default class ForgotPasswordScreen extends Component {
<Content style={theme.startContainer}>
<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' }}>
<Text style={theme.descripText}>Please enter your email address.</Text>
<Text style={theme.descripText}>
You will receive a link to create a new password via email.
</Text>
</View>
......@@ -66,23 +64,12 @@ export default class ForgotPasswordScreen extends Component {
placeholder="Your E-mail"
/>
</Form>
<LinearGradient
colors={['#f97070', '#f44c4c']}
start={[0, 0]}
end={[1, 0]}
style={[theme.roundedBtn, { marginTop: 75 }]}
>
<Button
full
transparent
onPress={() => {
// Actions.SendEmail();
this.props.navigation.navigate('SendEmail');
}}
>
<Text style={{ color: 'white', fontFamily: 'Avenir-Roman' }}>SEND</Text>
</Button>
</LinearGradient>
<GradientBtn
onPress={() => {
this.props.navigation.navigate('SendEmail');
}}
title={'send'}
/>
</Content>
</Container>
);
......
screens/Public/LoginScreen.js
import React, { Component } from 'react';
import { Container, Text, Content, Left, Right, Button, Row, CheckBox } from 'native-base';
import { theme } from '../../constants/Styles';
import { LinearGradient } from 'expo-linear-gradient';
import { Container, Text, Content, Left, Right, Row, CheckBox } from 'native-base';
import { theme, color } from '../../constants/Styles';
import { Form, Field } from 'react-native-validate-form';
import InputField from '../../components/InputField';
import { AsyncStorage } from 'react-native';
import { AsyncStorage, StyleSheet } from 'react-native';
import GradientBtn from '../../components/GradientBtn';
// validations
const required = value => (value ? undefined : 'This is a required field.');
const minChar = value => (value && !/^.{6,}$/i.test(value) ? 'At least 6 characters' : undefined);
// styles
const styles = StyleSheet.create({
dhacText: {
color: color.grey3,
textAlign: 'center',
marginTop: 20,
fontFamily: 'Avenir-Roman',
},
regisText: {
color: color.primary,
fontWeight: 'bold',
fontFamily: 'Avenir-Roman',
},
});
export default class LoginScreen extends Component {
state = {
isCheck: false,
......@@ -33,6 +50,7 @@ export default class LoginScreen extends Component {
submitFailed() {
console.log('Submit Failed!');
}
render() {
return (
<Container>
......@@ -74,7 +92,7 @@ export default class LoginScreen extends Component {
<Left>
<Row style={{ alignItems: 'center' }}>
<CheckBox
color={'#cacaca'}
color={color.grey2}
checked={this.state.isCheck}
onPress={() =>
this.setState(() => {
......@@ -83,23 +101,13 @@ export default class LoginScreen extends Component {
}
style={{ left: 0 }}
/>
<Text
style={{
color: '#cacaca',
marginLeft: 5,
fontSize: 13,
fontFamily: 'Avenir-Roman',
}}
>
Remember me
</Text>
<Text style={[theme.subText, { marginLeft: 5 }]}>Remember me</Text>
</Row>
</Left>
<Right>
<Text
style={{ color: '#cacaca', fontSize: 13, fontFamily: 'Avenir-Roman' }}
style={theme.subText}
onPress={() => {
// Actions.ForgotPass();
this.props.navigation.navigate('Forget');
}}
>
......@@ -107,22 +115,12 @@ export default class LoginScreen extends Component {
</Text>
</Right>
</Row>
<LinearGradient
colors={['#f97070', '#f44c4c']}
start={[0, 0]}
end={[1, 0]}
style={[theme.roundedBtn, { marginTop: 75 }]}
>
<Button full transparent onPress={this.submitForm.bind(this)}>
<Text style={{ color: 'white', fontFamily: 'Avenir-Roman' }}>LOGIN</Text>
</Button>
</LinearGradient>
<Text style={{ color: '#4a4a4a', textAlign: 'center', marginTop: 20, fontFamily: 'Avenir-Roman' }}>
<GradientBtn onPress={this.submitForm.bind(this)} title={'login'} />
<Text style={styles.dhacText}>
Don't have an account?{' '}
<Text
style={{ color: '#f44c4c', fontWeight: 'bold', fontFamily: 'Avenir-Roman' }}
style={styles.regisText}
onPress={() => {
// Actions.Register();
this.props.navigation.navigate('Register');
}}
>
......
screens/Public/RegisterScreen.js
import React, { Component } from 'react';
import { Container, Text, Content, Button, Row, CheckBox } from 'native-base';
import { theme } from '../../constants/Styles';
import { Container, Text, Content, Row, CheckBox } from 'native-base';
import { theme, color } from '../../constants/Styles';
import { Form, Field } from 'react-native-validate-form';
import InputField from '../../components/InputField';
import { LinearGradient } from 'expo-linear-gradient';
import { Alert } from 'react-native';
import GradientBtn from '../../components/GradientBtn';
// validations
const required = value => (value ? undefined : 'This is a required field.');
......@@ -45,23 +45,15 @@ export default class RegisterScreen extends Component {
'Completed!',
'You have completed your registration',
[
// {text: 'Ask me later', onPress: () => console.log('Ask me later pressed')},
// {
// text: 'Cancel',
// onPress: () => console.log('Cancel Pressed'),
// style: 'cancel',
// },
{
text: 'Go to Login',
onPress: () => {
// Actions.LoginPage();
this.props.navigation.navigate('Login');
},
},
],
{ cancelable: false }
);
// Actions.LoginPage();
}
submitFailed() {
......@@ -152,7 +144,7 @@ export default class RegisterScreen extends Component {
</Form>
<Row style={{ marginTop: 30, alignItems: 'center' }}>
<CheckBox
color={'#888888'}
color={color.grey2}
checked={this.state.isCheck}
onPress={() =>
this.setState(() => {
......@@ -161,31 +153,15 @@ export default class RegisterScreen extends Component {
}
style={{ left: 0 }}
/>
<Text style={{ color: '#9ea0a5', marginLeft: 5, fontSize: 14, fontFamily: 'Avenir-Roman' }}>
<Text style={[theme.subText, { marginLeft: 5 }]}>
I have read the{' '}
<Text
style={{
textDecorationLine: 'underline',
color: '#56575a',
fontSize: 14,
fontFamily: 'Avenir-Roman',
}}
>
<Text style={[theme.subText, { color: color.grey3, textDecorationLine: 'underline' }]}>
Terms and Conditions
</Text>
.
</Text>
</Row>
<LinearGradient
colors={['#f97070', '#f44c4c']}
start={[0, 0]}
end={[1, 0]}
style={[theme.roundedBtn, { marginTop: 50 }]}
>
<Button full transparent onPress={this.submitForm.bind(this)}>
<Text style={{ color: 'white', fontFamily: 'Avenir-Roman' }}>CONTINUE</Text>
</Button>
</LinearGradient>
<GradientBtn onPress={this.submitForm.bind(this)} title={'continue'} />
</Content>
</Container>
);
......
screens/Public/SendEmailScreen.js
import React, { Component } from 'react';
import { Container, Text, Content, View, Button } from 'native-base';
import { Image } from 'react-native';
import { Image, StyleSheet } from 'react-native';
import { theme } from '../../constants/Styles';
// import { Actions } from 'react-native-router-flux';
import { LinearGradient } from 'expo-linear-gradient';
import GradientBtn from '../../components/GradientBtn';
const styles = StyleSheet.create({
successText: {
fontSize: 22,
fontFamily: 'Avenir-Roman',
color: '#00ce82',
textAlign: 'center',
},
});
export default class SendEmailScreen extends Component {
render() {
return (
<Container>
<Content style={theme.startContainer}>
<Text style={{ fontSize: 22, fontFamily: 'Avenir-Roman', color: '#00ce82', textAlign: 'center' }}>
Reset Password Successfully
</Text>
<Text style={styles.successText}>Reset Password Successfully</Text>
<Image
style={{
width: 135,
......@@ -27,29 +33,18 @@ export default class SendEmailScreen extends Component {
/>
<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' }}>
<Text style={[theme.descripText, { textAlign: 'center' }]}>
We sent an email with instructions for resetting your password.
</Text>
</View>
<LinearGradient
colors={['#f97070', '#f44c4c']}
start={[0, 0]}
end={[1, 0]}
style={[theme.roundedBtn, { marginTop: 50 }]}
>
<Button
full
transparent
onPress={() => {
// Actions.LoginPage();
this.props.navigation.navigate('Login');
}}
>
<Text style={{ color: 'white', fontFamily: 'Avenir-Roman' }}>DONE</Text>
</Button>
</LinearGradient>
<GradientBtn
onPress={() => {
this.props.navigation.navigate('Login');
}}
title={'done'}
/>
<Button transparent style={{ marginTop: 10, alignSelf: 'center' }}>
<Text style={{ color: '#9b9b9b', fontFamily: 'Avenir-Roman' }}>RESEND</Text>
<Text style={theme.descripText}>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