feat(claim-db-worker): apply 2026 Prisma brand

apps/claim-db-worker/__tests__/claim.test.tsx

@@ -57,7 +57,7 @@ describe("claim page", () => {
       mockSearchParams.set("projectID", "test-project-123");
       render(<ClaimPage />);
 
-      const claimButton = screen.getByText("Claim database");
+      const claimButton = screen.getByRole("button", { name: "Claim database" });
       expect(claimButton).not.toBeDisabled();
 
       fireEvent.click(claimButton);
@@ -102,7 +102,7 @@ describe("claim page", () => {
       mockSearchParams.set("projectID", "test-project-123");
       render(<ClaimPage />);
 
-      const claimButton = screen.getByText("Claim database");
+      const claimButton = screen.getByRole("button", { name: "Claim database" });
       fireEvent.click(claimButton);
 
       await waitFor(() => {
@@ -138,7 +138,7 @@ describe("claim page", () => {
 
       render(<ClaimPage />);
 
-      const claimButton = screen.getByText("Claim database");
+      const claimButton = screen.getByRole("button", { name: "Claim database" });
 
       fireEvent.click(claimButton);
 

apps/claim-db-worker/__tests__/success.test.tsx

@@ -45,7 +45,9 @@ describe("success page", () => {
       mockSearchParams.set("projectID", "test-project-123");
       render(<SuccessPage />);
 
-      expect(screen.getByAltText("Database Success")).toBeInTheDocument();
+      expect(
+        screen.getByAltText("Prismo, the Prisma mascot, smiling")
+      ).toBeInTheDocument();
     });
   });
 });

apps/claim-db-worker/app/claim/page.tsx

@@ -1,8 +1,11 @@
 "use client";
 
 import { PrismaPostgresLogo } from "@/components/PrismaPostgresLogo";
+import { PrismButton } from "@/components/brand/PrismButton";
+import { Mascot } from "@/components/brand/Brand";
+import { StatePanel } from "@/components/brand/StatePanel";
+import { ArrowRight } from "lucide-react";
 import { useSearchParams, useRouter, usePathname } from "next/navigation";
-import Image from "next/image";
 import { useEffect, useState, Suspense } from "react";
 
 function ClaimContent() {
@@ -56,43 +59,30 @@ function ClaimContent() {
   };
 
   return (
-    <div className="flex flex-col mt-32 items-center justify-center text-center px-4 sm:px-6">
-      <div className="max-w-2xl w-full flex flex-col items-center">
-        <PrismaPostgresLogo />
+    <StatePanel>
+      <Mascot expression="salute" alt="Prismo, the Prisma mascot, saluting" className="mb-8 w-28 sm:w-32" />
+      <PrismaPostgresLogo />
 
-        <h1 className="text-4xl sm:text-5xl md:text-6xl font-bold text-white mb-16 tracking-tight leading-tight">
-          Claim your database
-          <span className="text-muted">*</span>
-        </h1>
+      <h1 className="text-balance text-[clamp(2.25rem,5vw,3.75rem)] leading-[1.06]">
+        Claim your database
+        <span className="text-muted-foreground">*</span>
+      </h1>
 
-        <button
-          onClick={handleClaimClick}
-          disabled={isLoading}
-          className="flex items-center justify-center gap-3 bg-[#24bfa7] hover:bg-[#16A394] disabled:opacity-50 disabled:cursor-not-allowed text-white font-bold text-xl sm:text-2xl lg:text-3xl border-none rounded-lg px-8 py-4 sm:px-10 sm:py-5 lg:px-12 lg:py-6 cursor-pointer shadow-lg transition-all duration-200 mb-16 min-h-[44px] sm:min-h-[52px] lg:min-h-[60px] mx-auto"
-        >
-          <Image
-            src="/db-icon.svg"
-            alt="Database Icon"
-            width={24}
-            height={24}
-            className="w-6 h-6"
-          />
+      <div className="mt-10">
+        <PrismButton onClick={handleClaimClick} disabled={isLoading} size="lg">
           Claim database
-          <Image
-            src="/arrow-right.svg"
-            alt="Arrow Right"
-            width={24}
-            height={24}
-            className="w-6 h-6"
-          />
-        </button>
-
-        <p className="text-muted text-sm sm:text-base lg:text-lg italic">
-          *your <b>database will be deleted 24 hours after creation</b> unless
-          you claim it
-        </p>
+          <ArrowRight className="h-5 w-5" aria-hidden />
+        </PrismButton>
       </div>
-    </div>
+
+      <p className="mt-10 max-w-[48ch] text-pretty text-muted-foreground">
+        *Your database will be{" "}
+        <strong className="font-semibold text-foreground">
+          deleted 24 hours after creation
+        </strong>{" "}
+        unless you claim it.
+      </p>
+    </StatePanel>
   );
 }
 

apps/claim-db-worker/app/db-unavailable/page.tsx

@@ -1,7 +1,9 @@
 "use client";
 
 import { cookieUtils } from "@/lib/utils";
-import { Info } from "lucide-react";
+import { Mascot } from "@/components/brand/Brand";
+import { PrismButton } from "@/components/brand/PrismButton";
+import { StatePanel } from "@/components/brand/StatePanel";
 
 const DB_KEY = "temp_db_info";
 
@@ -11,21 +13,17 @@ export default function DBUnavailablePage() {
   };
 
   return (
-    <div className="w-fit min-h-[calc(100vh-200px)] max-w-7xl mx-auto px-2 sm:px-4 py-8 sm:py-16 font-barlow">
-      <div className="bg-code text-center gap-6 h-fit rounded-lg p-4 sm:p-6 border border-subtle flex flex-col">
-        <h1 className="text-2xl gap-2 font-bold flex items-center">
-          <Info className="inline text-brand-surface-highlight" /> Database
-          already claimed or deleted
-        </h1>
-        <p className="text-muted">Please create a new one</p>
-        <a
-          href="/web/connect"
-          className="h-16 w-full flex items-center justify-center gap-3 bg-button-blue hover:bg-button-blue-hover text-white font-bold text-lg rounded-lg px-6 py-3 cursor-pointer transition-all duration-200"
-          onClick={handleCreateNew}
-        >
-          Create New Database
-        </a>
+    <StatePanel>
+      <Mascot expression="sad" alt="Prismo, the Prisma mascot, looking sad" className="mb-8 w-28 sm:w-32" />
+      <h1 className="text-balance text-[clamp(1.75rem,4vw,2.75rem)] leading-[1.1]">
+        Database already claimed or deleted
+      </h1>
+      <p className="mt-4 text-lg text-muted-foreground">Please create a new one</p>
+      <div className="mt-10">
+        <PrismButton href="/web/connect" reload onClick={handleCreateNew} size="lg">
+          Create new database
+        </PrismButton>
       </div>
-    </div>
+    </StatePanel>
   );
 }

apps/claim-db-worker/app/error/page.tsx

@@ -2,6 +2,8 @@
 
 import { useSearchParams } from "next/navigation";
 import { Suspense } from "react";
+import { Mascot } from "@/components/brand/Brand";
+import { StatePanel } from "@/components/brand/StatePanel";
 
 function ErrorContent() {
   const searchParams = useSearchParams();
@@ -11,57 +13,24 @@ function ErrorContent() {
   const details = searchParams.get("details");
 
   return (
-    <div className="flex flex-col items-center justify-center mt-32 text-center px-4 sm:px-6">
-      <div className="max-w-4xl w-full">
-        <div className="flex flex-col items-center">
-          <div className="flex items-center justify-center gap-3 mb-5 sm:mb-6">
-            <div className="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 relative">
-              <svg
-                width="100%"
-                height="100%"
-                viewBox="0 0 96 96"
-                fill="none"
-                aria-hidden="true"
-                className="block"
-              >
-                <circle cx="48" cy="48" r="40" fill="#FC8181" />
-                <line
-                  x1="34"
-                  y1="34"
-                  x2="62"
-                  y2="62"
-                  stroke="#222B32"
-                  strokeWidth="8"
-                  strokeLinecap="round"
-                />
-                <line
-                  x1="62"
-                  y1="34"
-                  x2="34"
-                  y2="62"
-                  stroke="#222B32"
-                  strokeWidth="8"
-                  strokeLinecap="round"
-                />
-              </svg>
-            </div>
-            <h1 className="text-error text-4xl sm:text-5xl md:text-6xl font-bold tracking-tight leading-tight">
-              {title}
-            </h1>
-          </div>
+    <StatePanel className="max-w-4xl">
+      <Mascot expression="sad" alt="Prismo, the Prisma mascot, looking sad" className="mb-8 w-28 sm:w-32" />
+      <p className="mb-4 flex items-center gap-2 text-sm font-semibold text-foreground/70">
+        <span aria-hidden className="size-2 rounded-full bg-prism-red-500" />
+        Something went wrong
+      </p>
+      <h1 className="text-balance text-[clamp(2.25rem,5vw,3.75rem)] leading-[1.06]">{title}</h1>
 
-          <p className="text-muted text-xl sm:text-2xl lg:text-3xl font-normal mb-8 sm:mb-10 max-w-2xl">
-            {message}
-          </p>
+      <p className="mt-6 max-w-2xl text-pretty text-lg text-muted-foreground sm:text-xl">
+        {message}
+      </p>
 
-          {details && (
-            <pre className="bg-step text-white font-mono text-sm sm:text-base rounded-lg p-4 sm:p-6 border border-subtle text-left w-full max-w-4xl overflow-x-auto whitespace-pre-wrap">
-              <code className="text-muted">{details}</code>
-            </pre>
-          )}
-        </div>
-      </div>
-    </div>
+      {details && (
+        <pre className="mt-10 w-full max-w-4xl overflow-x-auto whitespace-pre-wrap rounded-2xl border border-border bg-code p-4 text-left font-mono text-sm sm:p-6">
+          <code className="text-foreground">{details}</code>
+        </pre>
+      )}
+    </StatePanel>
   );
 }