upd: redesign

Deskripsi:
- fitur ganti mode tema
- penerapan tema pada semua fitur

NO Issues

components/auth/viewLogin.tsx

@@ -1,6 +1,7 @@
 import Styles from "@/constants/Styles"
 import { apiCheckPhoneLogin, apiSendOtp } from "@/lib/api"
 import { useAuthSession } from "@/providers/AuthProvider"
+import { useTheme } from "@/providers/ThemeProvider"
 import AsyncStorage from "@react-native-async-storage/async-storage"
 import { StatusBar } from "expo-status-bar"
 import { useState } from "react"
@@ -21,6 +22,7 @@ export default function ViewLogin({ onValidate }: Props) {
    const [disableLogin, setDisableLogin] = useState(true)
    const [phone, setPhone] = useState('')
    const { signIn, encryptToken } = useAuthSession();
+   const { colors, theme } = useTheme();
 
    const handleCheckPhone = async () => {
       try {
@@ -49,8 +51,8 @@ export default function ViewLogin({ onValidate }: Props) {
    };
 
    return (
-      <SafeAreaView>
-         <StatusBar style={Platform.OS === 'ios' ? 'dark' : 'light'} translucent={false} backgroundColor="black" />
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+         <StatusBar style={theme === 'dark' ? 'light' : 'dark'} translucent={false} backgroundColor={colors.background} />
          <ToastCustom />
          <View style={[Styles.p20, Styles.h100]}>
             <View style={{ alignItems: "center", marginTop: 70, marginBottom: 50 }}>

components/auth/viewVerification.tsx

@@ -1,6 +1,7 @@
 import Styles from "@/constants/Styles";
 import { apiSendOtp } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import { StatusBar } from "expo-status-bar";
 import { useState } from "react";
@@ -20,6 +21,7 @@ export default function ViewVerification({ phone, otp }: Props) {
    const [value, setValue] = useState('');
    const [otpFix, setOtpFix] = useState(otp)
    const { signIn, encryptToken } = useAuthSession();
+   const { colors, theme } = useTheme();
 
    const login = async () => {
       const valueUser = await AsyncStorage.getItem('user');
@@ -57,9 +59,9 @@ export default function ViewVerification({ phone, otp }: Props) {
 
    return (
       <>
-         <StatusBar style={Platform.OS === 'ios' ? 'dark' : 'light'} translucent={false} backgroundColor="black" />
+         <StatusBar style={theme === 'dark' ? 'light' : 'dark'} translucent={false} backgroundColor={colors.background} />
          <ToastCustom />
-         <View style={Styles.wrapLogin} >
+         <View style={[Styles.wrapLogin, { backgroundColor: colors.background }]} >
             <View style={{ alignItems: "center", marginTop: 70, marginBottom: 50 }}>
                <Image
                   source={require("../../assets/images/logo.png")}
@@ -77,22 +79,22 @@ export default function ViewVerification({ phone, otp }: Props) {
             <OtpInput
                numberOfDigits={4}
                onTextChange={(text) => setValue(text)}
-               focusColor={'#19345E'}
+               focusColor={colors.tint}
                type="numeric"
                theme={{
                   containerStyle: {
                      width: '80%',
                      alignSelf: 'center'
                   },
-                  pinCodeContainerStyle: Styles.verificationCell,
-                  pinCodeTextStyle: { color: 'black' }
+                  pinCodeContainerStyle: { ...Styles.verificationCell, borderColor: colors.icon },
+                  pinCodeTextStyle: { color: colors.text }
                }}
             />
             <ButtonForm
                text="SUBMIT"
                onPress={() => { onCheckOtp() }}
             />
-            <Text style={[Styles.textInformation, Styles.mt05, Styles.cDefault, { textAlign: 'center' }]}>
+            <Text style={[Styles.textInformation, Styles.mt05, Styles.cDefault, { textAlign: 'center', color: colors.tint }]}>
                Tidak Menerima kode verifikasi?  <Text onPress={() => { resendOtp() }}>Kirim Ulang</Text>
             </Text>
          </View>