fix(user-center): use the reference colour sprites on the balance and points cards

Both asset cards opened with the same solid `fa-money-bill` glyph, so the
wallet and the points card showed an identical icon and neither matched the
reference, which pairs a blue wallet mark with the balance card and an orange
coin mark with the points card.

The theme already ships both sprites — the header wallet popover and the user
center sidebar resolve to `jiosvg-money-color-2` and `jiosvg-points-color`
through the same helper. Only these two cards were still on Font Awesome.
Swapping them keeps one icon family across the user center; the existing
`em12 mr6` sizing carries over unchanged because `svg` is 1em tall.

The wallet/points icon contract test now pins both keys and fails if either
card falls back to `fa-money-bill` or `fa-coins`.

Verification: rendered both cards through a PHP stub and screenshotted them
against the real theme stylesheet — the blue wallet and orange coin render at
the same optical size as the labels. 861 widget/navigation tests pass.
This commit is contained in:
kate522 committed 2026-11-04 17:08:09 +08:00
1 parent 00ae62f62b
commit 09b1e535e4
3 files changed
+17 -2

No files matched your search

@@ -32,7 +32,7 @@ $points_signin_label = sprintf(__('签到领%s', 'jio'), $currency);
<div class="uc-asset-card uc-asset-card--points">
<div class="uc-asset-card__head flex jsb ac">
<div class="uc-asset-card__title">
<i class="fa fas fa-money-bill em12 mr6" aria-hidden="true"></i><?php echo esc_html($currency); ?>
<?php echo function_exists('jio_icon_markup') ? jio_icon_markup('jiosvg-points-color', 'em12 mr6') : ''; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?><?php echo esc_html($currency); ?>
</div>
<?php if (!empty($signin_enabled)) : ?>
<span class="uc-asset-card__head-action muted-color px12" data-jio-signin>
@@ -66,7 +66,7 @@ $mark = (string) ($charge_view['currency_mark'] ?? '元');
<div class="uc-asset-card uc-asset-card--wallet">
<div class="uc-asset-card__head flex jsb ac">
<div class="uc-asset-card__title">
<i class="fa fas fa-money-bill em12 mr6" aria-hidden="true"></i><?php esc_html_e('余额', 'jio'); ?>
<?php echo function_exists('jio_icon_markup') ? jio_icon_markup('jiosvg-money-color-2', 'em12 mr6') : ''; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?><?php esc_html_e('余额', 'jio'); ?>
</div>
<?php if ($withdraw_on) : ?>
<button type="button" class="uc-asset-card__head-action muted-color px12" data-jio-withdraw-history-open>
@@ -178,3 +178,18 @@ test('导航栏用户浮层的余额/积分磁贴与侧栏使用同一组 sprite
assert.doesNotMatch(wallet, /fa fas fa-money-bill-wave/);
assert.doesNotMatch(wallet, /fa fas fa-coins/);
});
test('余额/积分资产卡的标题图标与参考主题一致', () => {
const wallet = read('inc/helpers/user-center-renderers/credits-wallet.php');
const balance = read('inc/helpers/user-center-renderers/credits-balance.php');
// 参考主题:余额用 money-color-2,积分用 points-color,两者都是彩色 sprite。
assert.match(wallet, /jio_icon_markup\('jiosvg-money-color-2', 'em12 mr6'\)/);
assert.match(balance, /jio_icon_markup\('jiosvg-points-color', 'em12 mr6'\)/);
// 卡片标题不再退回 Font Awesome 字形。
for (const [name, source] of [['credits-wallet.php', wallet], ['credits-balance.php', balance]]) {
const title = source.slice(source.indexOf('uc-asset-card__title'), source.indexOf('uc-asset-card__title') + 400);
assert.doesNotMatch(title, /fa fas fa-money-bill|fa fas fa-coins/, name);
}
});