Perbaikan UI pada Forum

# style:
- Tampilan keseluruhan forum di ganti menguikuti UI
## No Issue

src/app_modules/auth/login/view.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import {
+  BackgroundImage,
   Box,
   Button,
   Center,
@@ -81,56 +82,56 @@ export default function Login() {
 
   return (
     <>
-      <Stack
-        align="center"
-        justify="center"
+      <BackgroundImage
+        src={"/aset/global/main_background.png"}
         h={"100vh"}
-        bg={MainColor.darkblue}
-        spacing={100}
+        // pos={"static"}
       >
-        <Stack align="center" spacing={0}>
-          <Title order={3} c={MainColor.yellow}>
-            WELCOME TO
-          </Title>
-          <Title c={MainColor.yellow}>HIPMI APPS</Title>
+        <Stack align="center" justify="center" h={"100vh"} spacing={100}>
+          <Stack align="center" spacing={0}>
+            <Title order={3} c={MainColor.yellow}>
+              WELCOME TO
+            </Title>
+            <Title c={MainColor.yellow}>HIPMI APPS</Title>
+          </Stack>
+
+          <Stack w={300}>
+            <Center>
+              <Text c={"white"}>Nomor telepon</Text>
+            </Center>
+            <PhoneInput
+              inputStyle={{ width: "100%" }}
+              defaultCountry="id"
+              onChange={(val) => {
+                setPhone(val);
+              }}
+            />
+
+            {isError ? (
+              <ComponentGlobal_ErrorInput text="Masukan nomor telepon anda" />
+            ) : (
+              ""
+            )}
+
+            <Button
+              radius={"md"}
+              bg={MainColor.yellow}
+              color={"yellow"}
+              loading={loading ? true : false}
+              loaderPosition="center"
+              c={"black"}
+              style={{
+                borderColor: AccentColor.yellow,
+              }}
+              onClick={() => {
+                onLogin();
+              }}
+            >
+              LOGIN
+            </Button>
+          </Stack>
         </Stack>
-
-        <Stack w={300}>
-          <Center>
-            <Text c={"white"}>Nomor telepon</Text>
-          </Center>
-          <PhoneInput
-            inputStyle={{ width: "100%" }}
-            defaultCountry="id"
-            onChange={(val) => {
-              setPhone(val);
-            }}
-          />
-
-          {isError ? (
-            <ComponentGlobal_ErrorInput text="Masukan nomor telepon anda" />
-          ) : (
-            ""
-          )}
-
-          <Button
-            radius={"md"}
-            bg={MainColor.yellow}
-            color={"yellow"}
-            loading={loading ? true : false}
-            loaderPosition="center"
-            c={"black"}
-            style={{
-              borderColor: AccentColor.yellow,
-            }}
-            onClick={() => {
-              onLogin();
-            }}
-          >
-            LOGIN
-          </Button>
-        </Stack>
-      </Stack>
+      </BackgroundImage>
     </>
   );
 }

src/app_modules/auth/register/view.tsx

@@ -10,8 +10,13 @@ import {
   Center,
   PinInput,
   Stack,
+  BackgroundImage,
 } from "@mantine/core";
-import { IconCircleLetterH, IconCloudLockOpen, IconUserCircle } from "@tabler/icons-react";
+import {
+  IconCircleLetterH,
+  IconCloudLockOpen,
+  IconUserCircle,
+} from "@tabler/icons-react";
 import { gs_nomor } from "../state/state";
 import { useAtom } from "jotai";
 import { useState } from "react";
@@ -28,7 +33,10 @@ import { IconPencilCheck } from "@tabler/icons-react";
 import { RouterHome } from "@/app/lib/router_hipmi/router_home";
 import { auth_funEditAktivasiKodeOtpById } from "../fun/fun_edit_aktivasi_kode_otp_by_id";
 import ComponentGlobal_ErrorInput from "@/app_modules/component_global/error_input";
-import { AccentColor, MainColor } from "@/app_modules/component_global/color/color_pallet";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/component_global/color/color_pallet";
 
 export default function Register({ dataOtp }: { dataOtp: any }) {
   const router = useRouter();
@@ -72,85 +80,26 @@ export default function Register({ dataOtp }: { dataOtp: any }) {
   return (
     <>
       {/* <pre>{JSON.stringify(dataOtp,null,2)}</pre> */}
+      <BackgroundImage
+        src={"/aset/global/main_background.png"}
+        h={"100vh"}
+        // pos={"static"}
+      >
+        <Center h={"100vh"}>
+          <Stack h={"100%"} align="center" justify="center" spacing={70}>
+            <Title order={2} c={MainColor.yellow}>
+              REGISTRASI
+            </Title>
 
-      <Center bg={MainColor.darkblue} h={"100vh"}>
-        <Stack h={"100%"} align="center" justify="center" spacing={70}>
-          <Title order={2} c={MainColor.yellow}>
-            REGISTRASI
-          </Title>
+            <IconUserCircle size={100} color="white" />
 
-          <IconUserCircle size={100} color="white" />
-
-          <Stack spacing={"sm"} w={300}>
-            <Text fz={10} c={"white"}>
-              Anda akan terdaftar dengan nomor berikut{" "}
-              <Text inherit span fw={"bold"}>
-                +{nomor}
+            <Stack spacing={"sm"} w={300}>
+              <Text fz={10} c={"white"}>
+                Anda akan terdaftar dengan nomor berikut{" "}
+                <Text inherit span fw={"bold"}>
+                  +{nomor}
+                </Text>
               </Text>
-            </Text>
-            <TextInput
-              ref={focusTrapRef}
-              placeholder="Masukan Username"
-              maxLength={50}
-              error={
-                value.length > 0 && value.length < 5 ? (
-                  <ComponentGlobal_ErrorInput text="Minimal 5 karakter !" />
-                ) : _.values(value).includes(" ") ? (
-                  <Stack spacing={5}>
-                    <ComponentGlobal_ErrorInput text="Tidak boleh ada space" />
-                    <ComponentGlobal_ErrorInput text="Sambungkan huruf meggunakan karakter _" />
-                  </Stack>
-                ) : isValue ? (
-                  <ComponentGlobal_ErrorInput text="Masukan username anda" />
-                ) : (
-                  ""
-                )
-              }
-              onChange={(val) => {
-                val.currentTarget.value.length > 0 ? setIsValue(false) : "";
-                setValue(val.currentTarget.value);
-              }}
-            />
-            <Stack>
-              <Button
-                loading={loading ? true : false}
-                loaderPosition="center"
-                radius={"md"}
-                compact
-                h={40}
-                c={"black"}
-                bg={MainColor.yellow}
-                color={"yellow"}
-                style={{
-                  borderColor: AccentColor.yellow,
-                }}
-                onClick={() => {
-                  onRegistarsi();
-                }}
-              >
-                <Text>DAFTAR</Text>
-              </Button>
-            </Stack>
-          </Stack>
-        </Stack>
-
-        {/* <Stack
-          px={"lg"}
-          spacing={70}
-          w={{ base: 400 }}
-          justify="center"
-          h={"80vh"}
-        >
-          <Center>
-            <IconPencilCheck size={120} />
-          </Center>
-
-          <Stack spacing={"lg"}>
-            <Stack spacing={0}>
-              <Title order={4}>REGISTRASI</Title>
-              <Text fz={"xs"}>Masukan username anda !</Text>
-            </Stack>
-            <Stack spacing={"sm"}>
               <TextInput
                 ref={focusTrapRef}
                 placeholder="Masukan Username"
@@ -174,32 +123,30 @@ export default function Register({ dataOtp }: { dataOtp: any }) {
                   setValue(val.currentTarget.value);
                 }}
               />
-              <Text fz={10} c={"gray"}>
-                Anda akan terdaftar dengan nomor berikut{" "}
-                <Text inherit span fw={"bold"}>
-                  +{nomor}
-                </Text>
-              </Text>
-            </Stack>
-
-            <Stack>
-              <Button
-                loading={loading ? true : false}
-                loaderPosition="center"
-                radius={"md"}
-                compact
-                h={40}
-                color={"teal"}
-                onClick={() => {
-                  onRegistarsi();
-                }}
-              >
-                <Text>DAFTAR</Text>
-              </Button>
+              <Stack>
+                <Button
+                  loading={loading ? true : false}
+                  loaderPosition="center"
+                  radius={"md"}
+                  compact
+                  h={40}
+                  c={"black"}
+                  bg={MainColor.yellow}
+                  color={"yellow"}
+                  style={{
+                    borderColor: AccentColor.yellow,
+                  }}
+                  onClick={() => {
+                    onRegistarsi();
+                  }}
+                >
+                  <Text>DAFTAR</Text>
+                </Button>
+              </Stack>
             </Stack>
           </Stack>
-        </Stack> */}
-      </Center>
+        </Center>
+      </BackgroundImage>
     </>
   );
 }

src/app_modules/auth/splash/view.tsx

@@ -1,12 +1,7 @@
 "use client";
 
 import { MainColor } from "@/app_modules/component_global/color/color_pallet";
-import {
-  Center,
-  Image,
-  Paper,
-  Stack
-} from "@mantine/core";
+import { BackgroundImage, Center, Image, Paper, Stack } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { useRouter } from "next/navigation";
 
@@ -24,21 +19,28 @@ export default function SplashScreen({ data }: { data: any }) {
       }, 2000);
     }
   }, []);
