Skip to content

S
safetcut-app
Commit 8b3c48f3 by Prachpawee
Options

update style

parent cbe32519
Showing with 211 additions and 295 deletions
src/components/layout/CardWithThumbnail.js deleted 100644 → 0
import React from 'react';
import { View, Card, CardItem, Thumbnail } from 'native-base';
import { StyleSheet } from 'react-native';
const CardWithThumbnail = props => {
return (
<View style={styles.container}>
<Card style={styles.cardContainer}>
<CardItem>
<Thumbnail
style={styles.avatarImg}
source={{
uri: 'https://www.logistec.com/wp-content/uploads/2017/12/placeholder.png',
}}
/>
</CardItem>
{props.children}
</Card>
</View>
);
};
const styles = StyleSheet.create({
container: {
top: '20%',
alignItems: 'center',
},
cardContainer: {
alignItems: 'center',
justifyContent: 'center',
width: '90%',
paddingHorizontal: 30,
paddingVertical: 40,
borderRadius: 10,
},
avatarImg: {
width: 140,
height: 140,
borderRadius: 100,
},
});
export default CardWithThumbnail;
src/components/layout/LoginCard.js deleted 100644 → 0
import React from 'react';
import { View, Text, Card, Button } from 'native-base';
import { StyleSheet } from 'react-native';
const styles = StyleSheet.create({
container: {
alignItems: 'center',
top: '10%',
},
cardStyle: {
width: '90%',
marginTop: 40,
borderRadius: 10,
paddingHorizontal: 20,
paddingTop: 20,
paddingBottom: 50,
},
submitBtn: { borderRadius: 30, marginTop: 30 },
});
const LoginCard = props => {
return (
<View style={styles.container}>
<Text style={{ fontSize: 36 }}>{props.title}</Text>
<Card style={styles.cardStyle}>
{props.children}
<Button danger full style={styles.submitBtn} onPress={props.continue}>
<Text>CONTINUE</Text>
</Button>
</Card>
{props.isLogin ? (
<Text style={{ color: 'grey', marginTop: 20 }}>
Don't have an account?{' '}
<Text style={{ color: 'firebrick' }} onPress={() => console.log('Register!')}>
Register
</Text>
</Text>
) : (
<View />
)}
</View>
);
};
export default LoginCard;
src/components/layout/ResetPassBG.js deleted 100644 → 0
import React from 'react';
import { View, Body, Title } from 'native-base';
import { StyleSheet } from 'react-native';
const resetPassBg = props => {
return (
<View style={{height: '100%'}}>
<View style={styles.TopBg}>
<Body>
<Title style={styles.title}>{props.title}</Title>
</Body>
</View>
{props.children}
<View style={styles.BotBg} />
</View>
);
};
const styles = StyleSheet.create({
TopBg: {
backgroundColor: '#b72929',
height: 250,
width: '100%',
position: 'absolute',
top: 0,
},
title: {
top: '25%',
fontSize: 36,
},
BotBg: {
position: 'absolute',
bottom: 0,
backgroundColor: '#b72929',
height: 50,
width: '100%',
},
});
export default resetPassBg;
src/components/layout/SuccessModal.js
import React from 'react';
import { View, Text } from 'native-base';
import { Modal, TouchableHighlight } from 'react-native';
const SuccessModal = props => {
import React, { Component } from 'react';
import { Modal, Image, StyleSheet } from 'react-native';
import { View, Button, Text, H1 } from 'native-base';
export default class SuccessModal extends Component {
constructor(props) {
super(props);
this.state = {
modalVisible: false,
};
}
setModalVisible(visible) {
this.setState({ modalVisible: visible });
}
render() {
const styles = StyleSheet.create({
dimBg: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'rgba(0,0,0,0.5)',
},
modalContainer: {
backgroundColor: 'white',
width: '90%',
borderRadius: 10,
paddingHorizontal: 20,
paddingBottom: 40,
paddingTop: 60,
alignItems: 'center',
},
img: {
width: 90,
height: 90,
},
textContainer: {
alignItems: 'center',
marginTop: 20,
marginBottom: 40,
},
btnStyle: {
borderRadius: 30,
marginTop: 30,
},
});
return (
<Modal
animationType="slide"
transparent={false}
visible={this.state.modalVisible}
onRequestClose={() => {
Alert.alert('Modal has been closed.');
}}>
<View style={{ marginTop: 22 }}>
<View>
<Text>Hello World!</Text>
<TouchableHighlight
<Modal animationType="fade" transparent={true} visible={this.state.modalVisible}>
<View style={styles.dimBg}>
<View style={styles.modalContainer}>
<Image
style={styles.img}
source={{
uri: 'https://www.stickpng.com/assets/images/5aa78e387603fc558cffbf1d.png',
}}
/>
<View style={styles.textContainer}>
<H1>Success!</H1>
<Text style={{ color: '#cacaca', marginTop: 10 }}>Thansdfgksjdfo;gjs;dfjsdfgsdfg</Text>
<Text style={{ color: '#cacaca' }}>Thansdfgksjdfo;gjs;dfjsdfgsdfg</Text>
</View>
<Button
full
danger
onPress={() => {
this.setModalVisible(!this.state.modalVisible);
}}>
<Text>Hide Modal</Text>
</TouchableHighlight>
console.log('hide modal!');
}}
style={{ borderRadius: 40 }}
>
<Text>GO TO HOME</Text>
</Button>
</View>
</View>
</Modal>
{this.props.isRegister ? (
<Button
danger
full
style={styles.btnStyle}
onPress={() => {
this.setModalVisible(true);
}}
>
<Text>CONTINUE</Text>
</Button>
) : (
<View />
)}
</View>
);
};
export default SuccessModal;
}
}
src/constants/Styles.js 0 → 100644
import { StyleSheet } from 'react-native';
export const theme = StyleSheet.create({
startContainer: { top: 120, paddingHorizontal: 50 },
startTitle: { textAlign: 'center', color: '#4a4a4a', fontSize: 36 },
startFormContainer: { paddingRight: 10, marginBottom: 10, marginTop: 40 },
redRoundedBtn: { borderRadius: 40, backgroundColor: '#f97070' },
});
src/screens/public/forgotPassword.js 0 → 100644
import React, { Component } from 'react';
import { Container, Text, Content, Input, View, Form, Item, Button } from 'native-base';
import { theme } from '../../constants/Styles';
export default class forgotPassword extends Component {
render() {
return (
<Container>
<Content style={theme.startContainer}>
<Text style={theme.startTitle}>Forgot Password</Text>
<View style={{ paddingHorizontal: 15, marginTop: 40 }}>
<Text style={{ color: '#808080' }}>Please enter your email address.</Text>
<Text style={{ color: '#808080' }}>
You will receive a link to create a new password via email.
</Text>
</View>
<Form style={theme.startFormContainer}>
<Item>
<Input placeholder="E-mail" placeholderTextColor={'#cacaca'} style={{ color: '#808080' }} />
</Item>
</Form>
<Button full style={[theme.redRoundedBtn, { marginTop: 75 }]}>
<Text>SEND</Text>
</Button>
</Content>
</Container>
);
}
}
src/screens/public/login.js
import React, { Component } from 'react';
import { Container, Text, Input, CardItem, Radio, Form, Item, Label, Left, Right } from 'native-base';
import LoginCard from '../../components/layout/LoginCard';
import { Container, Text, Content, Input, Radio, Form, Item, Left, Right, Button, Row } from 'native-base';
import { theme } from '../../constants/Styles';
export default class login extends Component {
constructor(props) {
super(props);
......@@ -10,20 +10,30 @@ export default class login extends Component {
}
render() {
return (
<Container style={{ backgroundColor: '#fbfbfb' }}>
<LoginCard title={'Login'} isLogin={true}>
<Form style={{ paddingRight: 10, marginBottom: 10 }}>
<Item floatingLabel>
<Label style={{ color: '#cacaca' }}>Username</Label>
<Input />
<Container>
<Content style={theme.startContainer}>
<Text style={theme.startTitle}>Login</Text>
<Form style={theme.startFormContainer}>
<Item>
<Input
placeholder="Username"
placeholderTextColor={'#cacaca'}
style={{ color: '#808080' }}
/>
</Item>
<Item floatingLabel>
<Label style={{ color: '#cacaca' }}>Password</Label>
<Input secureTextEntry={true} />
<Item>
<Input
secureTextEntry={true}
placeholder="Password"
placeholderTextColor={'#cacaca'}
style={{ color: '#808080' }}
/>
</Item>
</Form>
<CardItem>
<Row style={{ marginTop: 30 }}>
<Left>
<Row>
<Radio
color={'#cacaca'}
selected={this.state.isCheck}
......@@ -33,15 +43,20 @@ export default class login extends Component {
})
}
/>
<Text style={{ color: '#cacaca' }}>Remember me</Text>
<Text style={{ color: '#cacaca', marginLeft: 5 }}>Remember me</Text>
</Row>
</Left>
<Right>
<Text style={{ color: '#cacaca' }} onPress={() => console.log('Forgot password!!')}>
Forgot password
</Text>
<Text style={{ color: '#cacaca' }}>Forgot password?</Text>
</Right>
</CardItem>
</LoginCard>
</Row>
<Button full style={[theme.redRoundedBtn, { marginTop: 75 }]}>
<Text>LOGIN</Text>
</Button>
<Text style={{ color: '#4a4a4a', textAlign: 'center', marginTop: 20 }}>
Don't have an account? <Text style={{ color: '#f44c4c', fontWeight: 'bold' }}>Register</Text>
</Text>
</Content>
</Container>
);
}
......
src/screens/public/register.js
import React, { Component } from 'react';
import { Container, Text, CardItem, CheckBox, Left, Form, Input, Label, Item, View } from 'native-base';
import { Modal, TouchableHighlight } from 'react-native';
import LoginCard from '../../components/layout/LoginCard';
import SuccessModal from '../../components/layout/SuccessModal';
import { Container, Text, Content, Input, Form, Item, Left, Button, Row, CheckBox } from 'native-base';
import { theme } from '../../constants/Styles';
export default class register extends Component {
constructor(props) {
super(props);
this.state = {
isCheck: false,
modalVisible: false,
};
}
setModalVisible(visible) {
this.setState({ modalVisible: visible });
}
render() {
const InputText = props => {
return (
<Container style={{ backgroundColor: '#fbfbfb' }}>
<Modal
animationType="fade"
transparent={true}
visible={this.state.modalVisible}
onRequestClose={() => {
Alert.alert('Modal has been closed.');
}}>
<View style={{ alignItems: 'center', top: '20%' }}>
<View style={{ backgroundColor: 'white', width: '90%', height: 100 }}>
<Text>test modal</Text>
<TouchableHighlight
onPress={() => {
this.setModalVisible(!this.state.modalVisible);
}}>
<Text>Hide Modal</Text>
</TouchableHighlight>
</View>
</View>
</Modal>
<LoginCard
title={'Register'}
continue={() => {
this.setModalVisible(true);
}}>
<Form style={{ paddingRight: 10, marginBottom: 10 }}>
<Item floatingLabel>
<Label style={{ color: '#cacaca' }}>Name</Label>
<Input />
</Item>
<Item floatingLabel>
<Label style={{ color: '#cacaca' }}>Surname</Label>
<Input />
</Item>
<Item floatingLabel>
<Label style={{ color: '#cacaca' }}>E-mail</Label>
<Input />
</Item>
<Item floatingLabel>
<Label style={{ color: '#cacaca' }}>Password</Label>
<Input secureTextEntry={true} />
</Item>
<Item floatingLabel>
<Label style={{ color: '#cacaca' }}>Confirm password</Label>
<Input secureTextEntry={true} />
</Item>
<Item floatingLabel>
<Label style={{ color: '#cacaca' }}>Phone no.</Label>
<Input />
<Item>
<Input
placeholder={props.placeholder}
secureTextEntry={props.isPass}
placeholderTextColor={'#cacaca'}
style={{ color: '#808080' }}
/>
</Item>
);
};
return (
<Container>
<Content style={theme.startContainer}>
<Text style={theme.startTitle}>Register</Text>
<Form style={theme.startFormContainer}>
<InputText placeholder={'Name'} />
<InputText placeholder={'Surname'} />
<InputText placeholder={'E-mail'} />
<InputText placeholder={'Password'} isPass={true} />
<InputText placeholder={'Confirm password'} isPass={true} />
<InputText placeholder={'Phone number'} />
</Form>
<CardItem>
<Row style={{ marginTop: 30 }}>
<Left>
<Row>
<CheckBox
color={'#cacaca'}
color={'#888888'}
checked={this.state.isCheck}
style={{ marginRight: 5 }}
onPress={() =>
this.setState(() => {
return (this.state.isCheck = !this.state.isCheck);
})
}
/>
<Text style={{ color: '#cacaca' }}>
<Text style={{ color: '#9ea0a5', marginLeft: 15 }}>
I have read the{' '}
<Text
style={{ textDecorationLine: 'underline', color: 'grey' }}
onPress={() => console.log('Terms and Conditions')}>
<Text style={{ textDecorationLine: 'underline', color: '#56575a' }}>
Terms and Conditions
</Text>
.
</Text>
</Row>
</Left>
</CardItem>
</LoginCard>
</Row>
<Button full style={{ marginTop: 50, borderRadius: 40, backgroundColor: '#f97070' }}>
<Text>CONTINUE</Text>
</Button>
</Content>
</Container>
);
}
......
src/screens/public/resetPassword.js deleted 100644 → 0
import React, { Component } from 'react';
import { Container, CardItem, Button, Text, View, Input } from 'native-base';
import ResetPassBg from '../../components/layout/ResetPassBG';
import CardWithThumbnail from '../../components/layout/CardWithThumbnail';
class resetPassword extends Component {
render() {
return (
<Container>
<ResetPassBg title={'Reset you password'}>
<CardWithThumbnail>
<CardItem>
<Input
placeholder="Your email"
underlineColorAndroid="#d8d8d8"
placeholderTextColor="#cacaca"
/>
</CardItem>
<Button rounded full danger style={{ borderRadius: 50 }}>
<Text>Send</Text>
</Button>
</CardWithThumbnail>
</ResetPassBg>
</Container>
);
}
}
export default resetPassword;
src/screens/public/sendEmail.js
import React, { Component } from 'react';
import { Container, Text, View, H3 } from 'native-base';
import { StyleSheet } from 'react-native';
import ResetPassBg from '../../components/layout/ResetPassBG';
import CardWithThumbnail from '../../components/layout/CardWithThumbnail';
const styles = StyleSheet.create({
titleText: {
textAlign: 'center',
color: '#86929d',
},
normalText: {
textAlign: 'center',
color: '#4a4a4a',
},
});
import { Container, Text, Content, View, Button } from 'native-base';
import { Image } from 'react-native';
import { theme } from '../../constants/Styles';
export default class sendEmail extends Component {
render() {
return (
<Container>
<ResetPassBg title={'Login'}>
<CardWithThumbnail>
<View style={{ marginTop: 20 }}>
<H3 style={styles.titleText}>Reset your password</H3>
</View>
<View style={{ marginTop: 20 }}>
<Text style={styles.normalText}>
We have sent a reset password email to _________@gmail.com
</Text>
<Text style={styles.normalText}>
Please click the reset password link to set your new password.
</Text>
</View>
<View style={{ marginTop: 20 }}>
<Text style={styles.normalText}>Didn't receive email yet?</Text>
<Text style={styles.normalText}>
Please check your spam folder, or{' '}
<Text style={{ color: '#4a90e2' }} onPress={() => console.log('resend click!')}>
resend
</Text>{' '}
the email.
<Content style={theme.startContainer}>
<Image
style={{ width: 135, height: 135, alignSelf: 'center', borderRadius: 100 }}
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' }}>
We sent an email with instructions for resetting your password.
</Text>
</View>
</CardWithThumbnail>
</ResetPassBg>
<Button full style={[theme.redRoundedBtn, { marginTop: 60 }]}>
<Text>DONE</Text>
</Button>
<Button transparent style={{ marginTop: 40, alignSelf: 'center' }}>
<Text style={{ color: '#9b9b9b' }}>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