style(app): normalize tailwind utility syntax
This commit is contained in:
@@ -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");
|
||||
|
||||
@@ -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>
|
||||
)}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user