+
   return (
     <>
-      <Center h={"100vh"} bg={MainColor.darkblue}>
-        <Stack align="center" justify="center" p={"md"}>
-          {/* <Title c={"#002e59"}>Welcome to</Title> */}
-          <Paper
-            p={{ base: 20, md: 30, lg: 40 }}
-            bg={"gray.1"}
-            radius={"100%"}
-            shadow="xl"
-          >
-            <Image height={200} alt="" src={"/aset/logo/logo-hipmi.png"} />
-          </Paper>
-        </Stack>
-      </Center>
+      <BackgroundImage
+        src={"/aset/global/main_background.png"}
+        h={"100vh"}
+        // pos={"static"}
+      >
+        <Center h={"100vh"}>
+          <Stack align="center" justify="center" p={"md"}>
+            {/* <Title c={"#002e59"}>Welcome to</Title> */}
+            <Paper
+              p={{ base: 20, md: 30, lg: 40 }}
+              bg={"gray.1"}
+              radius={"100%"}
+              shadow="xl"
+            >
+              <Image height={200} alt="" src={"/aset/logo/logo-hipmi.png"} />
+            </Paper>
+          </Stack>
+        </Center>
+      </BackgroundImage>
     </>
   );
 }

src/app_modules/auth/validasi/view.tsx

