Fix: Invite friend page #4195
Fix: Invite friend page #4195
Conversation
WalkthroughThe invite_friend.html template was redesigned with enhanced styling, improved layout, and a new "How It Works" section. The referral link copy interaction now uses a custom toast notification instead of an alert. GitHub and Figma icon links were commented out, and their icons updated with color transitions. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant InviteFriendPage
User->>InviteFriendPage: Loads invite_friend.html
User->>InviteFriendPage: Clicks "Copy" on referral link
InviteFriendPage-->>User: Shows toast notification ("Copied!")
User->>InviteFriendPage: Clicks "Invite via Email"
InviteFriendPage-->>User: Initiates email invitation flow
Assessment against linked issues
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 (
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
website/templates/invite_friend.html (3)
21-28: Remove commented-out legacy icon linksThe GitHub and Figma icon markup has been commented out. To keep the template clean and maintainable, remove these commented blocks instead of leaving legacy code in place.
43-51: Enhance accessibility for referral link input and copy buttonAdd ARIA attributes to improve screen reader support, for example:
<input ... aria-label="Your personal referral link"> <button ... aria-label="Copy referral link">This ensures assistive technologies announce the elements properly.
92-109: Improve clipboard error handling and toast accessibilityWrap
navigator.clipboard.writeTextin atry/catchor.catch()to handle failures, and add ARIA roles to the toast:navigator.clipboard.writeText(copyText.value) + .catch(err => console.error('Copy failed:', err)); ... - document.body.appendChild(toast); + toast.setAttribute('role', 'status'); + toast.setAttribute('aria-live', 'polite'); + document.body.appendChild(toast);This makes the toast accessible to screen readers and robust against permission errors.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
website/templates/invite_friend.html(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (4)
- GitHub Check: Run Tests
- GitHub Check: Analyze (python)
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: docker-test
🔇 Additional comments (4)
website/templates/invite_friend.html (4)
29-35: Approve updated header section stylingThe new red header section with rounded corners and enhanced shadow improves the visual hierarchy and aligns with the design objectives.
56-60: Approve divider section stylingThe divider with centered text clearly separates the referral link from email invites and uses utility classes effectively.
63-68: Verify URL-encoding of dynamic fields in mailto linkWhile
{{ referral_link|urlencode }}is encoded, ensure all dynamic fields like{{ user.username }}are also URL-encoded to prevent malformed links when they contain special characters.
71-85: Approve "How It Works" informational cardThe new reward info card is well-designed, accessible, and communicates the referral process effectively.
fixes #4194
Description
Fixed the entire page, separated all three section and added a toast when user copy the invite link. And added a info how things work.
Before:
After:
2025-05-06.01-22-08.mp4
Summary by CodeRabbit
New Features
Style
Refactor