fix(ui): fix invite layout flex centering, use BrandedButton on 404 page

Author: waleedlatif1

apps/sim/app/invite/components/layout.tsx

@@ -9,11 +9,11 @@ interface InviteLayoutProps {
 
 export default function InviteLayout({ children }: InviteLayoutProps) {
   return (
-    <div className='relative min-h-screen bg-[#1C1C1C] font-[430] font-season text-[#ECECEC]'>
+    <div className='relative flex min-h-screen flex-col bg-[#1C1C1C] font-[430] font-season text-[#ECECEC]'>
       <header>
         <Navbar logoOnly />
       </header>
-      <main className='flex flex-1 flex-col items-center justify-center px-4 pt-[15vh]'>
+      <main className='flex flex-1 flex-col items-center justify-center px-4'>
         <div className='w-full max-w-lg px-4'>
           <div className='flex flex-col items-center justify-center'>{children}</div>
         </div>

apps/sim/app/not-found.tsx

@@ -1,8 +1,13 @@
-import Link from 'next/link'
+'use client'
+
+import { useRouter } from 'next/navigation'
 import AuthBackground from '@/app/(auth)/components/auth-background'
+import { BrandedButton } from '@/app/(auth)/components/branded-button'
 import Navbar from '@/app/(home)/components/navbar/navbar'
 
 export default function NotFound() {
+  const router = useRouter()
+
   return (
     <AuthBackground className='dark font-[430] font-season'>
       <main className='relative flex min-h-full flex-col text-[#ECECEC]'>
@@ -14,12 +19,11 @@ export default function NotFound() {
           <p className='mt-2 text-[#999] text-[16px]'>
             The page you&apos;re looking for doesn&apos;t exist or has been moved.
           </p>
-          <Link
-            href='/'
-            className='mt-8 inline-flex h-[30px] items-center rounded-[5px] border border-[#FFFFFF] bg-[#FFFFFF] px-[9px] text-[13.5px] text-black transition-colors hover:border-[#E0E0E0] hover:bg-[#E0E0E0]'
-          >
-            Return to Home
-          </Link>
+          <div className='mt-8 w-full max-w-[200px]'>
+            <BrandedButton onClick={() => router.push('/')} showArrow={false}>
+              Return to Home
+            </BrandedButton>
+          </div>
         </div>
       </main>
     </AuthBackground>