Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Conversation

@marcusljf
Copy link
Collaborator

@marcusljf marcusljf commented Oct 29, 2025

Updated the overview stat cards to match the current designs.

CleanShot 2025-10-29 at 08 52 19@2x

Summary by CodeRabbit

Style

  • Enhanced stat card layouts with new visual icons for improved clarity
  • Refined typography sizing and spacing for better visual consistency
  • Improved alignment and positioning of supplementary data labels

Updated the overview stat cards to match the current designs.
@vercel
Copy link
Contributor

vercel bot commented Oct 29, 2025

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

Project Deployment Preview Updated (UTC)
dub Ready Ready Preview Oct 29, 2025 4:02pm

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Oct 29, 2025

Walkthrough

The PR updates stat card components in the partner dashboard to display icons alongside titles, replacing text-centric layouts with icon-inclusive designs. It adds icon imports (CursorRays, InvoiceDollar, UserPlus) and restructures both StatCard and StatCardSimple with iconMap definitions, adjusted typography scaling, and repositioned data labels.

Changes

Cohort / File(s) Change Summary
Stat Card Icon Integration
apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/[programSlug]/(enrolled)/page-client.tsx
Added imports for CursorRays, InvoiceDollar, and UserPlus icons; introduced iconMap and Icon component to StatCardSimple and StatCard; refactored layout from text-centric vertical stack to horizontal icon-and-text arrangement; adjusted typography from text-3xl to text-xl for total values; repositioned all-time data labels from bottom-right to right-6/top-4 offset; added icon container styling and padding adjustments

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

  • Single file modification with consistent, repetitive pattern changes across two related components (StatCard and StatCardSimple)
  • Icon integration and layout restructuring are straightforward visual/structural changes
  • Minor positioning and typography adjustments are low-risk cosmetic refinements

Possibly related PRs

  • Updates for dub.co pricing page #2680: Updates icon exports and mappings in the @dub/ui/icons package, directly supporting the new icon additions (CursorRays, InvoiceDollar, UserPlus) used in this PR's stat card refactoring.

Suggested reviewers

  • steven-tey

Poem

🐰 Icons hop into place, dancing with pride,
Stat cards now gleam with designs beautified,
CursorRays sparkle, InvoiceDollars shine,
Layout refined, aesthetics divine!

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. You can run @coderabbitai generate docstrings to improve docstring coverage.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check ✅ Passed The PR title "Perplexity partner overview cards" directly reflects the main changes in the changeset. The pull request updates the StatCard and StatCardSimple components within the Perplexity partner dashboard to enhance their visual presentation with new icons, improved layouts, and refined styling. The title is concise, clear, and specific—a teammate scanning the repository history would immediately understand that this addresses updates to partner overview cards. The title avoids vague terms and accurately represents the core focus of the changeset.
✨ 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 pplx-partner-overview

📜 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 5d86b60 and 6f838e0.

📒 Files selected for processing (1)
  • apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/[programSlug]/(enrolled)/page-client.tsx (2 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-09-24T16:10:37.349Z
Learnt from: TWilson023
PR: dubinc/dub#2872
File: apps/web/ui/partners/partner-about.tsx:11-11
Timestamp: 2025-09-24T16:10:37.349Z
Learning: In the Dub codebase, the team prefers to import Icon as a runtime value from "dub/ui" and uses Icon as both a type and variable name in component props, even when this creates shadowing. This is their established pattern and should not be suggested for refactoring.

Applied to files:

  • apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/[programSlug]/(enrolled)/page-client.tsx
🧬 Code graph analysis (1)
apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/[programSlug]/(enrolled)/page-client.tsx (1)
packages/ui/src/icons/index.tsx (1)
  • Icon (80-80)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
  • GitHub Check: build
🔇 Additional comments (4)
apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/[programSlug]/(enrolled)/page-client.tsx (4)

29-36: LGTM! Icon imports are appropriate.

The three new icon imports (CursorRays, InvoiceDollar, UserPlus) are all used in the StatCardSimple iconMap and semantically match their respective events.


419-449: Well-structured icon integration with minor question on loading state height.

The iconMap pattern and layout restructuring look good. The horizontal flex layout with icon and content is clean and maintainable.

One minor concern: the loading skeleton height is h-12 (48px), which seems large for text-xl typography that typically renders at ~28px line-height. Consider verifying this matches the actual rendered height of the NumberFlow component.

Optional: Consider adding a type annotation to the iconMap for enhanced type safety:

-  const iconMap = {
+  const iconMap: Record<"clicks" | "leads" | "sales", Icon> = {
     clicks: CursorRays,
     leads: UserPlus,
     sales: InvoiceDollar,
   };

450-452: LGTM! Absolute positioning is appropriate.

The absolute positioning of the "All-time data" label at right-6 top-4 keeps it anchored in the top-right corner regardless of content size, which is the correct approach for this type of metadata label.


328-406: AI summary inconsistency: StatCard was not modified.

The AI-generated summary claims that "StatCard: similarly augmented with iconMap and Icon, replacing the previous header layout..." However, the annotated code shows no changes to the StatCard component. Only StatCardSimple was modified in this PR, which aligns with this being a Perplexity-specific update (see the conditional at lines 210-223 where Perplexity uses StatCardSimple).


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

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

@steven-tey steven-tey merged commit ba2ce8b into main Oct 29, 2025
7 of 9 checks passed
@steven-tey steven-tey deleted the pplx-partner-overview branch October 29, 2025 18:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants