fix: pass feature card elements color with sx

[mmioana]

Which Jira task belongs to this PR?

Closes https://linear.app/lifi-linear/issue/JUM-904/fix-feature-card-colors

Why did I implement it this way?

Checklist before requesting a review

• I have performed a self-review of my code
• This pull request is as small as possible and only tackles one problem
• I have added tests that cover the functionality / test the bug
• If this changed the API, I have updated the documentation
• I have provided QA instructions for the feature / fix implemented in this PR (if applicable)
• I have provided instructions for any environment / deployment changes that this PR needs when merged

Summary by CodeRabbit

• Refactor
  • Updated internal styling implementation in the FeatureCard component to improve code maintainability. No changes to functionality or visual appearance.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
jumper-exchange	Ready	Preview, Comment	May 6, 2026 8:27am
jumper-exchange-storybook	Ready	Preview, Comment	May 6, 2026 8:27am

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 49a3de8a-f37d-4273-a5f6-d265c2a69318

📥 Commits

Reviewing files that changed from the base of the PR and between e173ebb and e0ee972.

📒 Files selected for processing (1)

• src/components/FeatureCards/FeatureCard.tsx

---

Walkthrough

Reworked FeatureCard.tsx styling by migrating color props from explicit color attributes to sx style object props on three typography elements: Title, Subtitle, and CTALabel. Public API and component behavior remain unchanged.

Changes

FeatureCard Styling Refactor

Layer / File(s)	Summary
Style Props Refactor src/components/FeatureCards/FeatureCard.tsx	Migrated color styling from color={colors.title/subtitle/cta} props to sx={{ color: colors.title/subtitle/cta }} on FeatureCardTitle, FeatureCardSubtitle, and FeatureCardCtaLabel components. Preserved all other props and structure.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related PRs

• jumperexchange/jumper-exchange#2683: Also refactors FeatureCard styling by consolidating color and styling logic away from explicit props.

Suggested reviewers

• callMeTheQA
• laurentsenta

Poem

🐰✨ A rabbit hops through style props with glee,
Moving colors to sx for harmony,
Three cards now shimmer in unified dress—
Less explicit, more elegant, nothing less! 🎨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix: pass feature card elements color with sx' clearly and specifically describes the main change: refactoring how colors are passed to feature card elements using sx props instead of explicit color props.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/feature-card-colors

---

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

[github-actions]

✅ All snapshot tests passed

[github-actions]

Playwright test results

 2 failed
 52 passed
 2 flaky
 1 skipped

Details

 57 tests across 11 suites
 13 minutes, 8 seconds
 e0ee972

Failed tests

chromium › earnPage.spec.ts › Analytics filters on Earn page › Should be able to verify analytics buttons are visible (Qase ID: 47)
chromium › landingPage.spec.ts › Landing page and navigation › Should navigate to the homepage and change tabs (Qase ID: 2)

Flaky tests

chromium › mainMenu.spec.ts › Main Menu flows › Should be able to navigate to X (Qase ID: 16)
chromium › swapActions.spec.ts › On chain swaps [Viewport: Mobile] › Hyperliquid chain swap pairs (Qase ID: 25)

Skipped tests

chromium › themeManipulation.spec.ts › Switch between dark and light theme and check the background color › Partner theme should appear in theme menu and apply background color (Qase ID: 49)

📋 View Detailed Qase Report