✨ 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:
@@ -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'>
|
||||
|
||||
Reference in New Issue
Block a user