Update and refine alert modals

app/(app)/create/PostLoginDraftTransfer.tsx

@@ -11,6 +11,7 @@ import { useCreateFlow } from "./context/CreateFlowContext";
 import { parseCreateFlowScreenFromPathname } from "./utils/flowSteps";
 import { saveDraftToServer } from "../../../lib/create/api";
 import messages from "../../../messages/en/index";
+import Alert from "../../components/modals/Alert";
 
 const SYNC_ENABLED = process.env.NEXT_PUBLIC_ENABLE_BACKEND_SYNC === "true";
 
@@ -139,12 +140,27 @@ export function PostLoginDraftTransfer({
 
   if (!transferError) return null;
 
+  const [titleLine, ...rest] = transferError.split(/\n\n+/);
+  const title = (titleLine ?? transferError).trim();
+  const description = rest.join("\n\n").trim() || undefined;
+
   return (
-    <div
-      role="alert"
-      className="mx-auto max-w-[640px] px-5 py-3 text-center font-inter text-sm text-[var(--color-border-default-utility-negative)]"
-    >
-      {transferError}
+    <div className="pointer-events-none fixed inset-x-0 bottom-4 z-[150] flex justify-center px-5 md:bottom-6">
+      <div className="pointer-events-auto w-full max-w-[640px]">
+        <Alert
+          type="banner"
+          status="danger"
+          size="s"
+          title={title}
+          description={description}
+          hasBodyText={Boolean(description)}
+          hasLeadingIcon
+          onClose={() => {
+            setTransferError(null);
+          }}
+          className="w-full"
+        />
+      </div>
     </div>
   );
 }

app/(app)/create/SignedInDraftHydration.tsx

@@ -11,6 +11,7 @@ import {
 import { useCreateFlow } from "./context/CreateFlowContext";
 import { fetchDraftFromServer } from "../../../lib/create/api";
 import messages from "../../../messages/en/index";
+import Alert from "../../components/modals/Alert";
 import {
   isValidStep,
   parseCreateFlowScreenFromPathname,
@@ -119,12 +120,19 @@ export function SignedInDraftHydration({
   if (!loadingHydration) return null;
 
   return (
-    <div
-      role="status"
-      aria-live="polite"
-      className="w-full shrink-0 px-[var(--spacing-measures-spacing-500,20px)] py-[var(--spacing-measures-spacing-200,8px)] md:px-[var(--measures-spacing-1800,64px)] text-center font-inter text-sm text-[var(--color-text-default-secondary,#a3a3a3)]"
-    >
-      {messages.create.draftHydration.loadingSavedProgress}
+    <div className="pointer-events-none fixed left-0 right-0 top-14 z-[170] flex justify-center px-[var(--spacing-measures-spacing-500,20px)] pt-2 md:top-16 md:px-[var(--measures-spacing-1800,64px)]">
+      <div className="pointer-events-auto w-full max-w-[960px]">
+        <Alert
+          type="banner"
+          status="default"
+          size="s"
+          title={messages.create.draftHydration.loadingSavedProgress}
+          hasBodyText={false}
+          hasLeadingIcon={false}
+          hasTrailingIcon={false}
+          className="w-full"
+        />
+      </div>
     </div>
   );
 }

app/(app)/create/review-template/[slug]/page.tsx

@@ -86,19 +86,28 @@ export default function ReviewTemplatePage({ params }: PageProps) {
 
   if (error || !template) {
     return (
-      <CreateFlowStepShell variant="wideGrid" contentTopBelowMd="space-800">
+      <>
         <div
-          className={`flex shrink-0 flex-col gap-4 pb-8 ${CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS}`}
+          className="pointer-events-none fixed left-0 right-0 top-14 z-[120] flex justify-center px-5 pt-3 md:top-20 md:px-12"
+          aria-live="polite"
         >
-          <Alert
-            type="banner"
-            status="danger"
-            title={t("errors.loadFailed")}
-            description={error ?? t("errors.notFound")}
-            className="w-full"
-          />
+          <div className="pointer-events-auto w-full max-w-[960px]">
+            <Alert
+              type="banner"
+              status="danger"
+              title={t("errors.loadFailed")}
+              description={error ?? t("errors.notFound")}
+              className="w-full"
+            />
+          </div>
         </div>
-      </CreateFlowStepShell>
+        <CreateFlowStepShell variant="wideGrid" contentTopBelowMd="space-800">
+          <div
+            className={`min-h-[40vh] shrink-0 ${CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS}`}
+            aria-hidden
+          />
+        </CreateFlowStepShell>
+      </>
     );
   }