Portal: UI tweaks 2

apps/portal/package.json

@@ -17,6 +17,7 @@
     "clsx": "^2.1.1",
     "date-fns": "4.1.0",
     "flexsearch": "^0.7.43",
+    "geist": "^1.5.1",
     "github-slugger": "^2.0.0",
     "he": "^1.2.0",
     "lucide-react": "0.525.0",

apps/portal/src/app/Header.tsx

@@ -213,127 +213,129 @@ export function Header() {
   const pathname = usePathname();
 
   return (
-    <header className="flex w-full flex-col gap-2 border-b p-4 xl:pb-0 lg:px-8 lg:pt-5 overflow-hidden bg-card">
-      {/* Top row */}
-      <div className="container flex items-center justify-between gap-6">
-        <div className="flex items-center gap-2">
-          <Link
-            aria-label="thirdweb Docs"
-            className="flex items-center gap-2"
-            href="/"
-            title="thirdweb Docs"
-          >
-            <ThirdwebIcon className="size-8" />
-            <span className="font-bold text-[23px] text-foreground leading-none tracking-tight">
-              Docs
-            </span>
-          </Link>
-        </div>
-
-        <div className="flex items-center gap-4">
-          <div className="hidden xl:block">
+    <header className="flex w-full border-b overflow-hidden relative">
+      <div className="container flex-col">
+        {/* Top row */}
+        <div className="flex items-center justify-between gap-6 relative z-10 py-4 lg:pt-5">
+          <div className="flex items-center gap-2">
             <Link
-              className="text-foreground"
-              href="https://github.com/thirdweb-dev"
-              target="_blank"
+              aria-label="thirdweb Docs"
+              className="flex items-center gap-2"
+              href="/"
+              title="thirdweb Docs"
             >
-              <GithubIcon className="size-6 lg:size-5" />
+              <ThirdwebIcon className="size-8" />
+              <span className="font-bold text-[23px] text-foreground leading-none tracking-tight">
+                Docs
+              </span>
             </Link>
           </div>
 
-          <div className="hidden xl:block">
-            <ThemeSwitcher className="border-none bg-transparent" />
-          </div>
+          <div className="flex items-center gap-4">
+            <div className="hidden xl:block">
+              <Link
+                className="text-foreground"
+                href="https://github.com/thirdweb-dev"
+                target="_blank"
+              >
+                <GithubIcon className="size-6 lg:size-5" />
+              </Link>
+            </div>
 
-          <div className="hidden xl:block">
-            <DocSearch variant="search" />
-          </div>
+            <div className="hidden xl:block">
+              <ThemeSwitcher className="border-none bg-transparent" />
+            </div>
 
-          <div className="hidden xl:block">
-            <ChatButton />
-          </div>
+            <div className="hidden xl:block">
+              <DocSearch variant="search" />
+            </div>
 
-          <div className="flex items-center gap-1 xl:hidden">
-            <ThemeSwitcher className="border-none bg-transparent" />
-            <DocSearch variant="icon" />
-            <ChatButton />
-            <Button
-              className="p-2"
-              onClick={() => setShowBurgerMenu(!showBurgerMenu)}
-              variant="ghost"
-            >
-              <MenuIcon className="size-7" />
-            </Button>
+            <div className="hidden xl:block">
+              <ChatButton />
+            </div>
+
+            <div className="flex items-center gap-1 xl:hidden">
+              <ThemeSwitcher className="border-none bg-transparent" />
+              <DocSearch variant="icon" />
+              <ChatButton />
+              <Button
+                className="p-2"
+                onClick={() => setShowBurgerMenu(!showBurgerMenu)}
+                variant="ghost"
+              >
+                <MenuIcon className="size-7" />
+              </Button>
+            </div>
           </div>
         </div>
-      </div>
 
-      {/* Bottom row - hidden on mobile */}
-      <div className="container hidden items-start justify-between gap-6 xl:flex mt-1">
-        <nav className="flex grow gap-5">
-          <ul className="flex flex-row items-center gap-0 mb-1.5">
-            {links.map((link) => {
-              return (
-                <li
-                  className="flex items-center relative"
-                  key={link.href}
-                  onClick={() => {
-                    setShowBurgerMenu(false);
-                  }}
-                  onKeyDown={() => {
-                    setShowBurgerMenu(false);
-                  }}
-                >
-                  <NavLink
-                    href={link.href}
-                    name={link.name}
-                    className="py-2.5 px-3 hover:bg-accent rounded-lg hover:text-foreground font-normal"
-                  />
-                  {pathname?.startsWith(link.href) && (
-                    <div className="bg-foreground h-[2px] inset-x-0 rounded-full absolute -bottom-1.5" />
-                  )}
-                </li>
-              );
-            })}
-          </ul>
-        </nav>
+        {/* Bottom row - hidden on mobile */}
+        <div className="hidden items-start justify-between gap-6 xl:flex relative z-10">
+          <nav className="flex grow gap-5">
+            <ul className="flex flex-row items-center gap-0 mb-1.5">
+              {links.map((link) => {
+                return (
+                  <li
+                    className="flex items-center relative"
+                    key={link.href}
+                    onClick={() => {
+                      setShowBurgerMenu(false);
+                    }}
+                    onKeyDown={() => {
+                      setShowBurgerMenu(false);
+                    }}
+                  >
+                    <NavLink
+                      href={link.href}
+                      name={link.name}
+                      className="py-2.5 px-3 hover:bg-accent rounded-lg hover:text-foreground font-normal"
+                    />
+                    {pathname?.startsWith(link.href) && (
+                      <div className="bg-foreground h-[2px] inset-x-0 rounded-full absolute -bottom-1.5" />
+                    )}
+                  </li>
+                );
+              })}
+            </ul>
+          </nav>
 
-        <div className="flex items-center">
-          <DropdownLinks
-            category="AI"
-            links={aiLinks}
-            onLinkClick={() => setShowBurgerMenu(false)}
-          />
-          <DropdownLinks
-            category="SDKs"
-            links={sdkLinks}
-            onLinkClick={() => setShowBurgerMenu(false)}
-          />
-          <DropdownLinks
-            category="APIs"
-            links={apisLinks}
-            onLinkClick={() => setShowBurgerMenu(false)}
-          />
+          <div className="flex items-center">
+            <DropdownLinks
+              category="AI"
+              links={aiLinks}
+              onLinkClick={() => setShowBurgerMenu(false)}
+            />
+            <DropdownLinks
+              category="SDKs"
+              links={sdkLinks}
+              onLinkClick={() => setShowBurgerMenu(false)}
+            />
+            <DropdownLinks
+              category="APIs"
+              links={apisLinks}
+              onLinkClick={() => setShowBurgerMenu(false)}
+            />
 
-          <DropdownLinks
-            category="Tools"
-            links={toolLinks}
-            onLinkClick={() => setShowBurgerMenu(false)}
-          />
-          <DropdownLinks
-            category="Support"
-            links={supportLinks}
-            onLinkClick={() => setShowBurgerMenu(false)}
-          />
+            <DropdownLinks
+              category="Tools"
+              links={toolLinks}
+              onLinkClick={() => setShowBurgerMenu(false)}
+            />
+            <DropdownLinks
+              category="Support"
+              links={supportLinks}
+              onLinkClick={() => setShowBurgerMenu(false)}
+            />
 
-          <NavLink
-            href="/changelog"
-            className="px-3 py-2.5 hover:bg-accent hover:text-foreground rounded-lg"
-            name="Changelog"
-            onClick={() => {
-              setShowBurgerMenu(false);
-            }}
-          />
+            <NavLink
+              href="/changelog"
+              className="px-3 py-2.5 hover:bg-accent hover:text-foreground rounded-lg"
+              name="Changelog"
+              onClick={() => {
+                setShowBurgerMenu(false);
+              }}
+            />
+          </div>
         </div>
       </div>
 
@@ -422,6 +424,8 @@ export function Header() {
           </div>
         </div>
       )}
+
+      <div className="absolute inset-0 bg-card/70 backdrop-blur-xl z-0" />
     </header>
   );
 }

