fix(profile): change layout view profile page

src/screens/Profile.js

@@ -1,70 +1,29 @@
-import React from 'react';
+import React, { useState } from 'react';
-import { Alert, View, ScrollView, StyleSheet, TouchableOpacity } from 'react-native';
+import { Alert, View, ScrollView, StyleSheet, TouchableOpacity, StatusBar } from 'react-native';
-import { Avatar, Text, useTheme, Appbar, Icon, Button, Card, List } from 'react-native-paper';
+import { Avatar, Text, Appbar, List, Button, Switch, Modal, TouchableRipple } from 'react-native-paper';
 import AntDesign from 'react-native-vector-icons/AntDesign';
 import Ionicons from 'react-native-vector-icons/Ionicons';
 import { clearAllState } from '../utils/Auth';
 import { strings } from '../utils/i18n';
 import person from '../assets/images/courier_man.png'
+import { colors } from '../utils/color';
 
 const ProfileScreen = ({ navigation }) => {
-    const theme = useTheme();
+    const [isSwitchOn, setIsSwitchOn] = React.useState(false);
-    const [expanded, setExpanded] = React.useState(true);
 
-    const handlePress = () => setExpanded(!expanded);
+    const onToggleSwitch = () => setIsSwitchOn(!isSwitchOn);
-    const SettingItem = ({ title, icon, onPress }) => {
+
-        return (
+    const [visible, setVisible] = useState(false);
-            <Box
-                maxWidth="$100"
-                borderColor="$borderLight200"
-                borderRadius="$lg"
-                // borderWidth="$1"
-                borderBottomWidth="$1"
-                // my="$1"
-                py="$5"
-                overflow="hidden"
-                sx={{
-                    "@base": {
-                        mx: "$5",
-                    },
-                    _dark: {
-                        bg: "$backgroundDark900",
-                        borderColor: "$borderDark800",
-                    },
-                }}
-            >
-                <TouchableOpacity onPress={onPress}>
-                    <HStack>
-                        <VStack w='20%' alignItems='center' alignSelf='center'>
-                            {icon ? icon : null}
-                        </VStack>
-                        <VStack w='80%'>
-                            <Text _dark={{ color: "$textLight200" }} fontSize="$md">{title ? title : null}</Text>
-                        </VStack>
-                    </HStack>
-                </TouchableOpacity>
-            </Box>
-        )
-    }
 
-    const handleLogout = () => {
+
-        Alert.alert(
+    const showModal = () => setVisible(true);
-            strings('profile.signout'),
+    const hideModal = () => setVisible(false);
-            strings('profile.signoutMessage'),
-            [
-                { text: strings('global.no') },
-                {
-                    text: strings('global.yes'), onPress: () => {
-                        clearAllState();
-                    }
-                }
-            ]
-        );
-    }
 
     return (
+        <>
             <View style={styles.container}>
-            <Appbar.Header mode='center-aligned' style={{ backgroundColor: 'white' }} >
+                <StatusBar backgroundColor={colors.pureWhite} barStyle='dark-content' translucent={true} />
+                <Appbar.Header mode='center-aligned' style={{ backgroundColor: colors.pureWhite }} >
                     <Appbar.BackAction onPress={() => { navigation.goBack() }} />
                     <Appbar.Content title="Profile" />
                 </Appbar.Header>
@@ -72,31 +31,79 @@ const ProfileScreen = ({ navigation }) => {
                 <View style={styles.header}>
                     <Avatar.Image size={80} style={styles.avatar} source={person} />
                     <View style={styles.textContainer}>
-                    <Text style={[styles.welcomeText, { color: '#1C1B40' }]}>
+                        <Text style={[styles.welcomeText, { color: colors.black }]}>
                             Farhan
                         </Text>
-                    <Text style={[styles.subWelcomeText, { color: '#1C1B40' }]}>
+                        <Text style={[styles.subWelcomeText, { color: colors.amethystSmoke }]}>
                             Land Encroachment Prevention Officer
                         </Text>
                     </View>
                 </View>
+                <ScrollView style={{ backgroundColor: colors.pureWhite }}>
                     <View style={styles.cardView}>
-                <Card style={styles.card}>
+                        <TouchableRipple rippleColor={colors.pureWhite} onPress={() => { navigation.navigate('DailyReportScreen') }}>
-                    <Card.Title title="Laporan Harian" titleVariant='labelLarge' titleStyle={{ fontWeight: 'bold' }} rightStyle={{ marginRight: 20 }} right={() => <Icon source="arrow-right-drop-circle-outline" size={24} />} left={() => <Icon size={25} source="file-cabinet" />} />
+                            <List.Item
-
+                                title="Laporan Harian"
-                </Card>
+                                left={() => <List.Icon icon="file-document" />}
-                <Card style={styles.card}>
+                                right={() => <List.Icon icon="chevron-right" />}
-                    <Card.Title title="Riwayat Kehadiran" titleVariant='labelLarge' titleStyle={{ fontWeight: 'bold' }} rightStyle={{ marginRight: 20 }} right={() => <Icon source="arrow-right-drop-circle-outline" size={24} />} left={() => <Icon size={25} source="history" />} />
+                            />
-
+                        </TouchableRipple>
-                </Card>
+                        <TouchableRipple rippleColor={colors.pureWhite} onPress={() => { navigation.navigate('PresenceScreen') }}>
-                <Card style={styles.card}>
+                            <List.Item
-                    <Card.Title title="Informasi Detail" titleVariant='labelLarge' titleStyle={{ fontWeight: 'bold' }} rightStyle={{ marginRight: 20 }} right={() => <Icon source="arrow-right-drop-circle-outline" size={24} />} left={() => <Icon size={25} source="card-account-details-outline" />} />
+                                title="Riwayat Kehadiran"
-                </Card>
+                                left={() => <List.Icon icon="history" />}
+                                right={() => <List.Icon icon="chevron-right" />}
+                            />
+                        </TouchableRipple>
+                        <TouchableRipple rippleColor={colors.pureWhite} onPress={() => { navigation.navigate('RegisterScreen') }}>
+                            <List.Item
+                                title="Registrasi"
+                                left={() => <List.Icon icon="account-cog" />}
+                                right={() => <List.Icon icon="chevron-right" />}
+                            />
+                        </TouchableRipple>
+                        <TouchableRipple rippleColor={colors.pureWhite} onPress={() => { navigation.navigate('RegisterScreen') }}>
+                            <List.Item
+                                title="Daftar Personel"
+                                left={() => <List.Icon icon="account" />}
+                                right={() => <List.Icon icon="chevron-right" />}
+                            />
+                        </TouchableRipple>
+                        <List.Item
+                            title="bahasa"
+                            left={() => <List.Icon icon="translate" />}
+                            right={() =>
+                                <View style={styles.switchContainer}>
+                                    <Text>{isSwitchOn ? "ID" : "EN"}</Text>
+                                    <Switch
+                                        trackColor={{ true: colors.blue, false: colors.blue }}
+                                        color={colors.pureWhite}
+                                        style={styles.switch}
+                                        onValueChange={onToggleSwitch}
+                                        value={isSwitchOn}
+                                    />
                                 </View>
-            <Button buttonColor='#EF6262' style={styles.button} contentStyle={{ flexDirection: 'row-reverse' }} icon="logout" mode="contained" onPress={() => console.log('Pressed')}>
+                            }
+                        />
+                    </View>
+                </ScrollView>
+                <Button buttonColor={colors.beanRed} style={styles.button} contentStyle={{ flexDirection: 'row-reverse' }} icon="logout" mode="contained" onPress={showModal}>
                     Keluar
                 </Button>
             </View >
+
+
+            <Modal visible={visible} onDismiss={hideModal} contentContainerStyle={styles.modal}>
+                <Text variant='titleLarge' >Konfirmasi</Text>
+                <Text variant='bodyMedium' >{strings('profile.signoutMessage')}</Text>
+                <Button buttonColor={colors.blue} style={{ borderRadius: 10, marginVertical: 20, paddingVertical: 5 }} contentStyle={{ flexDirection: 'row-reverse' }} mode="contained" onPress={clearAllState()}>
+                    {strings('global.yes')}
+                </Button>
+                <Button style={{ borderRadius: 10, paddingVertical: 5 }} contentStyle={{ flexDirection: 'row-reverse' }} textColor={colors.mistBlue} mode="outlined" onPress={hideModal}>
+                    {strings('global.no')}
+                </Button>
+            </Modal>
+        </>
     )
 }
 
@@ -104,13 +111,14 @@ const styles = StyleSheet.create({
     container: {
         flex: 1,
         marginTop: 20,
+        backgroundColor: colors.pureWhite
     },
     header: {
         flexDirection: 'row',
         alignItems: 'center',
         paddingHorizontal: 10,
         paddingVertical: 20,
-        backgroundColor: 'white'
+        backgroundColor: colors.pureWhite
     },
     avatar: {
         marginRight: 10,
@@ -128,16 +136,34 @@ const styles = StyleSheet.create({
     },
     cardView: {
         marginTop: 10,
+        marginVertical: 20,
+        marginHorizontal: 10,
     },
     card: {
         marginTop: 10,
         marginHorizontal: 10,
         marginVertical: 2,
-        backgroundColor: 'white'
+        backgroundColor: colors.pureWhite
     },
     button: {
-        marginTop: 20,
         margin: 10,
+        borderRadius: 10,
+        color: colors.beanRed
+    },
+    modal: {
+        marginVertical: 20,
+        padding: 20,
+        marginHorizontal: 20,
+        borderRadius: 10,
+        backgroundColor: colors.pureWhite
+    },
+    switchContainer: {
+        flexDirection: "row",
+        justifyContent: "center",
+        alignItems: "center"
+    },
+    switch: {
+        marginLeft: 10
     }
 
 })