feat: improved padding on modal components and implement logout in mobile menu

app/components/popup/modal.tsx

@@ -34,7 +34,7 @@ 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 justify-center overflow-y-auto p-0 max-sm:bg-white sm:items-center sm:p-4">
         <DialogPanel
           transition
           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"

app/components/popup/success-modal.tsx

@@ -53,7 +53,7 @@ export const SuccessModal = ({ isOpen, onClose }: ModalProperties) => {
         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 justify-center overflow-y-auto p-0 max-sm:bg-white sm:items-center sm: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"
           transition

app/layouts/news/header-menu-mobile.tsx

@@ -1,11 +1,13 @@
 import { useState } from 'react'
-import { Link } from 'react-router'
+import { Link, useFetcher, useRouteLoaderData } from 'react-router'
 
 import type { TCategorySchema } from '~/apis/common/get-categories'
 import { CloseIcon } from '~/components/icons/close'
 import { MenuIcon } from '~/components/icons/menu'
+import { Button } from '~/components/ui/button'
 import { useNewsContext } from '~/contexts/news'
 import { HeaderSearch } from '~/layouts/news/header-search'
+import type { loader } from '~/routes/_layout'
 
 type THeaderMenuMobile = {
   menu?: TCategorySchema['data']
@@ -15,6 +17,9 @@ export default function HeaderMenuMobile(properties: THeaderMenuMobile) {
   const { menu } = properties
   const [isMenuOpen, setIsMenuOpen] = useState(false)
   const { setIsLoginOpen } = useNewsContext()
+  const loaderData = useRouteLoaderData<typeof loader>('routes/_layout')
+  const userData = loaderData?.userData
+  const fetcher = useFetcher()
 
   const handleToggleMenu = (): void => {
     setIsMenuOpen(!isMenuOpen)
@@ -59,15 +64,31 @@ export default function HeaderMenuMobile(properties: THeaderMenuMobile) {
                 </li>
               ))}
 
-              <button
+              {userData ? (
+                <fetcher.Form
+                  method="POST"
+                  action="/actions/logout"
+                >
+                  <Button
+                    variant="newsSecondary"
+                    className="w-full bg-white px-[35px] py-3 text-center text-[#2E2F7C] sm:hidden"
+                    type="submit"
+                  >
+                    Logout
+                  </Button>
+                </fetcher.Form>
+              ) : (
+                <Button
+                  variant="newsSecondary"
                   className="w-full bg-white px-[35px] py-3 text-center text-[#2E2F7C] sm:hidden"
                   onClick={() => {
-                  setIsLoginOpen(true)
                     setIsMenuOpen(false)
+                    setIsLoginOpen(true)
                   }}
                 >
-                Akun
+                  Masuk
-              </button>
+                </Button>
+              )}
             </ul>
           </div>