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

refactor(chat): migrate unlock dialog styles to tailwind

Browse Source
This commit is contained in:
chenhang
2026-07-13 12:59:31 +08:00
parent 3752b3b729
commit bc5e80330f
5 changed files with 110 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/chat/components/insufficient-credits-dialog.tsx
+26 -19
View File
@@ -1,7 +1,5 @@
"use client";
import styles from "./insufficient-credits-dialog.module.css";
export interface InsufficientCreditsDialogProps {
open: boolean;
creditBalance: number;
@@ -25,47 +23,56 @@ export function InsufficientCreditsDialog({
return (
<div
className={styles.overlay}
className="fixed inset-0 z-[220] flex items-center justify-center bg-[rgba(0,0,0,0.52)] pb-[calc(var(--dialog-safe-margin,16px)+var(--app-safe-bottom,0px))] pl-[calc(var(--dialog-safe-margin,16px)+var(--app-safe-left,0px))] pr-[calc(var(--dialog-safe-margin,16px)+var(--app-safe-right,0px))] pt-[calc(var(--dialog-safe-margin,16px)+var(--app-safe-top,0px))]"
role="dialog"
aria-modal="true"
aria-labelledby="insufficient-credits-title"
>
<div className={styles.dialog}>
<h2 id="insufficient-credits-title" className={styles.title}>
<div className="w-full max-w-[var(--pwa-install-dialog-max-width,360px)] rounded-[var(--responsive-card-radius,36px)] border border-[rgba(246,87,160,0.16)] bg-[var(--color-page-background,#ffffff)] px-[var(--responsive-card-padding,18px)] pb-[var(--responsive-card-padding,18px)] pt-[var(--responsive-card-padding-lg,24px)] text-center shadow-[0_18px_46px_rgba(38,18,31,0.18)]">
<h2
id="insufficient-credits-title"
className="m-0 mb-2.5 text-[var(--responsive-page-title,var(--font-size-22,22px))] font-bold leading-[1.2] text-[var(--color-text-foreground,#171717)]"
>
Not enough credits
</h2>
<p className={styles.content}>
<p className="mx-[var(--spacing-md,12px)] mb-[var(--page-section-gap,18px)] mt-0 text-[var(--responsive-body,var(--font-size-lg,16px))] leading-[1.5] text-[#393939]">
Top up your credits to unlock this message and keep the moment going.
</p>
{showCreditDetail ? (
<dl className={styles.creditList}>
<div className={styles.creditItem}>
<dt>Balance</dt>
<dd>{creditBalance}</dd>
<dl className="mb-[var(--page-section-gap,18px)] grid gap-[var(--spacing-sm,8px)] rounded-[var(--responsive-card-radius-sm,22px)] bg-[#fff4f9] p-[var(--spacing-md,12px)]">
<div className="flex items-center justify-between gap-[var(--spacing-md,12px)] text-[var(--responsive-caption,var(--font-size-md,14px))] leading-[1.3] text-[#4a3b43]">
<dt className="m-0 font-medium">Balance</dt>
<dd className="m-0 text-[var(--responsive-body,var(--font-size-lg,16px))] font-extrabold text-[#f657a0]">
{creditBalance}
</dd>
</div>
<div className={styles.creditItem}>
<dt>Required</dt>
<dd>{requiredCredits}</dd>
<div className="flex items-center justify-between gap-[var(--spacing-md,12px)] text-[var(--responsive-caption,var(--font-size-md,14px))] leading-[1.3] text-[#4a3b43]">
<dt className="m-0 font-medium">Required</dt>
<dd className="m-0 text-[var(--responsive-body,var(--font-size-lg,16px))] font-extrabold text-[#f657a0]">
{requiredCredits}
</dd>
</div>
<div className={styles.creditItem}>
<dt>Still needed</dt>
<dd>{shortfallCredits}</dd>
<div className="flex items-center justify-between gap-[var(--spacing-md,12px)] text-[var(--responsive-caption,var(--font-size-md,14px))] leading-[1.3] text-[#4a3b43]">
<dt className="m-0 font-medium">Still needed</dt>
<dd className="m-0 text-[var(--responsive-body,var(--font-size-lg,16px))] font-extrabold text-[#f657a0]">
{shortfallCredits}
</dd>
</div>
</dl>
) : null}
<div className={styles.actions}>
<div className="flex w-full gap-[var(--spacing-md,12px)]">
<button
type="button"
className={`${styles.button} ${styles.secondary}`}
className="flex min-h-[var(--pwa-button-height,44px)] flex-auto cursor-pointer items-center justify-center rounded-[var(--radius-bottom-sheet,28px)] border-0 bg-[var(--color-text-secondary,#9e9e9e)] text-[var(--responsive-body,var(--font-size-lg,16px))] font-bold text-[var(--color-pwa-button-text,#ffffff)] focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#f657a0]"
onClick={onClose}
>
Later
</button>
<button
type="button"
className={`${styles.button} ${styles.primary}`}
className="flex min-h-[var(--pwa-button-height,44px)] flex-auto cursor-pointer items-center justify-center rounded-[var(--radius-bottom-sheet,28px)] border-0 bg-[linear-gradient(90deg,#ff67e0_0%,#ff52a2_100%)] text-[var(--responsive-body,var(--font-size-lg,16px))] font-bold text-[var(--color-pwa-button-text,#ffffff)] shadow-[0_6px_14px_rgba(246,87,160,0.28)] focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#f657a0]"
onClick={onConfirm}
>
Top up now