feat: Redesign the live event display card with animations, improved …#560
feat: Redesign the live event display card with animations, improved …#560PaulicStudios wants to merge 1 commit intodevfrom
Conversation
…styling, and enhanced interactivity.
📝 WalkthroughWalkthroughThe live-event block in the homepage client component has been refactored from a static Card-based structure to an animated, Link-wrapped Card. The new implementation simplifies subcomponent usage, adds motion animations, reorganizes live-status information into a right-aligned section, and enhances visual hierarchy while maintaining existing conditional rendering logic. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@frontend/components/HomePageClient.tsx`:
- Around line 129-142: The inline SVG used as the arrow icon in
HomePageClient.tsx should be replaced with the lucide-react ArrowRight component
and marked decorative for accessibility; add an import for ArrowRight from
'lucide-react' at the top of the file, then replace the <svg>...</svg> block
inside the rounded icon container with a usage of ArrowRight preserving the
existing className ("h-5 w-5") and adding aria-hidden="true" so screen readers
ignore it.
- Line 105: In HomePageClient's Card element (the Card with the long className
string), replace the invalid rgba(var(--primary),0.3) used in the hover shadow
with an OKLch-aware color expression such as color-mix(in oklch, var(--primary)
30%, transparent) so the shadow is rendered using the project's OKLch token, and
replace the hardcoded border-white/10 token with a semantic border token (e.g.,
border-border/10 or border-muted/10) so the border respects light/dark
foreground semantics; update the className on the Card element accordingly.
| transition={{ duration: 0.5, ease: "easeOut" }} | ||
| > | ||
| <Link href={`/events/${props.currentLiveEvent.id}`} className="group mx-auto mt-6 block w-full max-w-lg rounded-xl focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-none md:mt-8"> | ||
| <Card className="relative h-full w-full overflow-hidden border-white/10 bg-background/60 shadow-2xl backdrop-blur-xl transition-all duration-300 group-hover:-translate-y-1 group-hover:border-primary/50 group-hover:bg-background/80 group-hover:shadow-[0_20px_40px_-15px_rgba(var(--primary),0.3)] group-active:translate-y-0 group-active:scale-[0.98]"> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# Find globals.css and check --primary definition
fd -e css globals.css -x cat {}Repository: 42core-team/website
Length of output: 6617
🏁 Script executed:
# Check Tailwind version and config
fd -e json package.json -x head -50 {} && fd -e js tailwind.config.js -x cat {} && fd -e ts tailwind.config.ts -x cat {}Repository: 42core-team/website
Length of output: 5719
🏁 Script executed:
# Check if the project supports light mode
fd -e tsx -e ts frontend/components/HomePageClient.tsx -x cat {}Repository: 42core-team/website
Length of output: 45
rgba(var(--primary),0.3) is invalid CSS — the hover shadow is silently broken.
The --primary variable is defined in OKLch color space (oklch(0.205 0 0) in light mode, oklch(0.922 0 0) in dark mode), not as RGB channels or HSL values. This means rgba(var(--primary), 0.3) produces invalid CSS and the shadow renders as none.
Replace with the OKLch form to work with the project's color system:
🐛 Proposed fix
- group-hover:shadow-[0_20px_40px_-15px_rgba(var(--primary),0.3)]
+ group-hover:shadow-[0_20px_40px_-15px_oklch(var(--primary)/0.3)]Also, border-white/10 is hardcoded and invisible in light mode, which uses a dark foreground color. Use a semantic token instead:
🐛 Proposed fix
- border-white/10
+ border-border/30📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <Card className="relative h-full w-full overflow-hidden border-white/10 bg-background/60 shadow-2xl backdrop-blur-xl transition-all duration-300 group-hover:-translate-y-1 group-hover:border-primary/50 group-hover:bg-background/80 group-hover:shadow-[0_20px_40px_-15px_rgba(var(--primary),0.3)] group-active:translate-y-0 group-active:scale-[0.98]"> | |
| <Card className="relative h-full w-full overflow-hidden border-border/30 bg-background/60 shadow-2xl backdrop-blur-xl transition-all duration-300 group-hover:-translate-y-1 group-hover:border-primary/50 group-hover:bg-background/80 group-hover:shadow-[0_20px_40px_-15px_oklch(var(--primary)/0.3)] group-active:translate-y-0 group-active:scale-[0.98]"> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@frontend/components/HomePageClient.tsx` at line 105, In HomePageClient's Card
element (the Card with the long className string), replace the invalid
rgba(var(--primary),0.3) used in the hover shadow with an OKLch-aware color
expression such as color-mix(in oklch, var(--primary) 30%, transparent) so the
shadow is rendered using the project's OKLch token, and replace the hardcoded
border-white/10 token with a semantic border token (e.g., border-border/10 or
border-muted/10) so the border respects light/dark foreground semantics; update
the className on the Card element accordingly.
| <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary shadow-sm transition-all group-hover:scale-105 group-hover:bg-primary/20 group-hover:text-primary"> | ||
| <svg | ||
| className="h-5 w-5" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| viewBox="0 0 24 24" | ||
| fill="none" | ||
| stroke="currentColor" | ||
| strokeWidth="2.5" | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| > | ||
| <path d="M5 12h14M12 5l7 7-7 7" /> | ||
| </svg> | ||
| </div> |
There was a problem hiding this comment.
Replace the inline SVG with lucide-react's ArrowRight icon.
The project's components.json sets "iconLibrary": "lucide", meaning lucide-react is the designated icon library for this shadcn/ui setup. As per coding guidelines, custom components should not be created when a shadcn equivalent exists. ArrowRight from lucide-react is a direct equivalent.
Additionally, the decorative icon is missing aria-hidden="true", meaning screen readers will attempt to announce an empty label for the SVG.
♻️ Proposed fix
Add to imports at the top:
+ import { ArrowRight } from "lucide-react";Replace the icon container content:
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary shadow-sm transition-all group-hover:scale-105 group-hover:bg-primary/20 group-hover:text-primary">
- <svg
- className="h-5 w-5"
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 24 24"
- fill="none"
- stroke="currentColor"
- strokeWidth="2.5"
- strokeLinecap="round"
- strokeLinejoin="round"
- >
- <path d="M5 12h14M12 5l7 7-7 7" />
- </svg>
+ <ArrowRight className="h-5 w-5" aria-hidden="true" />
</div>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary shadow-sm transition-all group-hover:scale-105 group-hover:bg-primary/20 group-hover:text-primary"> | |
| <svg | |
| className="h-5 w-5" | |
| xmlns="http://www.w3.org/2000/svg" | |
| viewBox="0 0 24 24" | |
| fill="none" | |
| stroke="currentColor" | |
| strokeWidth="2.5" | |
| strokeLinecap="round" | |
| strokeLinejoin="round" | |
| > | |
| <path d="M5 12h14M12 5l7 7-7 7" /> | |
| </svg> | |
| </div> | |
| <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary shadow-sm transition-all group-hover:scale-105 group-hover:bg-primary/20 group-hover:text-primary"> | |
| <ArrowRight className="h-5 w-5" aria-hidden="true" /> | |
| </div> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@frontend/components/HomePageClient.tsx` around lines 129 - 142, The inline
SVG used as the arrow icon in HomePageClient.tsx should be replaced with the
lucide-react ArrowRight component and marked decorative for accessibility; add
an import for ArrowRight from 'lucide-react' at the top of the file, then
replace the <svg>...</svg> block inside the rounded icon container with a usage
of ArrowRight preserving the existing className ("h-5 w-5") and adding
aria-hidden="true" so screen readers ignore it.
1 participant
…styling, and enhanced interactivity.
Summary by CodeRabbit