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

fix(subscription): align selected payment method styles

Browse Source
This commit is contained in:
chenhang
2026-07-13 17:20:12 +08:00
parent cd0351b923
commit eba01fe637
2 changed files with 13 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/subscription/components/__tests__/tailwind-components.test.tsx
+10 -5
View File
@@ -62,11 +62,16 @@ describe("subscription Tailwind components", () => {
expect(html.indexOf('aria-label="GCash"')).toBeLessThan(
html.indexOf('aria-label="Stripe"'),
);
expect(html).toContain('aria-pressed="true"');
expect(html).toContain("border-[#d92f7f]");
expect(html).toContain("bg-[#fff4f9]");
expect(html).toContain("0_0_0_3px_rgba(217,47,127,0.18)");
expect(html).toContain("-translate-y-0.5");
const selectedButton = html.match(
/<button[^>]*aria-pressed="true"[^>]*>/,
)?.[0];
expect(selectedButton).toBeDefined();
expect(selectedButton).toContain("border-[#f657a0]");
expect(selectedButton).not.toContain("border-[rgba(246,87,160,0.18)]");
expect(selectedButton).toContain("bg-[#fff4f9]");
expect(selectedButton).not.toContain("bg-white");
expect(selectedButton).toContain("0_0_0_3px_rgba(217,47,127,0.18)");
expect(selectedButton).toContain("-translate-y-0.5");
expect(html).toContain("/images/subscription/gcash-logo.svg");
});
src/app/subscription/components/subscription-payment-method.tsx
+3 -3
View File
@@ -63,10 +63,10 @@ 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) border border-[rgba(246,87,160,0.18)] bg-white px-[clamp(12px,2.593vw,14px)] py-[clamp(9px,1.852vw,10px)] text-center font-[inherit] text-[#3c3b3b] shadow-[0_5px_7px_0_rgba(247,89,168,0.08)] 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-(--color-accent) active:enabled:scale-98 disabled:cursor-not-allowed disabled:opacity-72",
selected
? "border-2 border-[#d92f7f] 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-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)]",
]
.filter(Boolean)
.join(" ");