[Dashboard] Onboarding UI adjustments + use doLogout server action instead of fetch (#5480)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR primarily focuses on refactoring the logout functionality across various components by replacing direct API calls with a centralized `doLogout` function. It also includes some UI adjustments and enhancements.

### Detailed summary
- Removed direct API call to `/api/auth/logout` in favor of `doLogout()` in multiple components.
- Updated styles for various UI elements, including `AccountForm` and `OnboardingChoosePlan`.
- Adjusted layout and class names for better responsiveness and appearance.
- Added `Aurora` component for visual effects in the `LoginAndOnboardingPage`.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: MananTank

apps/dashboard/src/@3rdweb-sdk/react/components/connect-wallet/index.tsx

@@ -21,6 +21,7 @@ import {
   useConnectModal,
 } from "thirdweb/react";
 import { useFavoriteChainIds } from "../../../../app/(dashboard)/(chain)/components/client/star-button";
+import { doLogout } from "../../../../app/login/auth-actions";
 import { LazyConfigureNetworkModal } from "../../../../components/configure-networks/LazyConfigureNetworkModal";
 import { useAllChainsData } from "../../../../hooks/chains/allChains";
 import {
@@ -174,10 +175,7 @@ export const CustomConnectWallet = (props: {
         }}
         onDisconnect={async () => {
           try {
-            // log out the user
-            await fetch("/api/auth/logout", {
-              method: "POST",
-            });
+            await doLogout();
           } catch (err) {
             console.error("Failed to log out", err);
           }

apps/dashboard/src/app/account/components/AccountHeader.tsx

@@ -9,6 +9,7 @@ import { useAccount } from "@3rdweb-sdk/react/hooks/useApi";
 import { useCallback, useState } from "react";
 import { useActiveWallet, useDisconnect } from "thirdweb/react";
 import { LazyCreateAPIKeyDialog } from "../../../components/settings/ApiKeys/Create/LazyCreateAPIKeyDialog";
+import { doLogout } from "../../login/auth-actions";
 import {
   type AccountHeaderCompProps,
   AccountHeaderDesktopUI,
@@ -27,11 +28,8 @@ export function AccountHeader(props: {
   const { disconnect } = useDisconnect();
 
   const logout = useCallback(async () => {
-    // log out the user
     try {
-      await fetch("/api/auth/logout", {
-        method: "POST",
-      });
+      await doLogout();
       if (wallet) {
         disconnect(wallet);
       }

apps/dashboard/src/app/api/auth/logout/route.ts

@@ -39,6 +39,7 @@ export function SecondaryNavLinks() {
       <Link
         href="https://portal.thirdweb.com/"
         className="text-muted-foreground text-sm hover:text-foreground"
+        target="_blank"
       >
         Docs
       </Link>

apps/dashboard/src/app/components/Header/SecondaryNav/SecondaryNav.tsx

@@ -7,6 +7,7 @@ import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import { useTheme } from "next-themes";
+import Link from "next/link";
 import { Suspense, lazy, useState } from "react";
 import { ConnectEmbed, useActiveWalletConnectionStatus } from "thirdweb/react";
 import { createWallet, inAppWallet } from "thirdweb/wallets";
@@ -46,20 +47,39 @@ export function LoginAndOnboardingPage(props: {
   nextPath: string | undefined;
 }) {
   return (
-    <div className="flex min-h-screen flex-col bg-background">
+    <div className="relative flex min-h-screen flex-col overflow-hidden bg-background">
       <div className="border-b bg-background">
         <header className="container flex w-full flex-row items-center justify-between px-6 py-4">
           <div className="flex shrink-0 items-center gap-3">
             <ThirdwebMiniLogo className="size-7 md:size-8" />
             <h1 className="font-medium text-lg tracking-tight md:text-xl">
-              Get started with thirdweb
+              Get started <span className="max-sm:hidden">with thirdweb</span>
             </h1>
           </div>
-          <ColorModeToggle />
+
+          <div className="flex items-center gap-3">
+            <Link
+              href="/support"
+              target="_blank"
+              className="px-2 text-muted-foreground text-sm hover:text-foreground"
+            >
+              Support
+            </Link>
+
+            <Link
+              href="https://portal.thirdweb.com/"
+              className="px-2 text-muted-foreground text-sm hover:text-foreground"
+              target="_blank"
+            >
+              Docs
+            </Link>
+
+            <ColorModeToggle />
+          </div>
         </header>
       </div>
 
-      <main className="z-10 flex grow flex-col items-center justify-center gap-6 py-12">
+      <main className="container z-10 flex grow flex-col items-center justify-center gap-6 py-12">
         <ClientOnly ssr={<LoadingCard />}>
           <PageContent nextPath={props.nextPath} account={props.account} />
         </ClientOnly>
@@ -69,15 +89,21 @@ export function LoginAndOnboardingPage(props: {
       <img
         alt=""
         src="/assets/login/background.svg"
-        className="-bottom-12 -right-12 fixed lg:right-0 lg:bottom-0"
+        className="-bottom-12 -right-12 pointer-events-none fixed lg:right-0 lg:bottom-0"
+      />
+
+      <Aurora
+        color="hsl(var(--foreground)/9%)"
+        pos={{ top: "55%", left: "50%" }}
+        size={{ width: "1400px", height: "1300px" }}
       />
     </div>
   );
 }
 
 function LoadingCard() {
   return (
-    <div className="flex min-h-[450px] w-[calc(100vw-60px)] max-w-[500px] items-center justify-center rounded-lg border border-border bg-background">
+    <div className="flex min-h-[450px] w-full items-center justify-center rounded-xl border border-border bg-background shadow-lg lg:w-[500px]">
       <Spinner className="size-10" />
     </div>
   );
@@ -202,3 +228,25 @@ function isValidRedirectPath(encodedPath: string): boolean {
     return false;
   }
 }
+
+type AuroraProps = {
+  size: { width: string; height: string };
+  pos: { top: string; left: string };
+  color: string;
+};
+
+const Aurora: React.FC<AuroraProps> = ({ color, pos, size }) => {
+  return (
+    <div
+      className="pointer-events-none absolute"
+      style={{
+        top: pos.top,
+        left: pos.left,
+        width: size.width,
+        height: size.height,
+        transform: "translate(-50%, -50%)",
+        backgroundImage: `radial-gradient(ellipse at center, ${color}, transparent 60%)`,
+      }}
+    />
+  );
+};

apps/dashboard/src/app/login/LoginPage.tsx

@@ -9,6 +9,7 @@ import { useAccount } from "@3rdweb-sdk/react/hooks/useApi";
 import { useCallback, useState } from "react";
 import { useActiveWallet, useDisconnect } from "thirdweb/react";
 import { LazyCreateAPIKeyDialog } from "../../../../components/settings/ApiKeys/Create/LazyCreateAPIKeyDialog";
+import { doLogout } from "../../../login/auth-actions";
 import {
   type TeamHeaderCompProps,
   TeamHeaderDesktopUI,
@@ -30,9 +31,7 @@ export function TeamHeaderLoggedIn(props: {
   const logout = useCallback(async () => {
     // log out the user
     try {
-      await fetch("/api/auth/logout", {
-        method: "POST",
-      });
+      await doLogout();
       if (activeWallet) {
         disconnect(activeWallet);
       }

apps/dashboard/src/app/team/components/TeamHeader/team-header-logged-in.client.tsx

@@ -12,13 +12,13 @@ export function OnboardingChoosePlan(props: {
   return (
     <div>
       <TitleAndDescription
-        heading="Choose your plan"
-        description="Get started for free with our Starter plan or subscribe to Growth plan to unlock higher rate limits and advanced features."
+        heading="Choose your Plan"
+        description="Get started for free with our Starter plan or subscribe to Growth plan to unlock higher rate limits and advanced features"
       />
 
       <div className="h-4" />
 
-      <div className="grid grid-cols-1 gap-8 md:grid-cols-2 md:gap-4">
+      <div className="grid grid-cols-1 gap-6 md:grid-cols-2 md:gap-4">
         <PricingCard
           billingPlan="starter"
           teamSlug={props.teamSlug}
@@ -43,14 +43,15 @@ export function OnboardingChoosePlan(props: {
             variant: "default",
           }}
           canTrialGrowth={props.canTrialGrowth}
+          highlighted
         />
       </div>
 
-      <div className="h-3" />
+      <div className="h-4" />
 
-      <div className="flex justify-end">
+      <div className="flex justify-center">
         <Button
-          variant="ghost"
+          variant="link"
           onClick={props.skipPlan}
           className="inline-flex translate-x-2 items-center gap-2 text-muted-foreground"
         >

apps/dashboard/src/components/onboarding/ChoosePlan.tsx

@@ -5,6 +5,7 @@ import { useMutation } from "@tanstack/react-query";
 import { AccountForm } from "components/settings/Account/AccountForm";
 import { useState } from "react";
 import { useActiveWallet, useDisconnect } from "thirdweb/react";
+import { doLogout } from "../../app/login/auth-actions";
 import { TitleAndDescription } from "./Title";
 
 type OnboardingGeneralProps = {
@@ -23,17 +24,10 @@ export const OnboardingGeneral: React.FC<OnboardingGeneralProps> = ({
   const { disconnect } = useDisconnect();
 
   async function handleLogout() {
-    await fetch("/api/auth/logout", {
-      method: "POST",
-    })
-      .catch((err) => {
-        console.error("Failed to log out", err);
-      })
-      .then(() => {
-        if (activeWallet) {
-          disconnect(activeWallet);
-        }
-      });
+    await doLogout();
+    if (activeWallet) {
+      disconnect(activeWallet);
+    }
   }
 
   const logoutMutation = useMutation({
@@ -60,7 +54,6 @@ export const OnboardingGeneral: React.FC<OnboardingGeneralProps> = ({
           account={account}
           buttonText={!existing ? "Get Started for Free" : "Login"}
           trackingCategory="onboarding"
-          padded={false}
           onSave={onSave}
           onDuplicateError={onDuplicate}
         />

apps/dashboard/src/components/onboarding/General.tsx

@@ -50,8 +50,8 @@ function OnboardingUI(props: {
   return (
     <div
       className={cn(
-        "relative w-screen rounded-lg border border-border bg-background p-4 lg:p-6",
-        screen.id === "plan" ? "max-w-[750px]" : "max-w-[500px]",
+        "relative w-full rounded-xl border border-border bg-background p-6 shadow-lg",
+        screen.id === "plan" ? "lg:max-w-[750px]" : "lg:w-[500px]",
       )}
     >
       {screen.id === "onboarding" && (

apps/dashboard/src/components/onboarding/on-boarding-ui.client.tsx

@@ -3,7 +3,6 @@ import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Button } from "@/components/ui/button";
 import { Checkbox, CheckboxWithLabel } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
-import { cn } from "@/lib/utils";
 import { type Account, useUpdateAccount } from "@3rdweb-sdk/react/hooks/useApi";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useTrack } from "hooks/analytics/useTrack";
@@ -32,11 +31,9 @@ export const AccountForm: React.FC<AccountFormProps> = ({
   onSave,
   onDuplicateError,
   buttonText = "Save",
-  horizontal = false,
   hideName = false,
   showSubscription = false,
   disableUnchanged = false,
-  padded = true,
 }) => {
   const [isSubscribing, setIsSubscribing] = useState(true);
   const trackEvent = useTrack();
@@ -106,16 +103,8 @@ export const AccountForm: React.FC<AccountFormProps> = ({
 
   return (
     <form onSubmit={handleSubmit}>
-      <div
-        className={cn(
-          "flex w-full flex-col items-start rounded-xl bg-background",
-          horizontal ? "gap-6" : "gap-8",
-          padded ? "border border-border p-6" : "p-0",
-        )}
-      >
-        <div
-          className={cn("flex w-full", horizontal ? "gap-4" : "flex-col gap-4")}
-        >
+      <div className="flex w-full flex-col items-start gap-8 rounded-xl">
+        <div className="flex w-full flex-col gap-4">
           <FormFieldSetup
             isRequired
             htmlFor="email"