feat: Enhance event & hackathon status badge styling, improve capitalization, and refine event detail UI

[codeunia-dev]

📌 Overview

This PR updates the visual consistency and clarity of event and hackathon UI elements by improving badge styling, standardizing capitalization, and refining key sections of the event detail page.

---

🔧 Key Improvements

🎨 Status Badge Enhancements

• Updated badge color, spacing, and typography for better visual distinction.
• Standardized capitalization across all statuses (e.g., “Draft”, “Published”, “Completed”).
• Improved mobile responsiveness and alignment.

📝 UI Refinements on Event Detail Page

• Improved layout spacing and section hierarchy.
• Enhanced readability of primary information blocks.
• Updated text formatting and alignment for consistency.
• Minor cleanup of unused props and redundant markup.

🧹 Code Quality Improvements

• Consolidated badge components to reduce duplication.
• Cleaned up condition handling for status rendering.
• Improved naming conventions for clarity and maintainability.

---

🎯 Impact

• Cleaner and more professional UI across events & hackathons.
• Better UX through consistent visual language.
• More maintainable component structure going forward.

Authored by: @akshay0611

Summary by CodeRabbit

• New Features

  • Enhanced status color indicators for events and hackathons with distinct visual styling for upcoming, ongoing, and published states.

• UI/UX Improvements

  • Improved status label readability with proper capitalization.
  • Refined spacing and hover effects on event badges.
  • Reorganized sponsor section layout in hackathon details.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
codeunia	Building	Preview	Comment	Nov 24, 2025 5:35am

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

Status handling logic is refactored across event and hackathon pages by normalizing status values with toLowerCase() and expanding color mappings (live/published → green, upcoming → blue, ongoing → purple). Status text rendering now capitalizes the first letter in UI displays. Minor UI refinements and formatting adjustments are applied throughout.

Changes

Cohort / File(s)	Summary
Status Handling & Display Updates app/events/[slug]/page.tsx, app/events/page.tsx, app/hackathons/[id]/page.tsx, app/hackathons/page.tsx	Refactored getStatusColor function to normalize status input with toLowerCase() and expanded status-to-color mappings: "live" and "published" map to green gradient, "upcoming" maps to blue gradient, "ongoing" maps to purple gradient. Updated status text rendering to capitalize the first letter for UI display using .charAt(0).toUpperCase() + .slice(1).
UI & Component Refinements app/events/[slug]/page.tsx, app/events/page.tsx, app/hackathons/[id]/page.tsx, app/hackathons/page.tsx	Minor spacing, padding, and container class adjustments for UI consistency. Added hover variants to badges. Updated button text color behavior on hover. Relocated RotatingSponsorsGrid component placement within sections. Adjusted JSX formatting and whitespace throughout with no semantic changes.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Status mapping verification: Confirm color mappings are correctly applied and consistent across all four files.
• Status display capitalization: Verify the capitalization logic is properly applied in all instances where status is rendered.
• RotatingSponsorsGrid placement: Review the repositioning of the sponsors component within the hackathon details section to ensure layout and UX are not negatively affected.
• UI/spacing consistency: Cross-check that padding and spacing adjustments maintain visual consistency throughout the application.

Poem

🐰 Status quo transformed with lowercase grace,
Rainbow colors in their rightful place,
Upcoming, ongoing, live and true—
Capitalized badges in every view,
Sponsors dance in a better space!

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch enhance/event

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5cab5ea and 71ec2f2.

📒 Files selected for processing (4)

• app/events/[slug]/page.tsx (21 hunks)
• app/events/page.tsx (16 hunks)
• app/hackathons/[id]/page.tsx (27 hunks)
• app/hackathons/page.tsx (3 hunks)

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}