refactor: canonicalize TypeScript and Tailwind syntax

This commit is contained in:
2026-07-14 19:06:47 +08:00
parent 52bbc363cf
commit 836ae95940
23 changed files with 58 additions and 58 deletions
@@ -16,7 +16,7 @@ export function SubscriptionCtaButton({
...rest
}: SubscriptionCtaButtonProps) {
const classes = [
"inline-flex min-h-[clamp(48px,9.63vw,52px)] w-full cursor-pointer items-center justify-center rounded-(--radius-full,999px) border-0 bg-[linear-gradient(269deg,#ff67e0_0%,rgba(254,104,224,0.5)_20%,rgba(252,105,223,0.79)_66%,#f96ade_100%),linear-gradient(#f657a0,#f657a0)] px-(--responsive-card-padding,var(--spacing-lg)) text-(length:--responsive-body,var(--font-size-lg)) font-semibold text-white opacity-85 shadow-[0_5px_7px_0_rgba(247,89,168,0.31)] transition-[filter,transform,opacity] duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--color-accent) active:enabled:scale-98 disabled:cursor-not-allowed disabled:opacity-50",
"inline-flex min-h-[clamp(48px,9.63vw,52px)] w-full cursor-pointer items-center justify-center rounded-full border-0 bg-[linear-gradient(269deg,#ff67e0_0%,rgba(254,104,224,0.5)_20%,rgba(252,105,223,0.79)_66%,#f96ade_100%),linear-gradient(#f657a0,#f657a0)] px-(--responsive-card-padding,var(--spacing-lg)) text-(length:--responsive-body,var(--font-size-lg)) font-semibold text-white opacity-85 shadow-[0_5px_7px_0_rgba(247,89,168,0.31)] transition-[filter,transform,opacity] duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent active:enabled:scale-98 disabled:cursor-not-allowed disabled:opacity-50",
className,
]
.filter(Boolean)
@@ -4,11 +4,11 @@ import Image from "next/image";
import type { PayChannel } from "@/data/dto/payment";
const PAYMENT_METHODS: Array<{
const PAYMENT_METHODS: {
channel: PayChannel;
title: string;
logoSrc?: string;
}> = [
}[] = [
{
channel: "stripe",
title: "Stripe",
@@ -63,7 +63,7 @@ export function SubscriptionPaymentMethod({
{paymentMethods.map((method) => {
const selected = method.channel === value;
const classes = [
"flex min-h-[clamp(54px,11.481vw,62px)] cursor-pointer items-center justify-center rounded-(--responsive-card-radius-sm,18px) px-[clamp(12px,2.593vw,14px)] py-[clamp(9px,1.852vw,10px)] text-center font-[inherit] text-[#3c3b3b] transition-[border-color,box-shadow,transform] duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--color-accent) active:enabled:scale-98 disabled:cursor-not-allowed disabled:opacity-72",
"flex min-h-[clamp(54px,11.481vw,62px)] cursor-pointer items-center justify-center rounded-(--responsive-card-radius-sm,18px) px-[clamp(12px,2.593vw,14px)] py-[clamp(9px,1.852vw,10px)] text-center font-[inherit] text-[#3c3b3b] transition-[border-color,box-shadow,transform] duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent active:enabled:scale-98 disabled:cursor-not-allowed disabled:opacity-72",
selected
? "border-2 border-[#f657a0] bg-[#fff4f9] shadow-[0_8px_18px_rgba(217,47,127,0.24),0_0_0_3px_rgba(217,47,127,0.18)] -translate-y-0.5"
: "border border-[rgba(246,87,160,0.18)] bg-white shadow-[0_5px_7px_0_rgba(247,89,168,0.08)]",
@@ -90,7 +90,7 @@ export function SubscriptionPaymentMethod({
aria-hidden="true"
width={122}
height={29}
className="block max-h-[34px] w-[min(100%,92px)] object-contain"
className="block max-h-8.5 w-[min(100%,92px)] object-contain"
/>
) : (
<span className="text-(length:--responsive-body,16px) font-bold leading-[1.1] text-[#1e1e1e]">
@@ -20,7 +20,7 @@ export function SubscriptionPaymentSuccessDialog({
return (
<div
className="fixed inset-0 z-80 flex items-center justify-center bg-[rgba(0,0,0,0.45)] pb-[calc(var(--dialog-safe-margin,20px)+var(--app-safe-bottom,0px))] pl-[calc(var(--dialog-safe-margin,20px)+var(--app-safe-left,0px))] pr-[calc(var(--dialog-safe-margin,20px)+var(--app-safe-right,0px))] pt-[calc(var(--dialog-safe-margin,20px)+var(--app-safe-top,0px))]"
className="fixed inset-0 z-80 flex items-center justify-center bg-[rgba(0,0,0,0.45)] pb-[calc(var(--dialog-safe-margin,20px)+var(--app-safe-bottom,0))] pl-[calc(var(--dialog-safe-margin,20px)+var(--app-safe-left,0))] pr-[calc(var(--dialog-safe-margin,20px)+var(--app-safe-right,0))] pt-[calc(var(--dialog-safe-margin,20px)+var(--app-safe-top,0))]"
role="alertdialog"
aria-modal="true"
aria-labelledby="subscription-payment-success-title"
@@ -34,11 +34,11 @@ export function SubscriptionPaymentSuccessDialog({
</div>
<h2
id="subscription-payment-success-title"
className="m-0 mb-[clamp(7px,1.481vw,8px)] text-(length:--responsive-page-title,22px) font-bold leading-[1.2] text-(--color-text-foreground,#171717)"
className="m-0 mb-[clamp(7px,1.481vw,8px)] text-(length:--responsive-page-title,22px) font-bold leading-[1.2] text-text-foreground"
>
Payment successful
</h2>
<p className="m-0 text-(length:--responsive-body,14px) leading-[1.5] text-[#393939]">
<p className="m-0 text-(length:--responsive-body,14px) leading-normal text-[#393939]">
{content}
</p>
<button