Update welcome-image, TnC icon, navbar menu title, app bar title, and add button in passport appoinment card with green indicator

src/components/PassportAppointmentCard.tsx

@@ -1,12 +1,14 @@
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import WaitingForPaymentIcon from '../../assets/icons/waiting_for_payment.svg';
-import {StyleSheet, Text, View} from 'react-native';
+import {Pressable, StyleSheet, Text, View} from 'react-native';
 import FontFamily from '../../assets/styles/FontFamily';
 import Colors from '../../assets/styles/Colors';
 import AsyncStorage from '@react-native-async-storage/async-storage';
+import { useNavigation } from '@react-navigation/native';
 
 
 type PassportAppointmentCardProps = {
+  navigate(arg0: string): void;
   applicantName: string | undefined;
   applicantCode: string | undefined;
   appointmentDate: string | undefined;
@@ -18,6 +20,7 @@ type PassportAppointmentCardProps = {
 const renderStatusContent = (status: string | undefined) => {
   let backgroundColor;
   let IconComponent;
+  const navigation = useNavigation<PassportAppointmentCardProps>();
 
   switch (status) {
     case 'Permohonan Kadaluarsa':
@@ -41,9 +44,10 @@ const renderStatusContent = (status: string | undefined) => {
   return (
     <>
       {status === 'Sudah Terbayar' && (
-        <View style={styles.seeRequirementsWrapper}>
+        <Pressable style={styles.seeRequirementsWrapper}
+        onPress={() => navigation.navigate('SeeRequirements')}>
           <Text style={styles.appointmentStatusText}>Lihat Persyaratan</Text>
-        </View>
+        </Pressable>
       )}
       <View style={[styles.appointmentStatusWrapper, {backgroundColor}]}>
         <IconComponent />

src/screens/home/index.tsx

@@ -300,7 +300,7 @@ function HomeScreen(props: HomeScreenProps) {
     <View style={styles.container}>
       <View style={styles.appBarContainer}>
         <Text style={styles.appBarTitle} numberOfLines={1} ellipsizeMode="tail">
-          Halo, Salwa Aisyah Adhani!
+          Halo, Salwa!
         </Text>
         <Icon
           name="bell-outline"

src/screens/login/index.tsx

@@ -10,13 +10,14 @@ import {
 import styles from './styles';
 import {Button} from 'react-native-paper';
 import TextInputComponent from '../../components/TextInput';
-import Icon from 'react-native-vector-icons/MaterialIcons';
 import {useNavigation} from '@react-navigation/native';
 import {NativeStackNavigationProp} from '@react-navigation/native-stack';
 import {PassportAppointment, RootStackParamList} from '../../navigation/type';
 import Colors from '../../../assets/styles/Colors';
 import {getData, storeData} from '../../helper/asyncStorageHelper';
 import passportAppointmentData from '../../data/History/PassportAppointmentData';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import MDIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 
 type LoginScreenNavigationProp = NativeStackNavigationProp<
   RootStackParamList,
@@ -24,7 +25,7 @@ type LoginScreenNavigationProp = NativeStackNavigationProp<
 >;
 
 function LoginScreen() {
-  const welcomeImage = require('../../../assets/images/welcomeImage.png');
+  const welcomeImage = require('../../../assets/images/welcome-image.jpg');
   const navigation = useNavigation<LoginScreenNavigationProp>();
 
   return (
@@ -75,11 +76,11 @@ function LoginScreen() {
         onPress={() => navigation.navigate('TermsAndConditions')}
         style={({pressed}) => [{transform: [{scale: pressed ? 0.975 : 1}]}]}>
         <View style={styles.termsAndConditionsContainer}>
-          <Icon
-            name="person"
+          <MDIcons
+            name="information-outline"
             size={20}
-            color="#000"
-            style={styles.personIcon}
+            color="#237D96"
+            style={styles.informationIcon}
           />
           <View style={styles.termsAndConditionsTextContainer}>
             <Text style={styles.termsAndConditionsTitle}>

src/screens/login/styles.tsx

@@ -84,7 +84,7 @@ const styles = StyleSheet.create({
   arrowRightIcon: {
     marginRight: 20,
   },
-  personIcon: {
+  informationIcon: {
     marginLeft: 20,
   },
 });

src/screens/navigationRoute/index.tsx

@@ -29,18 +29,18 @@ function NavigationRouteScreen() {
   const [routes] = useState([
     {
       key: 'home',
-      title: 'Home',
+      title: 'Beranda',
       focusedIcon: 'home',
       unfocusedIcon: 'home-outline',
     },
     {
       key: 'history',
-      title: 'History',
+      title: 'Riwayat',
       focusedIcon: 'history',
     },
     {
       key: 'profile',
-      title: 'Profile',
+      title: 'Profil',
       focusedIcon: 'account-circle',
       unfocusedIcon: 'account-circle-outline',
     },