improve background colour and overall visual heirerchy of dashboard…#66
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Review limit reached
Next review available in: 54 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (4)
📝 WalkthroughWalkthroughThe dashboard page, quick-action card, and recent-activity card components were restyled with new visual elements (animated background, glow effects, progress bars) and updated props. A CSS pulse-line animation was added. Separately, module card and content lookup logic were updated to support topics represented as strings or objects. ChangesDashboard UI Redesign
Estimated code review effort: 3 (Moderate) | ~25 minutes Topic Entry Format Compatibility
Estimated code review effort: 2 (Simple) | ~10 minutes Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ 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: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
lib/content/index.ts (1)
68-74: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick winFix
no-explicit-anyby wideningSyllabusModule.topicstype instead of casting.CI is failing (
@typescript-eslint/no-explicit-any) at Line 105.SyllabusModule.topics(Line 73) is still typed asTopic[], forcing the(item as any).idcast. Widening toArray<Topic | string>lets thetypeofcheck narrow naturally, matching howgetTopicById's downstream consumer (lib/ai/topic-service.ts) andModuleCardboth need to handle mixed string/object topics.🔧 Proposed fix
- topics?: Topic[]; + topics?: Array<Topic | string>;- const topic = topics.find((item) => { - if (typeof item === "string") { - return item === topicId; - } - return (item as any).id === topicId; - }); + const topic = topics.find((item) => + typeof item === "string" ? item === topicId : item.id === topicId + );Also applies to: 101-115
Sources: Linters/SAST tools, Pipeline failures
components/syllabus/module-card.tsx (1)
23-32: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick winFix
no-explicit-anyby widening thetopicstype instead of casting.CI is failing (
@typescript-eslint/no-explicit-any) at Line 109 and Line 112. The root cause is thatModuleCardProps.module.topicsis still typed asTopic[](Line 29) even though the code now expects entries that can be strings. Widening the type letstypeof topic === "string"narrow naturally withoutanycasts.🔧 Proposed fix
- topics?: Topic[]; + topics?: Array<Topic | string>;- {(module.topics || []).map((topic, index) => { - const isString = typeof topic === "string"; - const topicId = isString ? (topic as string) : (topic as any).id; - const topicTitle = isString - ? (topic as string) - : (topic as any).title; + {(module.topics || []).map((topic, index) => { + const topicId = typeof topic === "string" ? topic : topic.id; + const topicTitle = typeof topic === "string" ? topic : topic.title;Note: this same
Topic[]typing exists onSyllabusModule.topicsinlib/content/index.ts(the upstream data contract), so consider updating both consistently.Also applies to: 107-126
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@components/syllabus/module-card.tsx` around lines 23 - 32, The `ModuleCardProps.module.topics` type is too narrow and is forcing `any` casts in `ModuleCard`, so widen the `topics` element type to allow both strings and topic objects and let the `typeof topic === "string"` check narrow it naturally. Update the `ModuleCardProps` definition and keep the upstream `SyllabusModule.topics` contract in `lib/content/index.ts` consistent with the same union type so the render logic at `ModuleCard` can stop using `any` at the topic access sites.Sources: Linters/SAST tools, Pipeline failures
🧹 Nitpick comments (2)
components/dashboard/quick-action-card.tsx (1)
22-38: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win
colorVariantnames don't match their rendered colors.
"indigo"renders purple-500 classes and"purple"renders amber-500 classes (wrapper, iconBox, and glow). Consumers pickingcolorVariant="purple"for the AI Tutor card will get amber, not purple — confusing given the type nameColorVariant.🎨 Proposed fix to align names with colors
indigo: { - wrapper: "hover:border-purple-500/30 focus-visible:ring-purple-500", - iconBox: "bg-purple-500/10 text-purple-400 border-purple-500/20", + wrapper: "hover:border-indigo-500/30 focus-visible:ring-indigo-500", + iconBox: "bg-indigo-500/10 text-indigo-400 border-indigo-500/20", }, emerald: { wrapper: "hover:border-emerald-500/30 focus-visible:ring-emerald-500", iconBox: "bg-emerald-500/10 text-emerald-400 border-emerald-500/20", }, purple: { - wrapper: "hover:border-amber-500/30 focus-visible:ring-amber-500", - iconBox: "bg-amber-500/10 text-amber-400 border-amber-500/20", + wrapper: "hover:border-purple-500/30 focus-visible:ring-purple-500", + iconBox: "bg-purple-500/10 text-purple-400 border-purple-500/20", },and update the glow color ternary (lines 50-57) accordingly.
Also applies to: 49-58
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@components/dashboard/quick-action-card.tsx` around lines 22 - 38, The ColorVariant mappings in quick-action-card are mismatched, so the variant names do not match the colors they render. Update the indigo and purple entries in the variant map used by QuickActionCard so each name consistently uses the expected Tailwind color classes for wrapper, iconBox, and glow. Also adjust the glow color ternary in QuickActionCard to follow the same corrected naming, ensuring consumers of colorVariant receive the intended color.components/syllabus/module-card.tsx (1)
116-119: 🎯 Functional Correctness | 🔵 Trivial | 💤 Low valuePotential
undefinedin URL if object topic lacksid.If an object-shaped topic entry is missing
id,topicIdisundefined, andencodeURIComponent(topicId)produces the literal string"undefined"in the href, silently breaking the link. Low risk given current data but worth a defensive check given the newly-loosened topic shape.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@components/syllabus/module-card.tsx` around lines 116 - 119, The topic link built in module-card.tsx can generate a broken URL when an object-shaped topic has no id, because encodeURIComponent(topicId) turns undefined into the literal string "undefined". Update the href logic in the topic rendering path to handle a missing topicId defensively in the same area as the key={topicId || `topic-${index}`} usage, either by omitting the query parameter or falling back to a safe value before building the /rgpv/.../ai link.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@components/dashboard/recent-activity-card.tsx`:
- Around line 30-43: The theme-specific class variables in RecentActivityCard
are computed but not applied, so the `theme` prop does not fully affect the card
styling. Update the `RecentActivityCard` render to use `glowBorderClass`,
`iconBgClass`, and `trackBgClass` on the appropriate wrapper, icon, and progress
track elements, and keep the existing `barBgClass`, `dotClass`, and
`statusDotClass` usage aligned with the same theme logic.
---
Outside diff comments:
In `@components/syllabus/module-card.tsx`:
- Around line 23-32: The `ModuleCardProps.module.topics` type is too narrow and
is forcing `any` casts in `ModuleCard`, so widen the `topics` element type to
allow both strings and topic objects and let the `typeof topic === "string"`
check narrow it naturally. Update the `ModuleCardProps` definition and keep the
upstream `SyllabusModule.topics` contract in `lib/content/index.ts` consistent
with the same union type so the render logic at `ModuleCard` can stop using
`any` at the topic access sites.
---
Nitpick comments:
In `@components/dashboard/quick-action-card.tsx`:
- Around line 22-38: The ColorVariant mappings in quick-action-card are
mismatched, so the variant names do not match the colors they render. Update the
indigo and purple entries in the variant map used by QuickActionCard so each
name consistently uses the expected Tailwind color classes for wrapper, iconBox,
and glow. Also adjust the glow color ternary in QuickActionCard to follow the
same corrected naming, ensuring consumers of colorVariant receive the intended
color.
In `@components/syllabus/module-card.tsx`:
- Around line 116-119: The topic link built in module-card.tsx can generate a
broken URL when an object-shaped topic has no id, because
encodeURIComponent(topicId) turns undefined into the literal string "undefined".
Update the href logic in the topic rendering path to handle a missing topicId
defensively in the same area as the key={topicId || `topic-${index}`} usage,
either by omitting the query parameter or falling back to a safe value before
building the /rgpv/.../ai link.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 3f777459-a26c-4d45-8eb3-28c7d598e014
📒 Files selected for processing (6)
app/dashboard/page.tsxapp/globals.csscomponents/dashboard/quick-action-card.tsxcomponents/dashboard/recent-activity-card.tsxcomponents/syllabus/module-card.tsxlib/content/index.ts
| const glowBorderClass = isCyan | ||
| ? "group-hover:border-cyan-500/30" | ||
| : "group-hover:border-orange-500/30"; | ||
| const iconBgClass = isCyan | ||
| ? "bg-cyan-500/10 text-cyan-400 border-cyan-500/20" | ||
| : "bg-orange-500/10 text-orange-400 border-orange-500/20"; | ||
| const trackBgClass = "bg-zinc-800/50"; | ||
| const barBgClass = isCyan | ||
| ? "bg-cyan-400 shadow-[0_0_15px_rgba(34,211,238,0.56)]" | ||
| : "bg-orange-400 shadow-[0_0_15px_rgba(251,146,60,0.56)]"; | ||
| const dotClass = isCyan | ||
| ? "bg-white shadow-[0_0_10px_rgba(34,211,238,1)]" | ||
| : "bg-white shadow-[0_0_10px_rgba(251,146,60,1)]"; | ||
| const statusDotClass = isCyan ? "bg-cyan-400" : "bg-orange-400"; |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Unused theme classes leave styling incomplete.
Static analysis flags glowBorderClass, iconBgClass, and trackBgClass as unused — they're computed but never applied, so the icon background/border and hover glow-border don't actually reflect the theme prop; only the progress bar/dot/status-dot do.
🎨 Proposed fix to apply the unused classes
className={`group relative flex flex-col justify-between overflow-hidden rounded-[20px] border border-zinc-200/80 bg-white p-5 shadow-[0_8px_24px_rgba(149,157,165,0.15)] hover:border-blue-200 hover:shadow-[0_8px_24px_rgba(96,165,250,0.2)] hover:-translate-y-1 transition-all duration-300 dark:bg-slate-900/60 dark:border-blue-400/15 dark:bg-gradient-to-b dark:from-white/[0.02] dark:to-transparent dark:shadow-[0_8px_32px_0_rgba(0,0,0,0.2)] dark:hover:shadow-[0_15px_40px_rgba(0,0,0,0.4)] dark:hover:border-blue-400/30 focus-visible:outline-none focus-visible:ring-2 flex-1 h-full ${glowBorderClass}`} <div
- className={`flex h-[42px] w-[42px] shrink-0 items-center justify-center rounded-[12px] border border-zinc-200 bg-zinc-50 dark:border-white/[0.08] dark:bg-[`#0c1017`] dark:shadow-inner transition-colors ${isCyan ? "text-cyan-600 dark:text-cyan-400" : "text-orange-600 dark:text-orange-400"}`}
+ className={`flex h-[42px] w-[42px] shrink-0 items-center justify-center rounded-[12px] border dark:shadow-inner transition-colors ${iconBgClass}`}Also applies to: 54-56, 84-84
🧰 Tools
🪛 GitHub Actions: CI Pipeline / 0_Format · Lint · Typecheck · Build.txt
[warning] 30-9: ESLint @typescript-eslint/no-unused-vars: 'glowBorderClass' is assigned a value but never used.
[warning] 33-9: ESLint @typescript-eslint/no-unused-vars: 'iconBgClass' is assigned a value but never used.
[warning] 36-9: ESLint @typescript-eslint/no-unused-vars: 'trackBgClass' is assigned a value but never used.
🪛 GitHub Actions: CI Pipeline / Format · Lint · Typecheck · Build
[warning] 30-9: ESLint @typescript-eslint/no-unused-vars: 'glowBorderClass' is assigned a value but never used.
[warning] 33-9: ESLint @typescript-eslint/no-unused-vars: 'iconBgClass' is assigned a value but never used.
[warning] 36-9: ESLint @typescript-eslint/no-unused-vars: 'trackBgClass' is assigned a value but never used.
🪛 GitHub Check: Format · Lint · Typecheck · Build
[warning] 36-36:
'trackBgClass' is assigned a value but never used
[warning] 33-33:
'iconBgClass' is assigned a value but never used
[warning] 30-30:
'glowBorderClass' is assigned a value but never used
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@components/dashboard/recent-activity-card.tsx` around lines 30 - 43, The
theme-specific class variables in RecentActivityCard are computed but not
applied, so the `theme` prop does not fully affect the card styling. Update the
`RecentActivityCard` render to use `glowBorderClass`, `iconBgClass`, and
`trackBgClass` on the appropriate wrapper, icon, and progress track elements,
and keep the existing `barBgClass`, `dotClass`, and `statusDotClass` usage
aligned with the same theme logic.
Source: Linters/SAST tools
🎉 Congratulations @nitinmohan18!Thank you for contributing to HyperLearningTech. Your pull request has been successfully merged into main. 📦 Merge Summary
🚀 Keep Contributing
Thank you for helping make HyperLearningTech better. Happy Coding! 🚀 |
1 participant
Pull Request
Summary
Upgraded the dashboard cards (
QuickActionCard,RecentActivityCard, and Welcome Banner) to a premium SaaS aesthetic. This completely resolves the "flat" feeling in light mode and introduces an authentic, contact-section-inspired glassmorphism in dark mode.Related Issue
Closes #
Type of Change
What Changed?
bg-slate-900/60andbackdrop-blur-2xleffect, paired with a glowing blue-tinted border (border-blue-400/15) to perfectly match the premium contact page vibe.bg-whitebase and adding a much deeper, diffuse drop shadow (0 8px 24px rgba(149,157,165,0.15)), giving the cards actual physical depth over the wavy background.Screenshots (UI Changes Only)
(Attach before/after screenshots of the dashboard in both Light Mode and Dark Mode here)
Testing
Checklist
Before requesting a review, confirm the following:
main.npx prettier --write <file>).npm run format:checkpasses.npm run lintpasses.npm run typecheckpasses.npm run buildpasses.Additional Notes
These changes heavily leverage Tailwind's arbitrary values for precise box-shadows and border opacities to achieve a tier-1 SaaS aesthetic similar to Vercel and Linear.
Summary by CodeRabbit
New Features
Bug Fixes
Style