fix: yields polish one

[reallybeard]

Description

• This updates the YieldDetail components to use the same card style which is default elevated
• Wraps the provider and chain in tags and moves them to the right of the asset with the type
• Adjusts the APY styling from a pill to just styled text

I will adjust the styling further in a follow up PR for mobile. Keeping this one small and targeted.

Issue (if applicable)

closes #

Risk

High Risk PRs Require 2 approvals

low risk

What protocols, transaction types, wallets or contract interactions might be affected by this PR?

Testing

Engineering

Operations

• 🏁 My feature is behind a flag and doesn't require operations testing (yet)

Screenshots (if applicable)

Summary by CodeRabbit

• New Features

  • Added dark mode styling for elevated card variants with enhanced shadow effects.

• Style

  • Simplified and streamlined Yield component layouts for improved readability.
  • Reorganized yield metadata display with cleaner information hierarchy.
  • Enhanced visual consistency across card-based components.
  • Refined heading styles and spacing throughout Yield pages.

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

[coderabbitai]

📝 Walkthrough

Walkthrough

Updates Card dark mode styling for the elevated variant and refactors multiple Yields components to use plain Card instead of the dashboard variant, simplifying heading styles and restructuring layout patterns across YieldInfoCard, YieldProviderInfo, and YieldStats components.

Changes

Cohort / File(s)	Summary
Card Theme Styling src/components/Card/Card.theme.ts	Added _dark variant property to elevated Card container with inset border shadow and Chakra shadow for dark mode rendering.
Yields Component Refactoring src/pages/Yields/components/YieldAvailableToDeposit.tsx, src/pages/Yields/components/YieldPositionCard.tsx	Replaced variant='dashboard' with plain Card; simplified Heading by removing textTransform='uppercase' and letterSpacing='wider'.
Yields Info Card Restructure src/pages/Yields/components/YieldInfoCard.tsx	Removed overlay logic for asset icon; consolidated metadata into horizontal HStack of Tags for yield type, chain/network, and validator info; simplified GradientApy styling.
Yields Provider Info Layout src/pages/Yields/components/YieldProviderInfo.tsx	Converted Box-based Desktop UI to Card/CardBody structure; repositioned website link inline with provider name using ml='auto' for right alignment.
Yields Stats Restructure src/pages/Yields/components/YieldStats.tsx	Replaced SimpleGrid-based container with Card/CardBody; reordered grid elements (TVL, Reward Schedule, Type, Validator); made Avatar conditional on logoURI existence.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• #11730 — Modifies Yields UI components and Card usage patterns with similar refactoring goals.

Suggested reviewers

• gomesalexandre
• 0xApotheosis

Poem

🐰✨ Cards are cleaner, dashboards fade away,
Tags now gather where overlays once lay,
Dark shadows dance in elevated style,
Yields components sparkle all the while! 🌙

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title check	❓ Inconclusive	The title 'fix: yields polish one' is vague and generic, using a non-descriptive term 'polish one' that lacks specificity about the actual changes made to the yields components.	Revise the title to be more specific, such as 'fix: refactor YieldDetail components to use elevated card variant and tag-based styling' to clearly convey the main changes.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ 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 yield-polish-one

---

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.}

[coderabbitai]

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 (1)

src/pages/Yields/components/YieldAvailableToDeposit.tsx (1)

143-182: Align the empty-state Card variant with the updated default Card.
The non-empty state now uses the default Card styling, but the empty state still uses variant='dashboard', creating an inconsistent look within the same component.

Suggested fix

-          <Card variant='dashboard'>
+          <Card>

🤖 Fix all issues with AI agents

In `@src/pages/Yields/components/YieldPositionCard.tsx`:
- Around line 431-436: The connect-wallet branch in YieldPositionCard uses a
Card with variant='dashboard' causing inconsistent layout; update the JSX branch
that renders when !accountId (inside the YieldPositionCard component) to use the
default Card styling by removing or changing the variant='dashboard' prop so it
matches the other main and loading branches which render the plain Card.

[gomesalexandre]

Constrained changes look good. No regression spotted on desktop nor mobile in Yield nor cards in app.
https://jam.dev/c/6723b2d3-3345-4b63-b4fc-468ea300cc1f