refactor: canonicalize TypeScript and Tailwind syntax
This commit is contained in:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user