app/components/popup/modal.tsx

@@ -7,7 +7,6 @@ import {
 } from '@headlessui/react'
 import type { ReactNode } from 'react'
 
-import { LeftArrow } from '~/components/icons/left-arrow'
 import { APP } from '~/data/meta'
 
 type ModalProperties = {
@@ -35,17 +34,8 @@ export const PopupModal = ({
         className="fixed inset-0 bg-black/50 duration-300 ease-out data-[closed]:opacity-0"
         transition
       />
-      <div className="fixed inset-0 flex w-screen justify-center overflow-y-auto p-4 max-sm:bg-white sm:items-center">
+      <div className="fixed inset-0 flex w-screen items-center justify-center p-4">
-        <DialogPanel className="max-w-lg space-y-6 rounded-lg bg-white p-8 duration-300 ease-out data-[closed]:scale-95 data-[closed]:opacity-0 sm:shadow-lg">
+        <DialogPanel className="max-w-lg space-y-6 rounded-lg bg-white p-8 shadow-lg duration-300 ease-out data-[closed]:scale-95 data-[closed]:opacity-0">
-          <button
-            onClick={onClose}
-            className="top-4 left-4 items-center lg:hidden"
-          >
-            <LeftArrow
-              width={50}
-              height={50}
-            />
-          </button>
           <DialogTitle className="flex justify-center">
             <img
               src={APP.logo}

app/components/ui/banner.tsx

@@ -11,7 +11,7 @@ export default function Banner() {
           className="mt-2 h-full py-2"
         >
           <img
-            src={'/images/banner.png'}
+            src={'/public/images/banner.png'}
             alt={APP.title}
             className="h-[70px] w-[100%] sm:h-full"
           />

app/components/ui/form-login.tsx

@@ -1,5 +1,6 @@
 // import { EyeIcon, EyeOffIcon } from 'lucide-react'
 import { useState, type Dispatch, type SetStateAction } from 'react'
+import { Link } from 'react-router'
 
 import { EyeIcon } from '~/components/icons/eye'
 
@@ -8,11 +9,10 @@ import { Button } from './button'
 type TProperties = {
   setIsRegisterOpen: Dispatch<SetStateAction<boolean>>
   setIsLoginOpen: Dispatch<SetStateAction<boolean>>
-  setIsForgetOpen: Dispatch<SetStateAction<boolean>>
 }
 
 export const FormLogin = (properties: TProperties) => {
-  const { setIsRegisterOpen, setIsLoginOpen, setIsForgetOpen } = properties
+  const { setIsRegisterOpen, setIsLoginOpen } = properties
   const [showPassword, setShowPassword] = useState(false)
 
   return (
@@ -67,18 +67,14 @@ export const FormLogin = (properties: TProperties) => {
           </div>
 
           {/* Lupa Kata Sandi */}
-          <div className="mb-4 flex items-center justify-between text-sm">
+          <div className="mb-4 flex justify-between">
             <span className="text-gray-600">Lupa Kata Sandi?</span>
-            <Button
+            <Link
-              onClick={() => {
+              to="/reset-password"
-                setIsLoginOpen(false)
-                setIsForgetOpen(true)
-              }}
               className="font-semibold text-[#2E2F7C]"
-              variant="link"
             >
               Reset Kata Sandi
-            </Button>
+            </Link>
           </div>
 
           {/* Tombol Masuk */}

app/contexts/news.tsx

@@ -12,8 +12,6 @@ type NewsContextProperties = {
   setIsLoginOpen: Dispatch<SetStateAction<boolean>>
   isRegisterOpen: boolean
   setIsRegisterOpen: Dispatch<SetStateAction<boolean>>
-  isForgetOpen: boolean
-  setForgetOpen: Dispatch<SetStateAction<boolean>>
 }
 
 const NewsContext = createContext<NewsContextProperties | undefined>(undefined)
@@ -21,18 +19,10 @@ const NewsContext = createContext<NewsContextProperties | undefined>(undefined)
 export const NewsProvider = ({ children }: PropsWithChildren) => {
   const [isLoginOpen, setIsLoginOpen] = useState(false)
   const [isRegisterOpen, setIsRegisterOpen] = useState(false)
-  const [isForgetOpen, setForgetOpen] = useState(false)
 
   return (
     <NewsContext.Provider
-      value={{
+      value={{ isLoginOpen, setIsLoginOpen, isRegisterOpen, setIsRegisterOpen }}
-        isLoginOpen,
-        setIsLoginOpen,
-        isRegisterOpen,
-        setIsRegisterOpen,
-        isForgetOpen,
-        setForgetOpen,
-      }}
     >
       {children}
     </NewsContext.Provider>

app/layouts/news/default.tsx

@@ -2,7 +2,6 @@ import { type PropsWithChildren } from 'react'
 
 import { PopupModal } from '~/components/popup/modal'
 import Banner from '~/components/ui/banner'
-import FormForgotPassword from '~/components/ui/form-forgot-password'
 import { FormLogin } from '~/components/ui/form-login'
 import { FormRegister } from '~/components/ui/form-register'
 import { useNewsContext } from '~/contexts/news'
@@ -14,14 +13,8 @@ import { HeaderTop } from './header-top'
 
 export const NewsDefaultLayout = (properties: PropsWithChildren) => {
   const { children } = properties
-  const {
+  const { isLoginOpen, setIsLoginOpen, isRegisterOpen, setIsRegisterOpen } =
-    isLoginOpen,
+    useNewsContext()
-    setIsLoginOpen,
-    isRegisterOpen,
-    setIsRegisterOpen,
-    isForgetOpen,
-    setForgetOpen,
-  } = useNewsContext()
   return (
     <main className="relative min-h-dvh bg-[#ECECEC]">
       <header>
@@ -46,25 +39,16 @@ export const NewsDefaultLayout = (properties: PropsWithChildren) => {
         <FormLogin
           setIsRegisterOpen={setIsRegisterOpen}
           setIsLoginOpen={setIsLoginOpen}
-          setIsForgetOpen={setForgetOpen}
         />
       </PopupModal>
 
       <PopupModal
         isOpen={isRegisterOpen}
         onClose={() => setIsRegisterOpen(false)}
-        description="Selamat Datang, silakan isi keterangan akun Anda untuk melanjutkan!"
+        description="Selamat Datang, silakan daftarkan akun Anda untuk melanjutkan!"
       >
         <FormRegister />
       </PopupModal>
-
-      <PopupModal
-        isOpen={isForgetOpen}
-        onClose={() => setForgetOpen(false)}
-        description="Selamat Datang, silakan isi keterangan akun Anda untuk melanjutkan!"
-      >
-        <FormForgotPassword />
-      </PopupModal>
     </main>
   )
 }