Fix Validasi di bagian Skeleton dan Fontnya

src/app_modules/auth/login/view.tsx

@@ -67,7 +67,7 @@ export default function Login({ version }: { version: string }) {
               <Text c={MainColor.white}>Nomor telepon</Text>
             </Center>
             <PhoneInput
-              inputStyle={{ width: "100%", }}
+              inputStyle={{ width: "100%" }}             
               defaultCountry="id"
               onChange={(val) => {
                 setPhone(val);

src/app_modules/auth/validasi/skeleton.tsx

@@ -2,8 +2,27 @@ import { Stack, Skeleton, Group } from "@mantine/core";
 
 export default function Validasi_SkeletonView() {
   return (
-    <>
     <Stack align="center" justify="center" h={"100vh"} spacing={50}>
+      <Skeleton h={30} w={250} radius={"xl"} />
+      <Stack spacing={"md"} align="center">
+      <Stack mb={15}>  
+        <Skeleton h={20} w={250} radius={"xl"} />
+        <Skeleton h={20} w={250} radius={"xl"} />
+      </Stack>
+
+      <Group mb={10}>
+        {Array.from({ length: 4 }).map((_, i) => (
+          <Skeleton key={i} h={50} w={50} radius={"sm"} />
+        ))}
+      </Group>
+
+      <Skeleton h={20} w={250} radius={"xl"} />
+        </Stack>
+      <Skeleton h={50} w={250} radius={"sm"} />
+    </Stack>
+  );
+}
+{/* <Stack align="center" justify="center" h={"100vh"} spacing={50}>
         <Skeleton h={30} w={250} radius={"xl"} />
         <Stack>
           <Skeleton h={20} w={250} radius={"xl"} />
@@ -19,7 +38,4 @@ export default function Validasi_SkeletonView() {
         <Skeleton h={20} w={250} radius={"xl"} />
 
         <Skeleton h={50} w={250} radius={"sm"} />
-      </Stack>
+      </Stack> */}
-    </>
-  );
-}

src/app_modules/auth/validasi/view.tsx

@@ -197,8 +197,8 @@ export default function Validasi() {
 
               <Stack spacing={"md"} align="center">
                 <Stack spacing={0} align="center">
-                  <Text c={"white"}>Masukan 4 digit kode otp</Text>
+                  <Text c={MainColor.white}>Masukan 4 digit kode otp</Text>
-                  <Text c={"white"}>
+                  <Text c={MainColor.white}>
                     Yang dikirim ke{" "}
                     <Text span inherit fw={"bold"}>
                       {" "}
@@ -208,11 +208,13 @@ export default function Validasi() {
                 </Stack>
                 <Center>
                     <PinInput
+                      
                     size="xl"
                     type={"number"}
                     ref={focusTrapRef}
                     spacing={"md"}
                       mt={"md"}
+                      styles={{ input: { backgroundColor: MainColor.white } }}
                     onChange={(val) => {
                       setInputOtp(val);
                     }}
@@ -220,7 +222,7 @@ export default function Validasi() {
                 </Center>
 
                 <Stack h={"5vh"} align="center" justify="center">
-                  <Text fs="italic" c={"white"}>
+                  <Text fs="italic" c={MainColor.white}>
                     Tidak menerima kode ?{" "}
                     {counter > 0 ? (
                       <Text fw={"bold"} inherit span>