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/configs/meta.ts

@@ -2,7 +2,7 @@ import { MENU as ADMIN_MENU } from '~/layouts/admin/menu'
 
 export const APP = {
   title: 'LegalGo',
-  description: 'Legalgo Platform Berita Dunia dan Indonesia.',
+  description: 'LegalGo Platform Berita Dunia dan Indonesia.',
   logo: '/images/logo.png',
 }
 

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>
 

app/layouts/news/header-top.tsx

@@ -23,13 +23,10 @@ export const HeaderTop = () => {
           className="h-3/4 w-auto sm:h-full"
         />
       </Link>
-      <div className="hidden h-full items-center py-1.5 font-light whitespace-pre-line sm:flex">
+      <div className="hidden h-full items-center py-1.5 text-2xl font-light whitespace-pre-line sm:flex">
         {APP.description}
       </div>
       <div className="flex items-center gap-[15px]">
-        <Button className="h-8 w-auto rounded-none px-3 text-xs sm:h-[50px] sm:w-[150px] sm:text-lg">
-          About Us
-        </Button>
         {userData ? (
           <fetcher.Form
             method="POST"

app/pages/admin-login/index.tsx

@@ -40,7 +40,7 @@ export const AdminLoginPage = () => {
     <div className="flex min-h-dvh min-w-dvw flex-col items-center justify-center space-y-8">
       <div className="grid max-w-lg items-center justify-center space-y-7 rounded-[20px] border border-[#E6E6E6] bg-white p-8">
         <div className="flex flex-col items-center">
-          <Link to="/lg-admin">
+          <Link to="/">
             <img
               src={APP.logo}
               alt={APP.title}
@@ -100,18 +100,6 @@ export const AdminLoginPage = () => {
           </RemixFormProvider>
         </div>
       </div>
-      {/* Link Daftar */}
-      <div className="mt-4 text-center text-sm">
-        Belum punya akun?{' '}
-        <Button
-          onClick={() => {}}
-          className="font-semibold text-[#2E2F7C]"
-          variant="link"
-          size="fit"
-        >
-          Daftar Disini
-        </Button>
-      </div>
     </div>
   )
 }