upd: redesign

Deskripsi:
- login dan konfirmasi kode otp
- firebase code env

No Issues

components/auth/viewLogin.tsx

@@ -53,11 +53,10 @@ export default function ViewLogin({ onValidate }: Props) {
    return (
       <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 }}>
                <Image
-                  source={require("../../assets/images/logo.png")}
+                  source={theme === 'dark' ? require("../../assets/images/logo-dark.png") : require("../../assets/images/logo.png")}
                   style={[{ width: 300, height: 150 }]}
                   width={270}
                   height={110}
@@ -71,18 +70,28 @@ export default function ViewLogin({ onValidate }: Props) {
                }}
                type="numeric"
                placeholder="XXX-XXX-XXXX"
-               round
                itemLeft={<Text style={[Platform.OS === 'ios' && Styles.mt02]}>+62</Text>}
                info="Kami akan mengirim kode verifikasi melalui WhatsApp, guna mengonfirmasikan nomor Anda." />
-            <ButtonForm
-               text="MASUK"
-               onPress={() => { handleCheckPhone() }}
-               disabled={disableLogin}
-            />
+            <View style={[{ width: '50%', alignSelf: 'center' }]}>
+               <ButtonForm
+                  text="MASUK"
+                  onPress={() => { handleCheckPhone() }}
+                  disabled={disableLogin}
+               />
+            </View>
+            <View style={{ flex: 1 }} />
+            <View style={{ alignItems: 'center' }}>
+               <Image
+                  source={theme === 'dark' ? require("../../assets/images/cogniti-dark.png") : require("../../assets/images/cogniti-light.png")}
+                  style={{ width: 86, height: 27 }}
+                  resizeMode="contain"
+               />
+            </View>
          </View>
          {
             loadingLogin && <ModalLoading isVisible={true} setVisible={setLoadingLogin} />
          }
+         <ToastCustom position="bottom" />
       </SafeAreaView>
 
    )

components/auth/viewVerification.tsx

@@ -5,7 +5,7 @@ import { useTheme } from "@/providers/ThemeProvider";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import { StatusBar } from "expo-status-bar";
 import { useState } from "react";
-import { Image, Platform, View } from "react-native";
+import { Image, SafeAreaView, View } from "react-native";
 import { OtpInput } from "react-native-otp-entry";
 import Toast from 'react-native-toast-message';
 import { ButtonForm } from "../buttonForm";
@@ -58,13 +58,12 @@ export default function ViewVerification({ phone, otp }: Props) {
    }
 
    return (
-      <>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <StatusBar style={theme === 'dark' ? 'light' : 'dark'} translucent={false} backgroundColor={colors.background} />
-         <ToastCustom />
-         <View style={[Styles.wrapLogin, { backgroundColor: colors.background }]} >
+         <View style={[Styles.p20, Styles.h100]} >
             <View style={{ alignItems: "center", marginTop: 70, marginBottom: 50 }}>
                <Image
-                  source={require("../../assets/images/logo.png")}
+                  source={theme === 'dark' ? require("../../assets/images/logo-dark.png") : require("../../assets/images/logo.png")}
                   style={[{ width: 300, height: 150 }]}
                   width={270}
                   height={110}
@@ -90,14 +89,25 @@ export default function ViewVerification({ phone, otp }: Props) {
                   pinCodeTextStyle: { color: colors.text }
                }}
             />
-            <ButtonForm
-               text="SUBMIT"
-               onPress={() => { onCheckOtp() }}
-            />
-            <Text style={[Styles.textInformation, Styles.mt05, Styles.cDefault, { textAlign: 'center', color: colors.tint }]}>
-               Tidak Menerima kode verifikasi?  <Text onPress={() => { resendOtp() }}>Kirim Ulang</Text>
+            <View style={[{ width: '50%', alignSelf: 'center' }]}>
+               <ButtonForm
+                  text="SUBMIT"
+                  onPress={() => { onCheckOtp() }}
+               />
+            </View>
+            <Text style={[Styles.textInformation, Styles.mt05, { textAlign: 'center', color: colors.dimmed }]}>
+               Tidak Menerima kode verifikasi?  <Text onPress={() => { resendOtp() }} style={[{ color: colors.tint }]}>Kirim Ulang</Text>
             </Text>
+            <View style={{ flex: 1 }} />
+            <View style={[{ alignItems: 'center' }]}>
+               <Image
+                  source={theme === 'dark' ? require("../../assets/images/cogniti-dark.png") : require("../../assets/images/cogniti-light.png")}
+                  style={{ width: 86, height: 27 }}
+                  resizeMode="contain"
+               />
+            </View>
          </View>
-      </>
+         <ToastCustom position="bottom" />
+      </SafeAreaView>
    )
 }

components/buttonForm.tsx

@@ -1,5 +1,5 @@
-import { ColorsStatus } from "@/constants/ColorsStatus";
 import Styles from "@/constants/Styles";
+import { useTheme } from "@/providers/ThemeProvider";
 import { TouchableOpacity } from "react-native";
 import Text from './Text';
 
@@ -10,8 +10,9 @@ type Props = {
 };
 
 export function ButtonForm({ text, onPress, disabled }: Props) {
+   const { colors } = useTheme();
    return (
-      <TouchableOpacity style={[Styles.btnRound, { marginTop: 30,}, disabled && ColorsStatus.gray]} onPress={onPress} disabled={disabled}>
+      <TouchableOpacity style={[Styles.btnRound, Styles.round05, Styles.mt30, { backgroundColor: colors.primary }, disabled && { backgroundColor: colors.tabIconDefault }]} onPress={onPress} disabled={disabled}>
          <Text style={[Styles.textDefaultSemiBold, Styles.cWhite]}>{text}</Text>
       </TouchableOpacity>
    );

components/inputForm.tsx

@@ -74,7 +74,7 @@ export function InputForm({ label, value, placeholder, onChange, info, disable,
                />
             </View>
             {error && (<Text style={[Styles.textInformation, { color: colors.error }, Styles.mt05]}>{errorText}</Text>)}
-            {info != undefined && (<Text style={[Styles.textInformation, { color: colors.icon }, Styles.mt05]}>{info}</Text>)}
+            {info != undefined && (<Text style={[Styles.textInformation, { color: colors.dimmed }, Styles.mt05]}>{info}</Text>)}
          </View>
       )
    }

components/toastCustom.tsx

@@ -7,12 +7,19 @@ import Text from "./Text";
 export default function ToastCustom({ position }: { position?: 'top' | 'bottom' }) {
    const { colors } = useTheme()
    return (
-      <Toast autoHide onPress={() => Toast.hide()} visibilityTime={1500} position={position || 'bottom'} config={{
-         small: ({ text1 }) => (
-            <View style={[Styles.toastContainer, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
-               <Text style={{ fontSize: 12 }}>{text1}</Text>
-            </View>
-         )
-      }} />
+      <Toast
+         autoHide
+         onPress={() => Toast.hide()}
+         visibilityTime={1500}
+         position={position || 'bottom'}
+         bottomOffset={80}
+         config={{
+            small: ({ text1 }) => (
+               <View style={[Styles.toastContainer, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
+                  <Text style={{ fontSize: 12 }}>{text1}</Text>
+               </View>
+            )
+         }}
+      />
    )
 }