banlv/cozsweet-frontend-nextjs
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(tip): enlarge and simplify payment interface

Browse Source
This commit is contained in:
chenhang
2026-07-21 15:51:09 +08:00
parent 0381090867
commit 36d8fcf2c3
5 changed files with 96 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/_components/payment/__tests__/payment-method-selector.test.tsx
+1 -1
View File
@@ -81,7 +81,7 @@ describe("PaymentMethodSelector", () => {
expect(html).toContain('data-density="compact"');
expect(html).toContain("Payment Method");
expect(html).not.toContain("This caption is hidden");
expect(html).toContain("min-h-11");
expect(html).toContain("min-h-13");
});
it("does not render when payment method selection is unavailable", () => {
src/app/_components/payment/payment-method-selector.tsx
+4 -4
View File
@@ -54,7 +54,7 @@ export function PaymentMethodSelector({
return (
<section
className={`flex flex-col ${isCompact ? "gap-1.5" : "gap-[clamp(8px,1.852vw,10px)]"} ${className ?? ""}`.trim()}
className={`flex flex-col ${isCompact ? "gap-2" : "gap-[clamp(8px,1.852vw,10px)]"} ${className ?? ""}`.trim()}
data-density={density}
aria-labelledby="payment-method-title"
>
@@ -63,7 +63,7 @@ export function PaymentMethodSelector({
>
<h2
id="payment-method-title"
className={`m-0 font-bold leading-[1.2] text-auth-text-primary ${isCompact ? "text-sm" : "text-(length:--responsive-card-title,var(--font-size-lg))"}`}
className={`m-0 font-bold leading-[1.2] text-auth-text-primary ${isCompact ? "text-base" : "text-(length:--responsive-card-title,var(--font-size-lg))"}`}
style={{ fontFamily: "var(--font-athelas), var(--font-system)" }}
>
Payment Method
@@ -78,7 +78,7 @@ export function PaymentMethodSelector({
{paymentMethods.map((method) => {
const selected = method.channel === value;
const classes = [
`flex cursor-pointer items-center justify-center 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 ${isCompact ? "min-h-11 rounded-2xl px-2 py-1.5" : "min-h-[clamp(54px,11.481vw,62px)] rounded-(--responsive-card-radius-sm,18px) px-[clamp(12px,2.593vw,14px)] py-[clamp(9px,1.852vw,10px)]"}`,
`flex cursor-pointer items-center justify-center 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 ${isCompact ? "min-h-13 rounded-[18px] px-3 py-2" : "min-h-[clamp(54px,11.481vw,62px)] rounded-(--responsive-card-radius-sm,18px) px-[clamp(12px,2.593vw,14px)] py-[clamp(9px,1.852vw,10px)]"}`,
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)]",
@@ -105,7 +105,7 @@ export function PaymentMethodSelector({
aria-hidden="true"
width={122}
height={29}
className={`block object-contain ${isCompact ? "max-h-7 w-[min(100%,80px)]" : "max-h-8.5 w-[min(100%,92px)]"}`}
className={`block object-contain ${isCompact ? "max-h-8 w-[min(100%,92px)]" : "max-h-8.5 w-[min(100%,92px)]"}`}
/>
) : (
<span className="text-(length:--responsive-body,16px) font-bold leading-[1.1] text-[#1e1e1e]">