style(app): normalize tailwind utility syntax

This commit is contained in:
2026-07-13 13:17:16 +08:00
parent aff7f80206
commit b89bde1b55
37 changed files with 143 additions and 143 deletions
@@ -24,7 +24,7 @@ describe("splash Tailwind components", () => {
it("renders SplashLogo with Tailwind wrapper and image classes", () => {
const html = renderToStaticMarkup(<SplashLogo />);
expect(html).toContain("z-[2]");
expect(html).toContain("z-2");
expect(html).toContain("inline-flex");
expect(html).toContain("block h-auto w-auto");
expect(html).toContain("%2Fimages%2Fsplash%2Fic-logo-home.png");
@@ -43,7 +43,7 @@ describe("splash Tailwind components", () => {
const html = renderToStaticMarkup(<SplashContent />);
expect(html).toContain("flex flex-col gap-md");
expect(html).toContain("font-[var(--font-athelas)]");
expect(html).toContain("font-(family-name:--font-athelas)");
expect(html).toContain("whitespace-pre-line");
expect(html).toContain("Welcome to my secret hideout");
});
@@ -67,8 +67,8 @@ describe("splash Tailwind components", () => {
<SplashButton onStartChat={() => undefined} />,
);
expect(readyHtml).toContain("z-[2]");
expect(readyHtml).toContain("max-w-[480px]");
expect(readyHtml).toContain("z-2");
expect(readyHtml).toContain("max-w-120");
expect(readyHtml).toContain("bg-[linear-gradient(to_right");
expect(readyHtml).toContain("Start Chatting");
expect(loadingHtml).toContain("disabled");
+3 -3
View File
@@ -14,17 +14,17 @@ export function SplashButton({ onStartChat }: SplashButtonProps) {
const isLoading = !state.hasInitialized || state.isLoading;
return (
<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))]">
<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="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"
className="inline-flex min-h-(--responsive-control-height,48px) w-full max-w-120 flex-auto cursor-pointer items-center justify-center rounded-(--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="whitespace-nowrap text-[var(--responsive-section-title,var(--font-size-xxl))] font-bold text-white">
<span className="whitespace-nowrap text-(length:--responsive-section-title,var(--font-size-xxl)) font-bold text-white">
Start Chatting
</span>
)}
+2 -2
View File
@@ -6,8 +6,8 @@ const APOSTROPHE = "'";
export function SplashContent() {
return (
<div className="z-[2] flex flex-col gap-md">
<h1 className="m-0 whitespace-pre-line text-left font-[var(--font-athelas)] text-[clamp(28px,7.8vw,30px)] font-bold italic leading-[1.28] text-white">
<div className="z-2 flex flex-col gap-md">
<h1 className="m-0 whitespace-pre-line text-left font-(family-name:--font-athelas) text-[clamp(28px,7.8vw,30px)] font-bold italic leading-[1.28] text-white">
Welcome to my secret hideout~
{"\n"}It{APOSTROPHE}s just the two of us now.
{"\n"}Feel free to whisper your
+1 -1
View File
@@ -2,7 +2,7 @@ import Image from "next/image";
export function SplashLogo() {
return (
<div className="z-[2] inline-flex">
<div className="z-2 inline-flex">
<Image
src="/images/splash/ic-logo-home.png"
alt="cozsweet"