refactor(dashboard): lote 10 — root, auth, error, status, legal, landing shell and docs pages on the CI UI Kit (KEA-7886)

config/quality/eslint-suppressions.json

@@ -1614,11 +1614,6 @@
       "count": 5
     }
   },
-  "src/shared/components/DegradationBadge.tsx": {
-    "@typescript-eslint/no-unused-vars": {
-      "count": 1
-    }
-  },
   "src/shared/components/KiroAuthModal.tsx": {
     "@typescript-eslint/no-unused-vars": {
       "count": 1

src/app/callback/page.tsx

@@ -1,5 +1,8 @@
 "use client";
 
+import Card from "@/shared/components/Card";
+import Icon from "@/shared/components/Icon";
+
 import { useTranslations } from "next-intl";
 import { useEffect, useState } from "react";
 
@@ -16,9 +19,7 @@ import { useEffect, useState } from "react";
  */
 export default function CallbackPage() {
   const [status, setStatus] = useState<"processing" | "success" | "done" | "manual">("processing");
-  const [currentUrl] = useState(() =>
-    typeof window === "undefined" ? "" : window.location.href
-  );
+  const [currentUrl] = useState(() => (typeof window === "undefined" ? "" : window.location.href));
   const t = useTranslations("auth");
 
   useEffect(() => {
@@ -86,10 +87,7 @@ export default function CallbackPage() {
     if (window.opener) {
       for (const origin of trustedTargetOrigins) {
         try {
-          window.opener.postMessage(
-            { type: "oauth_callback", data: callbackData },
-            origin
-          );
+          window.opener.postMessage({ type: "oauth_callback", data: callbackData }, origin);
           sent = true;
         } catch (e) {
           console.log("postMessage failed:", e);
@@ -141,28 +139,28 @@ export default function CallbackPage() {
   }, []);
 
   return (
-    <div className="min-h-screen flex items-center justify-center">
-      <div className="text-center p-8 max-w-md">
+    <main className="min-h-screen flex items-center justify-center p-6">
+      <Card padding="lg" className="w-full max-w-md text-center">
         {status === "processing" && (
           <>
-            <div className="size-16 mx-auto mb-4 rounded-full bg-primary/10 flex items-center justify-center">
-              <span className="material-symbols-outlined text-3xl text-primary animate-spin">
-                progress_activity
-              </span>
+            <div className="size-16 mx-auto mb-4 rounded-full bg-bg-subtle flex items-center justify-center">
+              <Icon
+                name="progress_activity"
+                size={30}
+                className="text-text-muted animate-spin motion-reduce:animate-none"
+              />
             </div>
-            <h1 className="text-xl font-semibold mb-2">{t("processing")}</h1>
+            <h1 className="ci-heading text-xl mb-2">{t("processing")}</h1>
             <p className="text-text-muted">{t("pleaseWait")}</p>
           </>
         )}
 
         {(status === "success" || status === "done") && (
           <>
-            <div className="size-16 mx-auto mb-4 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center">
-              <span className="material-symbols-outlined text-3xl text-green-600">
-                check_circle
-              </span>
+            <div className="size-16 mx-auto mb-4 rounded-full bg-success-bg flex items-center justify-center">
+              <Icon name="check_circle" size={30} className="text-success" />
             </div>
-            <h1 className="text-xl font-semibold mb-2">{t("authSuccess")}</h1>
+            <h1 className="ci-heading text-xl mb-2">{t("authSuccess")}</h1>
             <p className="text-text-muted">
               {status === "success" ? t("windowWillClose") : t("closeTabNow")}
             </p>
@@ -171,17 +169,17 @@ export default function CallbackPage() {
 
         {status === "manual" && (
           <>
-            <div className="size-16 mx-auto mb-4 rounded-full bg-yellow-100 dark:bg-yellow-900/30 flex items-center justify-center">
-              <span className="material-symbols-outlined text-3xl text-yellow-600">info</span>
+            <div className="size-16 mx-auto mb-4 rounded-full bg-warning-bg flex items-center justify-center">
+              <Icon name="info" size={30} className="text-warning" />
             </div>
-            <h1 className="text-xl font-semibold mb-2">{t("copyUrl")}</h1>
+            <h1 className="ci-heading text-xl mb-2">{t("copyUrl")}</h1>
             <p className="text-text-muted mb-4">{t("copyUrlManual")}</p>
-            <div className="bg-surface border border-border rounded-lg p-3 text-left">
+            <div className="bg-bg-subtle border border-border rounded-lg p-3 text-left">
               <code className="text-xs break-all">{currentUrl}</code>
             </div>
           </>
         )}
-      </div>
-    </div>
+      </Card>
+    </main>
   );
 }

src/app/connect/codex/[token]/CodexConnectClient.tsx

@@ -1,8 +1,11 @@
 "use client";
 
+import Icon from "@/shared/components/Icon";
+
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslations } from "next-intl";
 import Button from "@/shared/components/Button";
+import Card from "@/shared/components/Card";
 import { useCopyToClipboard } from "@/shared/hooks/useCopyToClipboard";
 import {
   runCodexDeviceFlow,
@@ -104,13 +107,13 @@ export default function CodexConnectClient({ token }: { token: string }) {
   }, [token, t]);
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-bg-base px-4 py-10">
-      <div className="w-full max-w-md rounded-2xl border border-border bg-bg-subtle p-8 shadow-sm">
+    <main className="min-h-screen flex items-center justify-center bg-bg px-4 py-10">
+      <Card padding="lg" className="w-full max-w-md">
         <div className="mb-6 text-center">
-          <div className="mb-3 inline-flex h-14 w-14 items-center justify-center rounded-full bg-primary/10 text-primary">
-            <span className="material-symbols-outlined text-[28px]">key</span>
+          <div className="mb-3 inline-flex h-14 w-14 items-center justify-center rounded-full bg-bg-subtle text-text-muted">
+            <Icon name="key" size={28} />
           </div>
-          <h1 className="text-lg font-semibold text-text-main">{t("connectOpenAiCodexTitle")}</h1>
+          <h1 className="ci-heading text-lg">{t("connectOpenAiCodexTitle")}</h1>
           <p className="mt-1 text-sm text-text-muted">{t("codexConnectDescription")}</p>
         </div>
 
@@ -135,7 +138,7 @@ export default function CodexConnectClient({ token }: { token: string }) {
           <div className="space-y-4">
             <p className="text-sm text-text-muted">{t("codexVerificationInstructions")}</p>
 
-            <div className="rounded-lg border border-border bg-bg-base p-3">
+            <div className="rounded-lg border border-border bg-bg-subtle p-3">
               <p className="mb-1 text-xs text-text-muted">{t("yourCode")}</p>
               <div className="flex items-center justify-between gap-2">
                 <code className="text-lg font-semibold tracking-widest text-text-main">
@@ -179,8 +182,8 @@ export default function CodexConnectClient({ token }: { token: string }) {
 
         {status === "success" && (
           <div className="text-center">
-            <div className="mb-3 inline-flex h-12 w-12 items-center justify-center rounded-full bg-green-500/10 text-green-500">
-              <span className="material-symbols-outlined text-[26px]">check_circle</span>
+            <div className="mb-3 inline-flex h-12 w-12 items-center justify-center rounded-full bg-success-bg text-success">
+              <Icon name="check_circle" size={26} />
             </div>
             <p className="font-medium text-text-main">{t("codexConnected")}</p>
             <p className="mt-1 text-sm text-text-muted">{t("codexConnectionRegistered")}</p>
@@ -189,16 +192,16 @@ export default function CodexConnectClient({ token }: { token: string }) {
 
         {status === "error" && (
           <div className="text-center">
-            <div className="mb-3 inline-flex h-12 w-12 items-center justify-center rounded-full bg-red-500/10 text-red-500">
-              <span className="material-symbols-outlined text-[26px]">error</span>
+            <div className="mb-3 inline-flex h-12 w-12 items-center justify-center rounded-full bg-error-bg text-error">
+              <Icon name="error" size={26} />
             </div>
             <p className="mb-4 text-sm text-text-muted">{error}</p>
             <Button variant="secondary" icon="refresh" onClick={start} className="w-full">
               {t("tryAgain")}
             </Button>
           </div>
         )}
-      </div>
-    </div>
+      </Card>
+    </main>
   );
 }

src/app/docs/api-explorer/page.tsx

@@ -15,7 +15,7 @@ export default function ApiExplorerPage() {
   const t = useTranslations("docs");
   return (
     <div>
-      <h1 className="text-3xl font-bold text-text-main mb-2">{t("apiExplorerTitle")}</h1>
+      <h1 className="ci-heading text-3xl mb-2">{t("apiExplorerTitle")}</h1>
       <p className="text-text-muted mb-8">{t("apiExplorerDescription")}</p>
       <ApiExplorerClient />
     </div>