feat: update profile avatar colors #882
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThis change refactors the color assignment logic for avatar components throughout the codebase. It introduces a new color mapping structure that provides both light and dark shades for each color, updates the Changes
Suggested labels
Suggested reviewers
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🔭 Outside diff range comments (1)
src/components/Global/PeanutActionDetailsCard/index.tsx (1)
84-101:⚠️ Potential issueFix color contrast issue - background and text using same color.
There's a critical accessibility and usability issue in the color logic. For the fallback case (lines 92 and 100), both
backgroundColorandcolorusegetColorForUsername(recipientName).darkShade, which would make the text invisible against the background.Apply this diff to fix the contrast issue:
backgroundColor: viewType === 'SUCCESS' ? '#29CC6A' : transactionType === 'ADD_MONEY' || recipientType === 'ADDRESS' || recipientType === 'ENS' ? '#FFC900' - : getColorForUsername(recipientName).darkShade, + : getColorForUsername(recipientName).lightShade, color: viewType === 'SUCCESS' ? AVATAR_TEXT_DARK : transactionType === 'ADD_MONEY' || recipientType === 'ADDRESS' || recipientType === 'ENS' ? AVATAR_TEXT_DARK : getColorForUsername(recipientName).darkShade,This ensures proper contrast by using
lightShadefor background anddarkShadefor text color, consistent with other avatar components.
🧹 Nitpick comments (1)
src/components/AddWithdraw/components/AddWithdrawCountriesList.tsx (1)
64-65: Simplify redundant ternary and verify text contrast.The ternary operator for
coloris redundant since both branches return'black'. Also, using black text on alllightShadebackgrounds might not provide adequate contrast for all color combinations.Consider simplifying to:
backgroundColor: method.icon === ('bank' as IconName) ? '#FFC900' : getColorForUsername(method.title).lightShade, -color: method.icon === ('bank' as IconName) ? 'black' : 'black', +color: 'black',Alternatively, consider using
getColorForUsername(method.title).darkShadefor better contrast:-color: method.icon === ('bank' as IconName) ? 'black' : 'black', +color: method.icon === ('bank' as IconName) ? 'black' : getColorForUsername(method.title).darkShade,
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
src/components/AddWithdraw/components/AddWithdrawCountriesList.tsx(1 hunks)src/components/Global/PeanutActionDetailsCard/index.tsx(2 hunks)src/components/Payment/PaymentForm/index.tsx(5 hunks)src/components/Profile/AvatarWithBadge.tsx(1 hunks)src/components/TransactionDetails/TransactionAvatarBadge.tsx(1 hunks)src/components/User/UserCard.tsx(2 hunks)src/utils/color.utils.ts(3 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (5)
src/components/AddWithdraw/components/AddWithdrawCountriesList.tsx (2)
src/utils/color.utils.ts (1)
getColorForUsername(51-69)src/components/Global/Icons/Icon.tsx (1)
IconName(51-98)
src/components/Profile/AvatarWithBadge.tsx (1)
src/utils/color.utils.ts (1)
getColorForUsername(51-69)
src/components/User/UserCard.tsx (1)
src/utils/color.utils.ts (2)
getColorForUsername(51-69)AVATAR_TEXT_DARK(44-44)
src/components/Global/PeanutActionDetailsCard/index.tsx (1)
src/utils/color.utils.ts (2)
getColorForUsername(51-69)AVATAR_TEXT_DARK(44-44)
src/components/Payment/PaymentForm/index.tsx (2)
src/utils/general.utils.ts (1)
formatAmount(300-340)src/constants/zerodev.consts.ts (1)
PEANUT_WALLET_TOKEN_DECIMALS(19-19)
🔇 Additional comments (11)
src/utils/color.utils.ts (3)
7-35: LGTM! Well-structured refactor to dual-shade color system.The refactoring from single color strings to objects with
lightShadeanddarkShadeproperties provides better flexibility for avatar styling across the application.
38-38: Verify the hardcoded AVATAR_LINK_BG color value.The
AVATAR_LINK_BGis now hardcoded to'#FF90E8'instead of referencingpeanut_pink. This value doesn't match eitherpeanut_pink.lightShade('#FFD5F6') orpeanut_pink.darkShade('#FF74E2'). Please confirm this is intentional.
51-69: Excellent function refactor with proper type safety.The function now returns both color shades which provides more styling flexibility. The updated JSDoc and consistent return structure are well-implemented.
src/components/Profile/AvatarWithBadge.tsx (1)
73-77: Excellent implementation of the new dual-shade color system.The conditional styling logic properly utilizes both
lightShadefor backgrounds anddarkShadefor borders and text colors. The implementation maintains good visual hierarchy and contrast.src/components/TransactionDetails/TransactionAvatarBadge.tsx (1)
83-84: Consistent implementation of new color scheme.The changes properly utilize
lightShadefor background anddarkShadefor text color, maintaining consistency with the refactored color utility and other components.src/components/User/UserCard.tsx (2)
2-2: Good addition of the new color constant.The import of
AVATAR_TEXT_DARKaligns with the avatar color refactoring.
53-60: Excellent implementation of the new color scheme.The avatar styling correctly implements the new dual-shade color system:
- Uses
lightShadefor background anddarkShadefor text color when dealing with usernames (ensures good contrast)- Applies fixed gold background with dark text for non-username recipients
- Maintains consistent styling patterns across the codebase
src/components/Global/PeanutActionDetailsCard/index.tsx (1)
5-5: Good addition of the new color constant.The import of
AVATAR_TEXT_DARKaligns with the avatar color refactoring.src/components/Payment/PaymentForm/index.tsx (3)
33-33: Good refactoring of balance formatting logic.The removal of
floorFixedand direct use offormatAmountsimplifies the code while maintaining the same formatting behavior.Also applies to: 86-88
182-183: Correct approach for parsing formatted balance.The logic correctly handles the formatted balance string by removing commas and parsing to float for numeric comparison. This aligns well with the
formatAmountusage.
224-224: Good dependency array update.Using
peanutWalletBalanceinstead of rawbalancein the dependency array is correct since the effect logic depends on the formatted balance value.
Uh oh!
There was an error while loading. Please reload this page.