fix(styles): adjust padding and font sizes for improved layout consistency

This commit is contained in:
2026-06-24 17:55:48 +08:00
parent d6e411c8ef
commit 7701c5dbca
5 changed files with 80 additions and 40 deletions
@@ -29,8 +29,32 @@ export function VoicePackageCard({
}: VoicePackageCardProps) {
return (
<section className={styles.card}>
<header className={styles.header}>
<h2 className={styles.title}>Voice Message Package</h2>
<div className={styles.content}>
<div className={styles.copy}>
<header className={styles.header}>
<h2 className={styles.title}>Voice Message Package</h2>
</header>
<p className={styles.usage}>
<span className={styles.usedNumber}>{usedMinutes}</span>
<span className={styles.usageUnit}>min/</span>
<span className={styles.totalNumber}>{totalMinutes}</span>
<span className={styles.usageUnit}>min</span>
<span className={styles.usageText}>{"\u00a0\u00a0"}used/remaining</span>
</p>
<div className={styles.footer}>
<button
type="button"
className={styles.buyBtn}
onClick={onBuyPackage}
aria-label="Buy Package"
>
Buy Package
</button>
</div>
</div>
<div className={styles.micIcon} aria-hidden="true">
<Image
src="/images/sidebar/ic_user_voicemessage.png"
@@ -40,24 +64,6 @@ export function VoicePackageCard({
className={styles.micImage}
/>
</div>
</header>
<p className={styles.usage}>
<span className={styles.usageNumber}>
{usedMinutes}min/{totalMinutes}min
</span>
<span className={styles.usageText}> used/remaining</span>
</p>
<div className={styles.footer}>
<button
type="button"
className={styles.buyBtn}
onClick={onBuyPackage}
aria-label="Buy Package"
>
Buy Package
</button>
</div>
</section>
);