fix: janky login/logout refreshes and redirects

src/app/login/page.tsx

@@ -37,7 +37,6 @@ export default function LoginForm() {
 			toast({ title: "login successful!" })
 			setSubmitted(true)
 			await revalidate(redirect)
-			router.refresh()
 			router.push(redirect)
 		} else {
 			toast({ title: "login failed!" })

src/app/tailwind.css

@@ -761,6 +761,10 @@ body {
   margin-top: 0.5rem;
 }
 
+.mt-20 {
+  margin-top: 5rem;
+}
+
 .mt-3 {
   margin-top: 0.75rem;
 }
@@ -773,10 +777,6 @@ body {
   margin-top: 1.5rem;
 }
 
-.mt-20 {
-  margin-top: 5rem;
-}
-
 .block {
   display: block;
 }
@@ -879,14 +879,6 @@ body {
   height: 100vh;
 }
 
-.h-full {
-  height: 100%;
-}
-
-.h-5\/6 {
-  height: 83.333333%;
-}
-
 .max-h-96 {
   max-height: 24rem;
 }
@@ -985,6 +977,18 @@ body {
   min-width: fit-content;
 }
 
+.max-w-16 {
+  max-width: 4rem;
+}
+
+.max-w-24 {
+  max-width: 6rem;
+}
+
+.max-w-36 {
+  max-width: 9rem;
+}
+
 .max-w-full {
   max-width: 100%;
 }
@@ -1001,22 +1005,6 @@ body {
   max-width: 20rem;
 }
 
-.max-w-8 {
-  max-width: 2rem;
-}
-
-.max-w-24 {
-  max-width: 6rem;
-}
-
-.max-w-16 {
-  max-width: 4rem;
-}
-
-.max-w-36 {
-  max-width: 9rem;
-}
-
 .shrink-0 {
   flex-shrink: 0;
 }
@@ -1204,24 +1192,18 @@ body {
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
 
-.space-y-8 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
-}
-
-.space-y-3 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
-}
-
 .space-y-6 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
 }
 
+.space-y-8 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
+}
+
 .justify-self-end {
   justify-self: end;
 }
@@ -2471,15 +2453,15 @@ body {
     padding-bottom: 1rem;
   }
 
-  .md\:text-sm {
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-  }
-
   .md\:text-base {
     font-size: 1rem;
     line-height: 1.5rem;
   }
+
+  .md\:text-sm {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
 }
 
 .\[\&\:has\(\[aria-selected\]\)\]\:bg-accent:has([aria-selected]) {

src/app/ui/logoutButton.tsx

@@ -1,19 +1,23 @@
 "use client"
 import { Button } from "@/components/ui/button"
 import { LogOutIcon } from "lucide-react"
+import { useRouter } from "next/navigation"
 
 
-async function handleLogout() {
-  const res = await fetch('/api/auth/logout', {
-    method: 'POST',
-    headers: {
-      'Content-type': 'application/json',
-    }
-  })
-  console.log(res)
-  window.location.reload()
-}
 export default function LogoutButton() {
+  const router = useRouter()
+
+  async function handleLogout() {
+    const res = await fetch('/api/auth/logout', {
+      method: 'POST',
+      headers: {
+        'Content-type': 'application/json',
+      }
+    })
+    console.log(res)
+    router.refresh()
+  }
+
   return (
     <Button variant="outline" className="w-fit" onClick={handleLogout} >
       <LogOutIcon />