2110512052/M-Paspor-Redesign
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Eazy Passport screen and add passport application flow until step 5 'Verifikasi'

Browse Source
This commit is contained in:
Mochammad Adhi Buchori
2025-04-23 16:44:30 +07:00
parent 62412cedc9
commit 5f513257d6
12 changed files with 2006 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/StepIndicator.tsx
View File

@ -24,7 +24,7 @@ const StepIndicator = ({currentStep, totalSteps, completedSteps}: any) => {
const textStyle = isCompleted
? FontFamily.notoSansBold
: isCurrent
? FontFamily.notoSansRegular
? FontFamily.notoSansSemiBold
: FontFamily.notoSansRegular;
return (

22
src/components/TextInput.tsx
View File

@ -87,7 +87,7 @@ const TextInputComponent: React.FC<TextInputComponentProps> = ({
</View>
)}
<Dropdown
style={styles.dropdown}
style={[styles.dropdown, isDisabled && styles.outlineColorDisabled]}
placeholderStyle={styles.placeholderDropdownStyle}
selectedTextStyle={styles.selectedTextStyle}
iconStyle={styles.iconStyle}
@ -100,6 +100,7 @@ const TextInputComponent: React.FC<TextInputComponentProps> = ({
onChange={item => {
setGenderValue(item.value);
}}
disable={isDisabled}
renderRightIcon={() => <Icon name="arrow-drop-down" size={20} />}
renderItem={renderDropdownItem}
/>
@ -114,18 +115,19 @@ const TextInputComponent: React.FC<TextInputComponentProps> = ({
{title && <Text style={styles.title}>{title}</Text>}
{isRequired && <Text style={styles.required}>*</Text>}
</View>
<Pressable onPress={() => setShowPicker(true)}>
<Pressable onPress={() => !isDisabled && setShowPicker(true)}>
<TextInput
mode="outlined"
placeholder={placeholder}
style={inputStyle}
style={[inputStyle, isDisabled && styles.outlineColorDisabled]}
theme={{roundness: 12}}
placeholderTextColor={Colors.primary60.color}
editable={false}
value={formattedDate}
right={<TextInput.Icon icon="calendar" color='#48454E' />}
right={<TextInput.Icon icon="calendar" color="#48454E" />}
multiline={false}
textColor='#48454E'
textColor="#48454E"
disabled={isDisabled}
/>
</Pressable>
{showPicker && (
@ -151,7 +153,7 @@ const TextInputComponent: React.FC<TextInputComponentProps> = ({
<TextInput
mode="outlined"
placeholder={placeholder}
style={inputStyle}
style={[inputStyle, isDisabled && styles.outlineColorDisabled]}
theme={{roundness: 12}}
placeholderTextColor={Colors.primary60.color}
activeOutlineColor={Colors.primary10.color}
@ -167,7 +169,7 @@ const TextInputComponent: React.FC<TextInputComponentProps> = ({
) : null
}
multiline={isMultiline}
textColor='#48454E'
textColor="#48454E"
/>
{supportText && <Text style={[styles.supportText]}>{supportText}</Text>}
</View>
@ -243,6 +245,12 @@ const styles = StyleSheet.create({
includeFontPadding: false,
color: Colors.neutral70.color,
},
outlineColorDisabled: {
backgroundColor: '#F8F9FE',
borderWidth: 1,
borderRadius: 12,
borderColor: '#e3e3e5',
},
});
export default TextInputComponent;

79
src/components/dialog/DialogApplicationPassport.tsx Normal file
View File

@ -0,0 +1,79 @@
import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {Portal, Dialog, Button} from 'react-native-paper';
import Colors from '../../../assets/styles/Colors';
import FontFamily from '../../../assets/styles/FontFamily';
type Props = {
visible: boolean;
onClose: () => void;
onContinue: () => void;
};
const DialogApplicationPassport = (props: Props) => {
const {visible, onClose, onContinue} = props;
return (
<Portal>
<Dialog visible={visible} style={styles.dialogContainer}>
<Dialog.Title style={styles.dialogTitle}>Pemberitahuan</Dialog.Title>
<View style={styles.dialogContentContainer}>
<Text style={styles.dialogDesc}>
Permohonan paspor anak diwajibkan untuk didampingi oleh orang
tua/wali yang sah pada saat datang ke Kantor Imigrasi untuk
pelaksanaan wawancara dan pengambilan foto sidik jari.
</Text>
<View>
<Button
style={styles.buttonAgree}
mode="contained"
textColor={Colors.neutral100.color}
onPress={onContinue}>
Lanjut
</Button>
<Button
style={styles.buttonDontAgree}
mode="outlined"
textColor={Colors.primary30.color}
onPress={onClose}>
Kembali
</Button>
</View>
</View>
</Dialog>
</Portal>
);
};
const styles = StyleSheet.create({
dialogContainer: {
backgroundColor: 'white',
elevation: 0,
shadowColor: 'transparent',
borderRadius: 20,
},
dialogTitle: {
fontSize: 22,
color: Colors.secondary30.color,
},
dialogContentContainer: {
marginHorizontal: 24,
marginBottom: 24,
gap: 16,
},
dialogDesc: {
fontSize: 14,
...FontFamily.notoSansRegular,
includeFontPadding: false,
color: Colors.primary30.color,
},
buttonAgree: {
backgroundColor: Colors.primary30.color,
marginTop: 12,
},
buttonDontAgree: {
borderColor: Colors.primary30.color,
marginTop: 12,
},
});
export default DialogApplicationPassport;

84
src/components/dialog/DialogDontHaveYetPassport.tsx Normal file
View File

@ -0,0 +1,84 @@
import {StyleSheet, Text, View} from 'react-native';
import {Dialog, Portal, Button} from 'react-native-paper';
import Colors from '../../../assets/styles/Colors';
import FontFamily from '../../../assets/styles/FontFamily';
type Props = {
visible: boolean;
onClose: () => void;
onContinue: () => void;
};
const DialogDontHaveYetPassport = (props: Props) => {
const {visible, onClose, onContinue} = props;
return (
<Portal>
<Dialog visible={visible} style={styles.dialogContainer}>
<Dialog.Title style={styles.dialogTitle}>Peringatan</Dialog.Title>
<View style={styles.dialogContentContainer}>
<Text style={styles.dialogDesc}>
Apabila Anda sudah memiliki paspor atau sudah pernah mengajukan
permohonan paspor pada Kantor Imigrasi namun Anda memilih permohonan
paspor baru, maka data anda akan{' '}
<Text style={styles.dialogDescRed}>tertolak</Text> oleh sistem dan{' '}
<Text style={styles.dialogDescRed}>
pembayaran yang telah masuk kas negara tidak dapat dikembalikan.
</Text>
</Text>
<Text style={styles.dialogDesc}>
Silakan menghubungi hotline atau datang langsung ke Kantor Imigrasi
terdekat untuk informasi dan arahan lebih lanjut.
</Text>
<View>
<Button
style={styles.buttonContinue}
mode="contained"
textColor={Colors.neutral100.color}
onPress={() => {
onClose();
onContinue();
}}>
Lanjut
</Button>
</View>
</View>
</Dialog>
</Portal>
);
};
const styles = StyleSheet.create({
dialogContainer: {
backgroundColor: 'white',
elevation: 0,
shadowColor: 'transparent',
borderRadius: 20,
},
dialogTitle: {
fontSize: 22,
color: Colors.secondary30.color,
},
dialogContentContainer: {
marginHorizontal: 24,
marginBottom: 24,
gap: 16,
},
dialogDesc: {
fontSize: 14,
...FontFamily.notoSansRegular,
includeFontPadding: false,
color: Colors.primary30.color,
},
dialogDescRed: {
...FontFamily.notoSansBold,
color: Colors.indicatorRed.color,
includeFontPadding: false,
},
buttonContinue: {
backgroundColor: Colors.primary30.color,
marginTop: 12,
},
});
export default DialogDontHaveYetPassport;

125
src/components/dialog/DialogLostOrDamagedPassport.tsx Normal file
View File

@ -0,0 +1,125 @@
import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {Portal, Dialog, Button} from 'react-native-paper';
import Colors from '../../../assets/styles/Colors';
import FontFamily from '../../../assets/styles/FontFamily';
type Props = {
visible: boolean;
onBackToHome: () => void;
onBackToFirstStep: () => void;
};
const DialogLostOrDamagedPassport = (props: Props) => {
const {visible, onBackToHome, onBackToFirstStep} = props;
return (
<Portal>
<Dialog visible={visible} style={styles.dialogContainer}>
<Dialog.Title style={styles.dialogTitle}>Pemberitahuan</Dialog.Title>
<View style={styles.dialogContentContainer}>
<Text style={styles.dialogDesc}>
Silakan langsung datang ke Kantor Imigrasi terdekat untuk melakukan
permohonan penggantian paspor hilang atau rusak dengan membawa
dokumen sebagai berikut:
</Text>
<View>
<Text style={[styles.dialogDesc, {...FontFamily.notoSansBold}]}>
1. Untuk Paspor Hilang
</Text>
<View style={styles.dialogBulletPointWrapper}>
<Text style={styles.dialogDesc}>• e-КТР</Text>
<Text style={styles.dialogDesc}>• Kartu Keluarga</Text>
<View style={styles.dialogLongBulletPointWrapper}>
<Text>•</Text>
<Text style={styles.dialogDesc}>
Akta kelahiran/ijazah/akta perkawinan/buku nikah/surat baptis
</Text>
</View>
<Text style={styles.dialogDesc}>
• Surat kehilangan dari Kepolisian
</Text>
</View>
</View>
<View>
<Text style={[styles.dialogDesc, {...FontFamily.notoSansBold}]}>
2. Untuk Paspor Rusak
</Text>
<View style={styles.dialogBulletPointWrapper}>
<Text style={styles.dialogDesc}>• e-КТР</Text>
<Text style={styles.dialogDesc}>• Kartu Keluarga</Text>
<View style={styles.dialogLongBulletPointWrapper}>
<Text>•</Text>
<Text style={styles.dialogDesc}>
Akta kelahiran/ijazah/akta perkawinan/buku nikah/surat baptis
</Text>
</View>
<Text style={styles.dialogDesc}>• Paspor lama</Text>
</View>
</View>
<Text style={[styles.dialogDesc, {...FontFamily.notoSansBold}]}>
Harap membawa semua dokumen asli dan fotokopi dalam kertas A4.
</Text>
<View>
<Button
style={styles.buttonContained}
mode="contained"
textColor={Colors.neutral100.color}
onPress={onBackToHome}>
Kembali ke Beranda
</Button>
<Button
style={styles.buttonOutlined}
mode="outlined"
textColor={Colors.primary30.color}
onPress={onBackToFirstStep}>
Kembali ke Tahap Awal
</Button>
</View>
</View>
</Dialog>
</Portal>
);
};
const styles = StyleSheet.create({
dialogContainer: {
backgroundColor: 'white',
elevation: 0,
shadowColor: 'transparent',
borderRadius: 20,
},
dialogTitle: {
fontSize: 22,
color: Colors.secondary30.color,
},
dialogContentContainer: {
marginHorizontal: 24,
marginBottom: 24,
gap: 16,
},
dialogDesc: {
fontSize: 14,
...FontFamily.notoSansRegular,
includeFontPadding: false,
color: Colors.primary30.color,
},
dialogBulletPointWrapper: {
marginStart: 8,
gap: 6,
marginTop: 8,
},
dialogLongBulletPointWrapper: {
flexDirection: 'row',
gap: 6,
},
buttonContained: {
backgroundColor: Colors.primary30.color,
marginTop: 12,
},
buttonOutlined: {
borderColor: Colors.primary30.color,
marginTop: 12,
},
});
export default DialogLostOrDamagedPassport;

91
src/components/dialog/DialogPassportInfo.tsx Normal file
View File

@ -0,0 +1,91 @@
import {StyleSheet, Text, View} from 'react-native';
import {Dialog, Portal, Button} from 'react-native-paper';
import Colors from '../../../assets/styles/Colors';
import FontFamily from '../../../assets/styles/FontFamily';
type Props = {
visible: boolean;
onClose: () => void;
};
const DialogPassportInfo = (props: Props) => {
const {visible, onClose} = props;
return (
<Portal>
<Dialog visible={visible} style={styles.dialogContainer}>
<View style={styles.dialogContentContainer}>
<Text style={styles.dialogDesc}>
Keterangan di dalamnya menjadi tidak jelas atau memberi kesan yang
tidak pantas lagi sebagai dokumen resmi (pasal 36 ayat (1) huruf
(d.2) Permenkumham RI no 8 tahun 2014 ttg Paspor Biasa dan SPLP)
</Text>
<Text style={styles.dialogDesc}>Informasi Keadaan Paspor:</Text>
<Text style={[styles.dialogDesc, {...FontFamily.notoSansBold}]}>
1. Keadaan Baik
</Text>
<Text style={styles.dialogDesc}>
Paspor masih dalam keadaan baik atau sangat baik, tanpa ada
kerusakan apapun.
</Text>
<Text style={[styles.dialogDesc, {...FontFamily.notoSansBold}]}>
2. Keadaan Rusak
</Text>
<Text style={styles.dialogDesc}>
Paspor ada kerusakan (contoh: tersobek, terbakar, dll) dan bagian
data diri tidak dapat terbaca.
</Text>
<Text style={[styles.dialogDesc, {...FontFamily.notoSansBold}]}>
3. Hilang
</Text>
<Text style={styles.dialogDesc}>
Paspor hilang dan tidak dapat ditemukan karena suatu keadaan
(tertinggal, dicuri, dan lain-lain).
</Text>
<View>
<Button
style={styles.buttonContinue}
mode="contained"
textColor={Colors.neutral100.color}
onPress={() => {
onClose();
}}>
Lanjut
</Button>
</View>
</View>
</Dialog>
</Portal>
);
};
const styles = StyleSheet.create({
dialogContainer: {
backgroundColor: 'white',
elevation: 0,
shadowColor: 'transparent',
borderRadius: 20,
},
dialogContentContainer: {
marginHorizontal: 24,
marginBottom: 24,
gap: 16,
},
dialogDesc: {
fontSize: 14,
...FontFamily.notoSansRegular,
includeFontPadding: false,
color: Colors.primary30.color,
},
dialogDescRed: {
...FontFamily.notoSansBold,
color: Colors.indicatorRed.color,
includeFontPadding: false,
},
buttonContinue: {
backgroundColor: Colors.primary30.color,
marginTop: 12,
},
});
export default DialogPassportInfo;

14
src/data/DropdownData/DestinationCountryData.tsx Normal file
View File

@ -0,0 +1,14 @@
const destinationCountryData = [
{label: 'Japan', value: '1'},
{label: 'South Korea', value: '2'},
{label: 'Thailand', value: '3'},
{label: 'Singapore', value: '4'},
{label: 'Australia', value: '5'},
{label: 'United States', value: '6'},
{label: 'United Kingdom', value: '7'},
{label: 'France', value: '8'},
{label: 'Germany', value: '9'},
{label: 'Canada', value: '10'},
];
export default destinationCountryData;

13
src/data/DropdownData/FamilyRelationshipData.tsx Normal file
View File

@ -0,0 +1,13 @@
const familyRelationshipData = [
{label: 'Suami/Istri', value: '1'},
{label: 'Ayah', value: '2'},
{label: 'Ibu', value: '3'},
{label: 'Kakak/Adik', value: '4'},
{label: 'Anak', value: '5'},
{label: 'Tante', value: '6'},
{label: 'Paman', value: '7'},
{label: 'Saudara', value: '8'},
{label: 'Keluarga/Kerabat Lainnya', value: '9'},
];
export default familyRelationshipData;

115
src/screens/eazyPassport/index.tsx
View File

@ -1,12 +1,119 @@
import React from 'react';
import {Text, View} from 'react-native';
import {ScrollView, StatusBar, Text, View} from 'react-native';
import styles from './styles';
import {RootStackParamList} from '../../navigation/type';
import {NativeStackNavigationProp} from '@react-navigation/native-stack';
import {useNavigation} from '@react-navigation/native';
import Colors from '../../../assets/styles/Colors';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
type EazyPassportScreenNavigationProp = NativeStackNavigationProp<
RootStackParamList,
'EazyPassport'
>;
function EazyPassportScreen() {
const navigation = useNavigation<EazyPassportScreenNavigationProp>();
return (
<View style={styles.container}>
<Text>Eazy Passport Screen</Text>
</View>
<ScrollView>
<View style={styles.container}>
<StatusBar
backgroundColor={Colors.secondary30.color}
barStyle="light-content"
/>
<View style={styles.appBarContainer}>
<Icon
name="arrow-left"
size={24}
style={styles.appBarIcon}
color={Colors.neutral100.color}
onPress={() => navigation.goBack()}
/>
<Text style={styles.appBarTitle}>Eazy Passport</Text>
</View>
<View style={styles.textContainer}>
<Text style={styles.textDesc}>
Layanan Eazy Passport yaitu pelayanan paspor yang dilaksanakan di
luar kantor dan menuju lokasi pemohon dengan menggunakan mobil
layanan paspor keliling dan/atau mobile unit Surat Perjalanan
Republik Indonesia (SPRI).
</Text>
<Text style={styles.textDesc}>
Ketentuan dan prosedur pemberian layanan paspor dalam pelaksanaan
Layanan Eazy Passport adalah sebagai berikut:
</Text>
<View style={{gap: 4}}>
<View style={{flexDirection: 'row', gap: 6}}>
<Text style={styles.textDesc}>1.</Text>
<Text style={[styles.textDesc, {flex: 1}]}>
Layanan Eazy Passport melayani minimal 50 (lima puluh)
permohonan per hari;
</Text>
</View>
<View style={{flexDirection: 'row', gap: 6}}>
<Text style={styles.textDesc}>2.</Text>
<Text style={[styles.textDesc, {flex: 1}]}>
Keluarga dari para pegawai di lingkungan Perkantoran Pemerintah/
TNI /POLRI / BUMN/BUMD/Swasta dan institusi pendidikan dapat
diberikan pelayanan paspor dalam pelaksanaan Layanan Eazy
Passport;
</Text>
</View>
<View style={{flexDirection: 'row', gap: 6}}>
<Text style={styles.textDesc}>3.</Text>
<Text style={[styles.textDesc, {flex: 1}]}>
Layanan Eazy Passport hanya melayani pembuatan paspor baru dan
penggantian paspor karena habis masa berlaku dan halaman penuh,
tidak melayani penggantian paspor karena hilang atau rusak;
</Text>
</View>
<View style={{flexDirection: 'row', gap: 6}}>
<Text style={styles.textDesc}>4.</Text>
<Text style={[styles.textDesc, {flex: 1}]}>
Jadwal layanan ditentukan oleh Kantor Imigrasi setempat dan
dilayani di hari kerja (pukul 08.00 s/d 16.00 waktu setempat)
atau di luar jam/hari kerja;
</Text>
</View>
<View style={{flexDirection: 'row', gap: 6}}>
<Text style={styles.textDesc}>5.</Text>
<Text style={[styles.textDesc, {flex: 1}]}>
Pelaksanaan input data dan pengambilan biometrik dilakukan
dengan mobile unit SPRI baik secara online atau offline;
</Text>
</View>
<View style={{flexDirection: 'row', gap: 6}}>
<Text style={styles.textDesc}>6.</Text>
<Text style={[styles.textDesc, {flex: 1}]}>
Proses penyelesaian paspor 4 (empat) hari kerja setelah pemohon
melakukan pembayaran PNBP sesuai dengan jenis paspor yang
dipilih;
</Text>
</View>
<View style={{flexDirection: 'row', gap: 6}}>
<Text style={styles.textDesc}>7.</Text>
<Text style={[styles.textDesc, {flex: 1}]}>
Pemohon Layanan Eazy Passport dapat diberikan layanan percepatan
paspor selesai pada hari yang sama dengan syarat pembayaran PNBP
dilakukan sebelum pukul 13.00 waktu setempat;
</Text>
</View>
<View style={{flexDirection: 'row', gap: 6}}>
<Text style={styles.textDesc}>8.</Text>
<Text style={[styles.textDesc, {flex: 1}]}>
Pengambilan paspor yang sudah dicetak pada Kantor Imigrasi dapat
diambil langsung oleh pemohon paspor, diambil oleh perwakilan
instansi/kantor/komunitas sebagaimana tersebut pada angka 1
dengan melampirkan surat kuasa/ surat perintah dari
pimpinan/para pemohon atau dikirim melalui jasa PT. Pos
Indonesia.
</Text>
</View>
</View>
</View>
</View>
</ScrollView>
);
}

30
src/screens/eazyPassport/styles.tsx
View File

@ -1,12 +1,36 @@
import {StyleSheet} from 'react-native';
import FontFamily from '../../../assets/styles/FontFamily';
import Colors from '../../../assets/styles/Colors';
const styles = StyleSheet.create({
container: {
flex: 1,
alignContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
justifyContent: 'center',
},
textContainer: {
gap: 8,
margin: 16
},
textDesc: {
...FontFamily.notoSansRegular,
fontSize: 12,
includeFontPadding: false,
textAlign: 'justify',
},
appBarTitle: {
color: Colors.neutral100.color,
...FontFamily.notoSansRegular,
fontSize: 22,
marginStart: 16,
},
appBarIcon: {
marginLeft: 16,
},
appBarContainer: {
height: 64,
flexDirection: 'row',
alignItems: 'center',
backgroundColor: Colors.secondary30.color,
},
});

1460
src/screens/regularPassport/index.tsx
View File

File diff suppressed because it is too large Load Diff

114
src/screens/regularPassport/styles.tsx
View File

@ -45,6 +45,12 @@ const styles = StyleSheet.create({
color: Colors.primary30.color,
includeFontPadding: false,
},
questionnaireDataSecondary: {
...FontFamily.notoSansBold,
fontSize: 12,
color: Colors.secondary30.color,
includeFontPadding: false,
},
dialogContainer: {
backgroundColor: 'white',
elevation: 0,
@ -90,7 +96,9 @@ const styles = StyleSheet.create({
backgroundColor: Colors.neutral100.color,
padding: 16,
},
nationalIdImage: {
documentImage: {
alignItems: 'center',
justifyContent: 'center',
marginVertical: 16,
height: 350,
backgroundColor: Colors.primary70.color,
@ -99,10 +107,10 @@ const styles = StyleSheet.create({
subStepButtonContainer: {
gap: 16,
},
subStepButtonActive: {
subStepButtonContained: {
backgroundColor: Colors.primary30.color,
},
subStepButtonInActive: {
subStepButtonOutlined: {
borderColor: Colors.primary30.color,
},
subStepTextWrapper: {
@ -121,15 +129,15 @@ const styles = StyleSheet.create({
...FontFamily.notoSansRegular,
lineHeight: 20,
},
nationalIdImageContainer: {
documentImageContainer: {
alignItems: 'center',
},
nationalIdImageCropped: {
documentImageCropped: {
marginBottom: 16,
width: 225,
height: 140,
backgroundColor: Colors.primary70.color,
borderRadius: 20,
borderRadius: 8,
},
subStepTextInputContainer: {
gap: 16,
@ -159,6 +167,100 @@ const styles = StyleSheet.create({
padding: 16,
marginVertical: 16,
gap: 16,
backgroundColor: Colors.neutral100.color,
},
documentImageSupportText: {
...FontFamily.notoSansRegular,
color: Colors.neutral100.color,
includeFontPadding: false,
fontSize: 14,
marginBottom: 10,
},
textInputBulletTextWrapper: {
flexDirection: 'row',
gap: 6,
},
textInputSupportText: {
fontSize: 10,
...FontFamily.notoSansRegular,
color: '#8F9098',
},
sectionButtonWrapper: {
flexDirection: 'row',
gap: 16,
},
buttonContainedSecondary: {
flex: 1,
backgroundColor: Colors.secondary30.color,
},
subStepSectionButtonContainer: {
marginBottom: 24,
gap: 16,
},
subStepSectionButtonTextTitle: {
marginBottom: 8,
fontSize: 12,
includeFontPadding: false,
...FontFamily.notoSansBold,
color: Colors.primary30.color,
flex: 1,
},
subStepSectionButtonTextWrapper: {
flexDirection: 'row',
},
subStepCheckWrapper: {
flexDirection: 'row',
alignItems: 'center',
gap: 8,
},
applicantDetailContentContainer: {
borderRadius: 16,
backgroundColor: Colors.neutral100.color,
borderWidth: 1,
borderColor: Colors.primary70.color,
marginVertical: 12,
padding: 16,
gap: 8,
},
applicantDetailTextContentWrapper: {
flexDirection: 'row',
justifyContent: 'space-between',
gap: 8,
},
applicantDetailTopContentWrapper: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
applicantDetailIconContentWrapper: {
flexDirection: 'row',
gap: 16,
},
applicantDetailTextTitle: {
fontSize: 12,
...FontFamily.notoSansRegular,
includeFontPadding: false,
color: Colors.primary30.color,
flex: 1,
},
applicantDetailTextDesc: {
fontSize: 12,
...FontFamily.notoSansBold,
includeFontPadding: false,
color: Colors.primary30.color,
flex: 1.2,
},
applicantDetailContentChildContainer: {
padding: 16,
borderWidth: 1,
marginVertical: 8,
borderColor: Colors.primary70.color,
borderRadius: 8,
gap: 12,
},
applicantDetailBottomContentWrapper: {
flexDirection: 'row',
justifyContent: 'space-between',
},
});