refactor(app): migrate banner styles to tailwind

src/app/splash/components/__tests__/tailwind-components.test.tsx

@@ -1,10 +1,25 @@
 import { renderToStaticMarkup } from "react-dom/server";
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 
 import { SplashBackground } from "../splash-background";
+import { SplashButton } from "../splash-button";
 import { SplashContent } from "../splash-content";
 import { SplashLogo } from "../splash-logo";
 
+const authStateMock = vi.hoisted(() => ({
+  value: {
+    authPanelMode: "facebook",
+    isLoading: false,
+    errorMessage: null,
+    loginStatus: "notLoggedIn",
+    hasInitialized: true,
+  },
+}));
+
+vi.mock("@/stores/auth/auth-context", () => ({
+  useAuthState: () => authStateMock.value,
+}));
+
 describe("splash Tailwind components", () => {
   it("renders SplashLogo with Tailwind wrapper and image classes", () => {
     const html = renderToStaticMarkup(<SplashLogo />);
@@ -32,4 +47,31 @@ describe("splash Tailwind components", () => {
     expect(html).toContain("whitespace-pre-line");
     expect(html).toContain("Welcome to my secret hideout");
   });
+
+  it("renders SplashButton ready and loading states", () => {
+    authStateMock.value = {
+      ...authStateMock.value,
+      hasInitialized: true,
+      isLoading: false,
+    };
+    const readyHtml = renderToStaticMarkup(
+      <SplashButton onStartChat={() => undefined} />,
+    );
+
+    authStateMock.value = {
+      ...authStateMock.value,
+      hasInitialized: false,
+      isLoading: false,
+    };
+    const loadingHtml = renderToStaticMarkup(
+      <SplashButton onStartChat={() => undefined} />,
+    );
+
+    expect(readyHtml).toContain("z-[2]");
+    expect(readyHtml).toContain("max-w-[480px]");
+    expect(readyHtml).toContain("bg-[linear-gradient(to_right");
+    expect(readyHtml).toContain("Start Chatting");
+    expect(loadingHtml).toContain("disabled");
+    expect(loadingHtml).toContain("animate-spin");
+  });
 });

src/app/splash/components/splash-button.module.css

@@ -1,46 +0,0 @@
-.wrapper {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  gap: clamp(var(--spacing-md, 12px), 4.815vw, var(--spacing-26, 26px));
-  width: 100%;
-  padding: 0 clamp(var(--spacing-sm, 8px), 2.963vw, var(--spacing-lg, 16px));
-  z-index: 2;
-}
-
-.facebookButton {
-  width: 100%;
-  max-width: 480px;
-  min-height: var(--responsive-control-height, 48px);
-  padding: 0 clamp(var(--spacing-lg, 16px), 5.556vw, 30px);
-  border: 0;
-  border-radius: var(--radius-full, 999px);
-  /* 渐变色引用 tokens/colors.css 中定义的 token */
-  background: linear-gradient(
-    to right,
-    var(--color-button-gradient-start),
-    var(--color-button-gradient-end)
-  );
-  color: #ffffff;
-  font-weight: 700;
-  cursor: pointer;
-  font-style: italic;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: 1 1 auto;
-  box-shadow: 0 0 10px rgba(248, 89, 168, 0.3);
-}
-
-.facebookButton:disabled {
-  cursor: not-allowed;
-  opacity: 0.7;
-}
-
-.facebookLabel {
-  font-size: var(--responsive-section-title, var(--font-size-xxl));
-  font-weight: 700;
-  color: #ffffff;
-  white-space: nowrap;
-}

src/app/splash/components/splash-button.tsx

@@ -4,7 +4,6 @@
  */
 import { useAuthState } from "@/stores/auth/auth-context";
 import { LoadingIndicator } from "@/app/_components/core/loading-indicator";
-import styles from "./splash-button.module.css";
 
 export interface SplashButtonProps {
   onStartChat: () => void;
@@ -15,17 +14,19 @@ export function SplashButton({ onStartChat }: SplashButtonProps) {
   const isLoading = !state.hasInitialized || state.isLoading;
 
   return (
-    <div className={styles.wrapper}>
+    <div className="z-[2] flex w-full flex-row items-center justify-center gap-[clamp(var(--spacing-md,12px),4.815vw,var(--spacing-26,26px))] px-[clamp(var(--spacing-sm,8px),2.963vw,var(--spacing-lg,16px))]">
       <button
         type="button"
         onClick={onStartChat}
         disabled={isLoading}
-        className={styles.facebookButton}
+        className="inline-flex min-h-[var(--responsive-control-height,48px)] w-full max-w-[480px] flex-auto cursor-pointer items-center justify-center rounded-[var(--radius-full,999px)] border-0 bg-[linear-gradient(to_right,var(--color-button-gradient-start),var(--color-button-gradient-end))] px-[clamp(var(--spacing-lg,16px),5.556vw,30px)] font-bold italic text-white shadow-[0_0_10px_rgba(248,89,168,0.3)] disabled:cursor-not-allowed disabled:opacity-70"
       >
         {isLoading ? (
           <LoadingIndicator color="#ffffff" />
         ) : (
-          <span className={styles.facebookLabel}>Start Chatting</span>
+          <span className="whitespace-nowrap text-[var(--responsive-section-title,var(--font-size-xxl))] font-bold text-white">
+            Start Chatting
+          </span>
         )}
       </button>
     </div>