style(Account UX): resilient binding layout, copyable popovers, pastel header, and custom pay colors

- AccountManagement.js
  - Prevent action button from shifting when account IDs are long by adding gap, min-w-0, and flex-shrink-0; keep buttons in a fixed position.
  - Add copyable Popover for account identifiers (email/GitHub/OIDC/Telegram/LinuxDO) using Typography.Paragraph with copyable; reveal full text on hover.
  - Ensure ellipsis works by rendering the popover trigger as `block max-w-full truncate`.
  - Import Popover and wire up `renderAccountInfo` across all binding rows.

- UserInfoHeader.js
  - Apply unified `with-pastel-balls` background to match PricingVendorIntro.
  - Remove legacy absolute-positioned circles and top gradient bar to avoid visual overlap.

- RechargeCard.jsx
  - Colorize non-Alipay/WeChat/Stripe payment icons using backend `pay_methods[].color`; fallback to `var(--semi-color-text-2)`.
  - Add `showClear` to the redemption code input for quicker clearing.

Notes:
- No linter errors introduced.
- i18n strings and behavior remain unchanged except for improved UX and visual consistency.
This commit is contained in:
t0ng7u
2025-08-17 11:45:55 +08:00
parent a6ad49dba0
commit c123ea3179
8 changed files with 208 additions and 157 deletions

View File

@@ -224,7 +224,7 @@ const RechargeCard = ({
) : payMethod.type === 'stripe' ? (
<SiStripe size={24} color="#635BFF" />
) : (
<CreditCard size={24} className='text-slate-500' />
<CreditCard size={24} color={payMethod.color || 'var(--semi-color-text-2)'} />
)}
</div>
<div className='text-sm font-medium text-slate-700 dark:text-slate-200'>{payMethod.name}</div>
@@ -269,6 +269,7 @@ const RechargeCard = ({
onChange={(value) => setRedemptionCode(value)}
className='!rounded-lg'
prefix={<IconGift />}
showClear
/>
<div className='flex flex-col sm:flex-row gap-2'>