.

constants/Styles.js

@@ -8,72 +8,77 @@ export const color = {
 	primary: '#f44c4c',
 	red1: '#fc3d3d',
 	defaultBg: '#f3f3f3',
+	inputBorder: '#cfd7db',
 	camBg: 'rgba(51,51,61,0.65)',
 	success: '#00ce82',
 	powerOn: '#10ca88',
-	inputBorder: '#cfd7db',
 };
 
 export const theme = StyleSheet.create({
-	startContainer: {
+	// container
+	introContainer: {
 		top: '12%',
 		paddingHorizontal: 50,
 	},
-	startTitle: {
-		color: color.grey3,
-		fontSize: 22,
-		fontFamily: 'Avenir-Roman',
-		fontWeight: 'bold',
-	},
-	startFormContainer: {
-		marginBottom: 10,
+	introFormContainer: {
 		marginTop: 30,
+		marginBottom: 10,
 	},
-	roundedBtn: {
+	inputContainer: {
+		flex: 1,
+		flexDirection: 'row',
+		alignItems: 'flex-end',
+		justifyContent: 'center',
+	},
+	container: {
+		flex: 1,
 		alignItems: 'center',
-		borderRadius: 24,
+		justifyContent: 'center',
+	},
+
+	// text&input
+	startTitle: {
+		fontSize: 22,
+		color: color.grey3,
+		fontWeight: 'bold',
+		fontFamily: 'Avenir-Roman',
 	},
 	input: {
-		color: color.grey1,
-		marginTop: 25,
 		fontSize: 17,
+		marginTop: 25,
 		paddingBottom: 5,
-		borderBottomColor: color.inputBorder,
+		color: color.grey1,
 		borderBottomWidth: 1,
 		fontFamily: 'Avenir-Roman',
-	},
-	inputErrIcon: {
-		color: color.red1,
-		position: 'absolute',
-		right: 5,
-		bottom: 0,
-		fontSize: 20,
+		borderBottomColor: color.inputBorder,
 	},
 	inputErrText: {
-		color: color.red1,
+		bottom: -15,
 		fontSize: 10,
+		color: color.red1,
 		position: 'absolute',
-		bottom: -15,
 		fontFamily: 'Avenir-Roman',
 	},
-	inputContainer: {
-		flex: 1,
-		flexDirection: 'row',
-		justifyContent: 'center',
-		alignItems: 'flex-end',
-	},
-	container: {
-		flex: 1,
-		alignItems: 'center',
-		justifyContent: 'center',
-	},
 	subText: {
-		color: color.grey2,
 		fontSize: 13,
+		color: color.grey2,
 		fontFamily: 'Avenir-Roman',
 	},
 	descripText: {
 		color: color.grey1,
 		fontFamily: 'Avenir-Roman',
 	},
+
+	// button&icon
+	roundedBtn: {
+		borderRadius: 24,
+		alignItems: 'center',
+	},
+	inputErrIcon: {
+		right: 5,
+		bottom: 0,
+		fontSize: 20,
+		color: color.red1,
+		position: 'absolute',
+	},
 });

screens/Public/ForgotPasswordScreen.js

@@ -37,7 +37,7 @@ export default class ForgotPasswordScreen extends Component {
 	render() {
 		return (
 			<Container>
-				<Content style={theme.startContainer}>
+				<Content style={theme.introContainer}>
 					<Text style={[theme.startTitle, { textAlign: 'center' }]}>Forgot Password</Text>
 					<View style={{ marginTop: 40 }}>
 						<Text style={theme.descripText}>Please enter your email address.</Text>
@@ -51,7 +51,7 @@ export default class ForgotPasswordScreen extends Component {
 						submit={this.submitSuccess.bind(this)}
 						failed={this.submitFailed.bind(this)}
 						errors={this.state.errors}
-						style={theme.startFormContainer}
+						style={theme.introFormContainer}
 					>
 						<Field
 							required

screens/Public/LoginScreen.js

@@ -54,7 +54,7 @@ export default class LoginScreen extends Component {
 	render() {
 		return (
 			<Container>
-				<Content style={theme.startContainer}>
+				<Content style={theme.introContainer}>
 					<Text style={theme.startTitle}>Login</Text>
 					<Form
 						ref={ref => (this.registerForm = ref)}
@@ -62,7 +62,7 @@ export default class LoginScreen extends Component {
 						submit={this.submitSuccess.bind(this)}
 						failed={this.submitFailed.bind(this)}
 						errors={this.state.errors}
-						style={theme.startFormContainer}
+						style={theme.introFormContainer}
 					>
 						{/* ---Username--- */}
 						<Field

screens/Public/RegisterScreen.js

@@ -63,7 +63,7 @@ export default class RegisterScreen extends Component {
 	render() {
 		return (
 			<Container>
-				<Content contentContainerStyle={theme.startContainer}>
+				<Content contentContainerStyle={theme.introContainer}>
 					<Text style={theme.startTitle}>Register</Text>
 					<Form
 						ref={ref => (this.registerForm = ref)}
@@ -71,7 +71,7 @@ export default class RegisterScreen extends Component {
 						submit={this.submitSuccess.bind(this)}
 						failed={this.submitFailed.bind(this)}
 						errors={this.state.errors}
-						style={theme.startFormContainer}
+						style={theme.introFormContainer}
 					>
 						{/* ---name--- */}
 						<Field

screens/Public/SendEmailScreen.js

@@ -16,7 +16,7 @@ export default class SendEmailScreen extends Component {
 	render() {
 		return (
 			<Container>
-				<Content style={theme.startContainer}>
+				<Content style={theme.introContainer}>
 					<Text style={styles.successText}>Reset Password Successfully</Text>
 					<Image
 						style={{