them cac trang cart, tai khoan

screens/Register.tsx

@@ -8,81 +8,81 @@ import { Text, View } from '../components/Themed';
 import { TextInput } from 'react-native-gesture-handler';
 import { useNavigation } from '@react-navigation/native';
 import { Checkbox } from 'react-native-paper';
+import Person from "react-native-bootstrap-icons/icons/person";
+import Telephone from "react-native-bootstrap-icons/icons/telephone";
+import Envelope from "react-native-bootstrap-icons/icons/envelope";
+import Geoalt from "react-native-bootstrap-icons/icons/geo-alt";
+import Lock from "react-native-bootstrap-icons/icons/lock";
 
 export default function Register() {
     const [checkedRegis, setCheckedRegis] = useState(false);
+    const [checkedRegisBaoMat, setCheckedRegisBaoMat] = useState(false);
     const navigation = useNavigation();
     return (
         <SafeAreaView style={styles.container}>
             <ScrollView>
                 <View style={styles.boxRegister}>
                     <Text style={styles.boxRegisterTitle}>Tạo tài khoản Nagakawa</Text>
-                    <View style={styles.boxRegisterNote}>
-                        <Text>Bạn đã có tài khoản? </Text>
-                        <TouchableOpacity onPress={() => navigation.navigate('Login')}>
-                            <Text style={styles.green}>Đăng nhập</Text>
-                        </TouchableOpacity>
-                        <Text> tại đây</Text>
+                    <View style={styles.boxRegisterItem}>
+                        <Person width="19" height="19" style={styles.boxRegisterItemIcon} />
+                        <TextInput style={styles.boxRegisterItemInput} placeholder="Họ tên*" />
                     </View>
-                    <View style={styles.boxRegisterList}>
-                        <View style={styles.boxRegisterItem}>
-                            <Text style={styles.boxRegisterItemText}>Số điện thoại*</Text>
-                            <TextInput style={styles.boxRegisterItemInput} />
+                    <View style={styles.boxRegisterItem}>
+                        <Telephone width="19" height="19" style={styles.boxRegisterItemIcon} />
+                        <TextInput style={styles.boxRegisterItemInput} placeholder="Số điện thoại*" />
+                    </View>
+                    <View style={styles.boxRegisterItem}>
+                        <Envelope width="19" height="19" style={styles.boxRegisterItemIcon} />
+                        <TextInput style={styles.boxRegisterItemInput} placeholder="Email đăng ký*" />
+                    </View>
+                    <View style={styles.boxRegisterItem}>
+                        <Geoalt width="19" height="19" style={styles.boxRegisterItemIcon} />
+                        <TextInput style={styles.boxRegisterItemInput} placeholder="Địa chỉ*" />
+                    </View>
+                    <View style={styles.boxRegisterItem}>
+                        <Lock width="19" height="19" style={styles.boxRegisterItemIcon} />
+                        <TextInput style={styles.boxRegisterItemInput} placeholder="Mật khẩu*" />
+                    </View>
+                    <View style={styles.boxRegisterItem}>
+                        <Lock width="19" height="19" style={styles.boxRegisterItemIcon} />
+                        <TextInput style={styles.boxRegisterItemInput} placeholder="Nhập lại mật khẩu*" />
+                    </View>
+                    <View style={styles.checkKmRegis}>
+                        <View style={styles.checkKmRegisCheck}>
+                            <Checkbox status={checkedRegis ? 'checked' : 'unchecked'} onPress={() => setCheckedRegis(!checkedRegis)} />
                         </View>
-                        <View style={styles.boxRegisterItem}>
-                            <Text style={styles.boxRegisterItemText}>Email đăng ký*</Text>
-                            <TextInput style={styles.boxRegisterItemInput} />
+                        <Text style={styles.checkKmRegisText}>Tôi muốn nhận các thông tin khuyến mãi từ Nagakawa</Text>
+                    </View>
+                    <TouchableOpacity style={styles.boxLoginSubmit}>
+                        <Text style={styles.boxLoginSubmitText}>Đăng ký</Text>
+                    </TouchableOpacity>
+                    <View style={styles.checkKmRegis}>
+                        <View style={styles.checkKmRegisCheck}>
+                            <Checkbox status={checkedRegisBaoMat ? 'checked' : 'unchecked'} onPress={() => setCheckedRegisBaoMat(!checkedRegisBaoMat)} />
                         </View>
-                        <View style={styles.boxRegisterItem}>
-                            <Text style={styles.boxRegisterItemText}>Địa chỉ*</Text>
-                            <TextInput style={styles.boxRegisterItemInput} />
-                        </View>
-                        <View style={styles.boxRegisterItem}>
-                            <Text style={styles.boxRegisterItemText}>Mật khẩu*</Text>
-                            <TextInput style={styles.boxRegisterItemInput} />
-                        </View>
-                        <View style={styles.boxRegisterItem}>
-                            <Text style={styles.boxRegisterItemText}>Nhập lại mật khẩu*</Text>
-                            <TextInput style={styles.boxRegisterItemInput} />
-                        </View>
-                        <View style={styles.boxRegisterItem}>
-                            <Text style={styles.boxRegisterItemText}>Họ tên*</Text>
-                            <TextInput style={styles.boxRegisterItemInput} />
-                        </View>
-                        <View style={styles.boxRegisterItem}>
-                            <Text style={styles.boxRegisterItemText}>Mã xác nhận</Text>
-                            <View style={styles.boxRegisterCapcha}>
-                                <Image source={require('../assets/images/captcha.png')} />
-                                <TouchableOpacity>
-                                    <Text style={styles.boxRegisterCapchaOther}>[ Xem mã khác ]</Text>
-                                </TouchableOpacity>
-                            </View>
-                            <TextInput style={styles.boxRegisterItemInput} />
-                        </View>
-                        <View style={styles.checkKmRegis}>
-                            <View style={styles.checkKmRegisCheck}>
-                                <Checkbox status={checkedRegis ? 'checked' : 'unchecked'} onPress={() => setCheckedRegis(!checkedRegis)} />
-                            </View>
-                            <Text style={styles.checkKmRegisText}>Tôi muốn nhận các thông tin khuyến mãi từ Nagakawa</Text>
-                        </View>
-                        <TouchableOpacity style={styles.boxLoginSubmit}>
-                            <Text style={styles.boxLoginSubmitText}>Đăng ký</Text>
-                        </TouchableOpacity>
-                        <View style={styles.boxLoginOther}>
-                            <Text style={styles.boxLoginOtherText}>Hoặc đăng nhập bằng</Text>
-                        </View>
-                        <View style={styles.boxLoginSocial}>
-                            <TouchableOpacity style={[styles.boxLoginSocialItem, styles.boxLoginSocialFace]}>
-                                <FontAwesome style={styles.boxLoginSocialIcon} name="facebook" />
-                            </TouchableOpacity>
-                            <TouchableOpacity style={[styles.boxLoginSocialItem, styles.boxLoginSocialGoogle]}>
-                                <FontAwesome style={styles.boxLoginSocialIcon} name="google" />
-                            </TouchableOpacity>
-                            <TouchableOpacity style={[styles.boxLoginSocialItem, styles.boxLoginSocialZalo]}>
-                                <Image style={styles.boxLoginSocialImg} source={require('../assets/images/icon-zalo.png')} />
+                        <View style={styles.checkKmRegisText}>
+                            <Text>Tôi đồng ý với các</Text>
+                            <TouchableOpacity>
+                                <Text style={styles.colorGreen}>chính sách bảo mật Nagakawa</Text>
                             </TouchableOpacity>
                         </View>
                     </View>
+                    <View style={styles.boxLoginLineChia}>
+                    <View style={styles.boxLoginLine}></View>
+                    <Text style={styles.boxLoginLineChiaText}>Hoặc</Text>
+                    <View style={styles.boxLoginLine}></View>
+                </View>
+                <View style={styles.loginSocial}>
+                    <TouchableOpacity style={[styles.loginSocialItem, styles.loginSocialItemFace]}>
+                        <FontAwesome style={styles.loginSocialItemIcon} name="facebook" />
+                    </TouchableOpacity>
+                    <TouchableOpacity style={[styles.loginSocialItem, styles.loginSocialItemGoogle]}>
+                        <FontAwesome style={styles.loginSocialItemIcon} name="google" />
+                    </TouchableOpacity>
+                    <TouchableOpacity style={[styles.loginSocialItem, styles.loginSocialItemZalo]}>
+                        <Image style={styles.loginSocialItemImg} source={require('../assets/images/zalo-login.png')} />
+                    </TouchableOpacity>
+                </View>
                 </View>
             </ScrollView>
         </SafeAreaView>
@@ -100,52 +100,36 @@ const styles = StyleSheet.create({
     },
     boxRegister: {
         width: winWidth,
+        minHeight: winHeight - 130,
         padding: 10,
-        backgroundColor: 'rgba(0,0,0,0)',
+        backgroundColor: '#fff',
     },
     boxRegisterTitle: {
-        marginBottom: 15,
-        fontSize: 18,
-        fontWeight: 'bold',
-    },
-    boxRegisterNote: {
-        marginBottom: 10,
-        flexDirection: 'row',
-        justifyContent: 'flex-end',
-        alignItems: 'center',
-        backgroundColor: 'rgba(0,0,0,0)'
-    },
-    green: {
-        color: '#008445',
-    },
-    boxRegisterList: {
-        width: '100%',
-        padding: 10,
+        marginBottom: 20,
+        textAlign: 'center',
+        fontWeight: '700'
     },
     boxRegisterItem: {
-        width: '100%',
-        marginBottom: 10,
-    },
-    boxRegisterItemText: {
-        fontWeight: 'bold',
-        marginBottom: 5,
-    },
-    boxRegisterItemInput: {
-        width: '100%',
-        height: 40,
-        borderColor: '#e1e1e1',
-        borderWidth: 1,
-        borderRadius: 5,
-    },
-    boxRegisterCapcha: {
         flexDirection: 'row',
         alignItems: 'center',
+        borderBottomWidth: 1,
+        borderBottomColor: '#ABABAB',
+        paddingBottom: 5,
+        marginBottom: 10,
+    },
+    boxRegisterItemIcon: {
+        marginRight: 10,
+        color: '#999'
+    },
+    boxRegisterItemInput: {
+        width: winWidth - 49,
+        height: 30,
     },
-    boxRegisterCapchaOther: {},
     checkKmRegis: {
         flexDirection: 'row',
         marginBottom: 10,
         marginTop: 10,
+        alignItems: 'center',
     },
     checkKmRegisCheck: {
         width: 36,
@@ -154,7 +138,9 @@ const styles = StyleSheet.create({
         borderColor: '#e1e1e1',
         marginRight: 10,
     },
-    checkKmRegisText: {},
+    checkKmRegisText: {
+        width: winWidth - 66,
+    },
     boxLoginSubmit: {
         width: '100%',
         height: 40,
@@ -170,40 +156,53 @@ const styles = StyleSheet.create({
         fontWeight: 'bold',
         color: '#fff'
     },
-    boxLoginOther: {
+    colorGreen: {
+        color: '#008445',
+    },
+    boxLoginLineChia: {
         marginBottom: 20,
         flexDirection: 'row',
-        justifyContent: 'center',
-    },
-    boxLoginOtherText: {},
-    boxLoginSocial: {
-        flexDirection: 'row',
-        justifyContent: 'center',
         alignItems: 'center',
+        justifyContent: 'center'
     },
-    boxLoginSocialItem: {
-        width: 34,
-        height: 34,
-        flexDirection: 'row',
-        justifyContent: 'center',
-        alignItems: 'center',
-        borderRadius: 5,
+    boxLoginLine: {
+        width: 80,
+        height: 1,
+        backgroundColor: '#e1e1e1',
+    },
+    boxLoginLineChiaText: {
         marginHorizontal: 5,
-        backgroundColor: '#3b5998',
+        color: '#777',
+        fontWeight: '300',
     },
-    boxLoginSocialFace: {},
-    boxLoginSocialGoogle: {
-        backgroundColor: '#df4a32',
+    loginSocial: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
     },
-    boxLoginSocialZalo: {
-        backgroundColor: '#0f8edd',
+    loginSocialItem: {
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        backgroundColor: '#3B5998',
+        marginHorizontal: 8,
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
     },
-    boxLoginSocialIcon: {
-        fontSize: 16,
-        color: '#fff',
+    loginSocialItemIcon: {
+        fontSize: 18,
+        color: '#fff'
     },
-    boxLoginSocialImg: {
-        width: 16,
-        height: 16,
+    loginSocialItemImg: {
+        width: 22,
+        height: 24,
+    },
+    loginSocialItemFace: {},
+    loginSocialItemGoogle: {
+        backgroundColor: '#DF4A32',
+    },
+    loginSocialItemZalo: {
+        backgroundColor: '#0F8EDD'
     },
 });