feat(home): update game icons and improve invite card layout#90
Conversation
fix(contact): update LinkedIn link for social media fix(footer): adjust navigation behavior for footer links fix(challenges): replace chart icon with todo list icon fix(streak): correct flame icon color styling
There was a problem hiding this comment.
Pull request overview
Updates several UI components across the app to refresh iconography and adjust navigation/layout behavior, primarily on the Home experience and Landing Page contact section.
Changes:
- Updated multiple Home widgets (weekly challenges, brain games, streak) to use new Lucide icons/styling.
- Reworked the Home “Invite Friends” card layout and updated the copied link.
- Adjusted Footer logo click behavior and updated the Landing Page LinkedIn URL.
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 9 comments.
Show a summary per file
| File | Description |
|---|---|
| crackcode/client/src/components/home/StreakCalendar.jsx | Adjusts flame icon styling (but introduces an unused import). |
| crackcode/client/src/components/home/RecommendedChallenges.jsx | Makes “View All Recommendations” button navigate to /caselog. |
| crackcode/client/src/components/home/ProfileCard.jsx | Refines badge info messaging with icons and cleans up console logging. |
| crackcode/client/src/components/home/InviteCard.jsx | Updates invite link and changes layout/text for the invite card. |
| crackcode/client/src/components/home/ChallengesThisWeek.jsx | Replaces chart emoji/icon with a todo-list Lucide icon. |
| crackcode/client/src/components/home/BrainBreaker.jsx | Replaces game emojis with Lucide icons and tweaks header/icon presentation. |
| crackcode/client/src/components/common/Footer.jsx | Changes logo click behavior (route list + scroll-to-top behavior). |
| LandingPage/client/src/components/contact-section.jsx | Updates LinkedIn link to the company page. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const { theme } = useTheme() | ||
| const [copied, setCopied] = useState(false); | ||
| const inviteLink = 'https://codedetectives.com/invite/abc123xyz'; | ||
| const inviteLink = 'https://app.crackcodehq.com'; | ||
| const friendsInvited = 3; | ||
| const bonusPoints = 450; |
There was a problem hiding this comment.
theme, friendsInvited, and bonusPoints are currently unused (the stats block is commented out). Either re-enable the stats UI or remove these variables to avoid lint warnings and dead code.
| </p> | ||
| <div className='flex flex-row md:col-span-1 gap-6'> | ||
| <div> | ||
| <h3 className="flex items-center justify-baseline gap-2 text-lg font-bold mb-1"> |
There was a problem hiding this comment.
justify-baseline isn’t a valid Tailwind utility, so it will be ignored and may cause misalignment. Use a valid utility (e.g., items-baseline, justify-start, etc.) depending on the intended layout.
| <h3 className="flex items-center justify-baseline gap-2 text-lg font-bold mb-1"> | |
| <h3 className="flex items-center justify-start gap-2 text-lg font-bold mb-1"> |
| completed: it.completed || 0, | ||
| total: it.total || 1, | ||
| icon: '📊', | ||
| icon: <ListTodo />, |
There was a problem hiding this comment.
icon: <ListTodo /> relies on surrounding text-* classes for sizing, but Lucide SVGs use explicit width/height (default 24px) so they won’t scale with text-3xl. Pass an explicit size or className (w/h) to ListTodo (and/or wrap with a styled icon component) to ensure consistent icon sizing.
| icon: <ListTodo />, | |
| icon: <ListTodo size={24} />, |
| > | ||
| <div className='flex justify-between items-start w-full'> | ||
| <span className='text-4xl'>{game.icon}</span> | ||
| <span className='text-4xl' style={{ color: game.color }}> |
There was a problem hiding this comment.
The game icons are wrapped in a text-4xl span, but Lucide SVGs won’t scale with font-size by default (they keep their default width/height). Consider setting size/className on the icon components stored in GAMES so the displayed icons match the intended visual size.
| <span className='text-4xl' style={{ color: game.color }}> | |
| <span className='[&>svg]:w-10 [&>svg]:h-10' style={{ color: game.color }}> |
| const footerAtBottom = ['/', '/login', '/email-verify', '/reset-password', '/gamer-profile'] | ||
| const footerAtEase = !footerAtBottom.includes(location.pathname); | ||
|
|
||
| const handleLogoClick = () => { | ||
| if (!footerAtEase) { | ||
| navigate('/'); | ||
| } else { | ||
| navigate('/home'); | ||
| window.scrollTo({ top: 0, behavior: 'smooth' }); | ||
| } |
There was a problem hiding this comment.
footerAtBottom no longer includes /privacy, /terms, and /contact, so on those routes handleLogoClick now only scrolls to top instead of navigating home. This is inconsistent with the Header logo behavior (Header treats those routes as “auth” and navigates to /). Please align Footer’s route list/logic with Header (or document the intentional difference) to avoid confusing navigation.
| import { Calendar, Flame } from 'lucide-react'; | ||
| import axios from 'axios'; | ||
| import { AppContent } from '../../context/userauth/authenticationContext'; | ||
| import { color } from 'framer-motion'; |
There was a problem hiding this comment.
Remove the unused color import from framer-motion. Keeping an unused (and potentially non-existent) named export here is likely to fail lint/build and it isn’t referenced anywhere in this component.
| import { color } from 'framer-motion'; |
| import { useState, useEffect } from 'react'; | ||
| import { useTheme } from '../../context/theme/ThemeContext'; | ||
| import { Calendar, CheckCircle2, Clock, Flame, ArrowRight, ChartColumnBig, Scissors, Pyramid, Cog } from 'lucide-react'; | ||
| import { Calendar, CheckCircle2, Clock, Flame, ArrowRight, ListTodo } from 'lucide-react'; |
There was a problem hiding this comment.
Clock is imported from lucide-react but never used in this file. Please remove it to avoid unused import lint failures.
| import { Calendar, CheckCircle2, Clock, Flame, ArrowRight, ListTodo } from 'lucide-react'; | |
| import { Calendar, CheckCircle2, Flame, ArrowRight, ListTodo } from 'lucide-react'; |
| @@ -1,29 +1,29 @@ | |||
| import { useState } from 'react'; | |||
| import { Zap, X, ExternalLink } from 'lucide-react'; | |||
| import { Zap, X, ExternalLink, Gamepad2 ,FileDigit, SquarePen, BrickWallShield } from 'lucide-react'; | |||
There was a problem hiding this comment.
Zap is imported from lucide-react but no longer used after switching the header icon to Gamepad2. Remove the unused import to avoid lint failures.
| import { Zap, X, ExternalLink, Gamepad2 ,FileDigit, SquarePen, BrickWallShield } from 'lucide-react'; | |
| import { X, ExternalLink, Gamepad2, FileDigit, SquarePen, BrickWallShield } from 'lucide-react'; |
| import { Mail, Link, Link2, Copy, CheckCircle2 } from 'lucide-react'; | ||
| import Button from '../ui/Button'; |
There was a problem hiding this comment.
Mail, Link, and Button are imported but never used in this component. Please remove unused imports to avoid ESLint no-unused-vars/unused import failures and keep the file clean.
| import { Mail, Link, Link2, Copy, CheckCircle2 } from 'lucide-react'; | |
| import Button from '../ui/Button'; | |
| import { Link2, Copy, CheckCircle2 } from 'lucide-react'; |
fix(contact): update LinkedIn link for social media
fix(footer): adjust navigation behavior for footer links
fix(challenges): replace chart icon with todo list icon
fix(streak): correct flame icon color styling