apps/portal/src/app/globals.css

@@ -1,3 +1,7 @@
+html {
+  font-feature-settings: "liga" 1;
+}
+
 code span {
   color: var(--code-light-color);
 }

apps/portal/src/app/layout.tsx

@@ -1,6 +1,7 @@
 import "@workspace/ui/global.css";
 import "./globals.css";
-import { Fira_Code, Inter } from "next/font/google";
+import { GeistMono } from "geist/font/mono";
+import { GeistSans } from "geist/font/sans";
 import { ThemeProvider } from "next-themes";
 import NextTopLoader from "nextjs-toploader";
 import { createMetadata } from "@/components/Document";
@@ -9,18 +10,6 @@ import { EnableSmoothScroll } from "../components/others/SmoothScroll";
 import { cn } from "../lib/utils";
 import { Header } from "./Header";
 
-const sansFont = Inter({
-  subsets: ["latin"],
-  variable: "--font-sans",
-  weight: "variable",
-});
-
-const monoFont = Fira_Code({
-  subsets: ["latin"],
-  variable: "--font-mono",
-  weight: "variable",
-});
-
 export const metadata = createMetadata({
   description: "thirdweb developer portal",
   title: "thirdweb docs",
@@ -34,7 +23,7 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <body
-        className={cn(sansFont.variable, monoFont.variable, "font-sans")}
+        className={cn(GeistMono.variable, GeistSans.variable, "font-sans")}
         suppressHydrationWarning
       >
         <ThemeProvider

apps/portal/src/app/references/components/TDoc/PageLayout.tsx

@@ -1,20 +1,17 @@
 import GithubSlugger from "github-slugger";
 import { FileTextIcon, FolderOpenIcon } from "lucide-react";
 import type { Metadata } from "next";
+import Link from "next/link";
 import { notFound } from "next/navigation";
 import invariant from "tiny-invariant";
 import type { TransformedDoc } from "typedoc-better-json";
-import {
-  ArticleIconCard,
-  createMetadata,
-  Details,
-  Heading,
-} from "@/components/Document";
+import { createMetadata, Details, Heading } from "@/components/Document";
 import { Breadcrumb } from "@/components/Document/Breadcrumb";
 import { DocLayout } from "@/components/Layouts/DocLayout";
 import type { LinkGroup, LinkMeta } from "@/components/others/Sidebar";
 import { sluggerContext } from "@/contexts/slugger";
 import type { MetadataImageIcon } from "../../../../components/Document/metadata";
+import { cn } from "../../../../lib/utils";
 import { RootTDoc } from "./Root";
 import { getSidebarLinkGroups } from "./utils/getSidebarLinkgroups";
 import { fetchAllSlugs, getSlugToDocMap } from "./utils/slugs";
@@ -330,10 +327,44 @@ function GroupOfLinks(props: { linkGroup: LinkGroup; level: number }) {
       accordionItemClassName="m-0"
       accordionTriggerClassName="rounded-lg"
       anchorId={slugger.slug(props.linkGroup.name)}
-      headingClassName="py-0.5 text-lg"
+      headingClassName="py-0.5 text-lg font-medium"
       summary={props.linkGroup.name}
     >
       <RenderLinkGroup level={props.level + 1} linkGroup={props.linkGroup} />
     </Details>
   );
 }
+
+function ArticleIconCard(props: {
+  title: string;
+  href: string;
+  icon?: React.FC<{ className?: string }>;
+  className?: string;
+}) {
+  const isExternal = props.href.startsWith("http");
+  return (
+    <Link
+      className={cn(
+        "flex items-center gap-4 rounded-xl border bg-card p-4 transition-colors hover:border-active-border",
+        props.className,
+      )}
+      data-noindex
+      href={props.href}
+      target={isExternal ? "_blank" : undefined}
+    >
+      {props.icon && (
+        <div className="shrink-0">
+          <div className="rounded-full p-2.5 bg-background border">
+            <props.icon className="size-3.5 text-muted-foreground" />
+          </div>
+        </div>
+      )}
+
+      <div className="flex flex-col gap-1.5">
+        <h3 className="font-semibold text-base text-foreground leading-none">
+          {props.title}
+        </h3>
+      </div>
+    </Link>
+  );
+}

apps/portal/src/app/vault/page.mdx

@@ -19,7 +19,7 @@ Vault is an open-source non-custodial key management service, secured with TEE a
 ## Features
 
 <div
-	className="my-4 grid gap-2 md:grid-cols-2 lg:grid-cols-2 "
+	className="my-4 space-y-4"
 >
     <FeatureCard
         title="Non-Custodial Wallets"

apps/portal/src/components/AI/chat-button.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { MessageCircleIcon, RefreshCcwIcon, XIcon } from "lucide-react";
+import { BrainIcon, RefreshCcwIcon, XIcon } from "lucide-react";
 import { lazy, Suspense, useCallback, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Spinner } from "@/components/ui/Spinner";
@@ -27,7 +27,7 @@ export function ChatButton() {
         }}
         variant="outline"
       >
-        <MessageCircleIcon className="size-4 text-muted-foreground" />
+        <BrainIcon className="size-4 text-muted-foreground" />
         Ask AI
       </Button>