fix(styles): adjust padding and font sizes for improved layout consistency
This commit is contained in:
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user