@@ -11,18 +11,17 @@ import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_glob
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
 import {
   ActionIcon,
+  BackgroundImage,
   Box,
   Button,
   Center,
   PinInput,
   Stack,
   Text,
-  Title
+  Title,
 } from "@mantine/core";
 import { useFocusTrap } from "@mantine/hooks";
-import {
-  IconChevronLeft
-} from "@tabler/icons-react";
+import { IconChevronLeft } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { auth_funEditAktivasiKodeOtpById } from "../fun/fun_edit_aktivasi_kode_otp_by_id";
@@ -66,64 +65,74 @@ export default function Validasi({ dataOtp }: { dataOtp: any }) {
 
   return (
     <>
-      <Stack bg={MainColor.darkblue} h={"100vh"}>
-        <Box
-          pt={"md"}
-          px={"md"}
-          style={{
-            position: "sticky",
-            top: 0,
-          }}
-        >
-          <ActionIcon variant="transparent" onClick={() => router.back()}>
-            <IconChevronLeft color="white" />
-          </ActionIcon>
-        </Box>
-
-        <Stack align="center" justify="center" h={"100vh"} spacing={70}>
-          <Title order={2} color={MainColor.yellow}>
-            Verifikasi Kode OTP
-          </Title>
-
-          <Stack spacing={0} align="center">
-            <Text fz={"xs"}  c={"white"}>
-              Masukan 4 digit kode otp
-            </Text>
-            <Text fz={"xs"}  c={"white"}>
-              Yang dikirim ke <Text span inherit fw={"bold"}> +{nomor}</Text>
-            </Text>
-            <Center>
-              <PinInput
-                ref={focusTrapRef}
-                spacing={"md"}
-                mt={"md"}
-                onChange={(val) => {
-                  setInputOtp(val);
-                }}
-              />
-            </Center>
-          </Stack>
-          <Button
-            w={300}
-            loading={loading ? true : false}
-            loaderPosition="center"
-            radius={"md"}
-            compact
-            h={40}
-            c={"black"}
-            bg={MainColor.yellow}
-            color={"yellow"}
+      <BackgroundImage
+        src={"/aset/global/main_background.png"}
+        h={"100vh"}
+        // pos={"static"}
+      >
+        <Stack h={"100vh"}>
+          <Box
+            pt={"md"}
+            px={"md"}
             style={{
-              borderColor: AccentColor.yellow,
-            }}
-            onClick={() => {
-              onVerifikasi();
+              position: "sticky",
+              top: 0,
             }}
           >
-            <Text>VERIFIKASI</Text>
-          </Button>
+            <ActionIcon variant="transparent" onClick={() => router.back()}>
+              <IconChevronLeft color="white" />
+            </ActionIcon>
+          </Box>
+
+          <Stack align="center" justify="center" h={"100vh"} spacing={70}>
+            <Title order={2} color={MainColor.yellow}>
+              Verifikasi Kode OTP
+            </Title>
+
+            <Stack spacing={0} align="center">
+              <Text fz={"xs"} c={"white"}>
+                Masukan 4 digit kode otp
+              </Text>
+              <Text fz={"xs"} c={"white"}>
+                Yang dikirim ke{" "}
+                <Text span inherit fw={"bold"}>
+                  {" "}
+                  +{nomor}
+                </Text>
+              </Text>
+              <Center>
+                <PinInput
+                  ref={focusTrapRef}
+                  spacing={"md"}
+                  mt={"md"}
+                  onChange={(val) => {
+                    setInputOtp(val);
+                  }}
+                />
+              </Center>
+            </Stack>
+            <Button
+              w={300}
+              loading={loading ? true : false}
+              loaderPosition="center"
+              radius={"md"}
+              compact
+              h={40}
+              c={"black"}
+              bg={MainColor.yellow}
+              color={"yellow"}
+              style={{
+                borderColor: AccentColor.yellow,
+              }}
+              onClick={() => {
+                onVerifikasi();
+              }}
+            >
+              <Text>VERIFIKASI</Text>
+            </Button>
+          </Stack>
         </Stack>
-      </Stack>
+      </BackgroundImage>
     </>
   );
 }