fix: adjust styles for TWAP EOA tracker order details expand button

[Danziger]

Summary

Minor styling adjustments based on Figma comments.

To Test

Check Figma comments in the "Order details" expand button and verify the new styles match that:

Summary by CodeRabbit

• Style
  • Improved accordion styling with smoother transitions, consistent spacing, rounded corners, and clearer hover and expanded states.
  • Refined trade confirmation details layout with slightly reduced top spacing.
  • Preserved the existing order-details toggle behavior and appearance.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
cowfi	Ready	Preview	Aug 28, 2026 4:24pm
explorer-dev	Ready	Preview	Aug 28, 2026 4:24pm
storybook	Ready	Preview	Aug 28, 2026 4:24pm
swap-dev	Ready	Preview	Aug 28, 2026 4:24pm
widget-configurator	Ready	Preview	Aug 28, 2026 4:24pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
cosmos	Ignored		Aug 28, 2026 4:24pm
sdk-tools	Ignored	Preview	Aug 28, 2026 4:24pm

[coderabbitai]

Warning

Review limit reached

Next included review available in 11 minutes.

View limit details

Limit details: You’ve used all 2 included reviews currently available.

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Learn how review limits work.

Review configuration:

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 9c8ca5d7-4131-4dff-9c48-084a0b41cada

📥 Commits

Reviewing files that changed from the base of the PR and between fef9de3 and cf41e47.

📒 Files selected for processing (1)

• libs/ui/src/pure/Accordion/Accordion.styled.ts

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 760d19c3-48b5-41f7-b993-4119cc79050e

📥 Commits

Reviewing files that changed from the base of the PR and between 7eab9b4 and fef9de3.

📒 Files selected for processing (3)

• apps/cowswap-frontend/src/modules/twap/containers/TwapConfirmModal/TwapTradeConfirmationDetails.styled.ts
• apps/cowswap-frontend/src/modules/twap/containers/TwapConfirmModal/TwapTradeConfirmationDetails.tsx
• libs/ui/src/pure/Accordion/Accordion.styled.ts

Included review availability: Your plan provides up to 2 included reviews per hour; 1 remains after this review.

---

Walkthrough

The shared Accordion styles now define updated spacing, colors, typography, radii, and transitions. The TWAP confirmation details use Accordion.Trigger directly and reduce conditional body top padding to 8px.

Changes

Accordion trigger update

Layer / File(s)	Summary
Shared Accordion styles libs/ui/src/pure/Accordion/Accordion.styled.ts	The Accordion item and trigger now use updated padding, radii, paper colors, typography, hover states, open states, and transitions.
TWAP trigger integration apps/cowswap-frontend/src/modules/twap/containers/TwapConfirmModal/TwapTradeConfirmationDetails.styled.ts, apps/cowswap-frontend/src/modules/twap/containers/TwapConfirmModal/TwapTradeConfirmationDetails.tsx	The custom trigger is removed. The TWAP details use Accordion.Trigger directly, and conditional body top padding changes from 10px to 8px.

Estimated code review effort: 2 (Simple) | ~10 minutes

Merge Risk: ⚪ Minimal · up to fef9d

This change only adjusts the TWAP order-details expand button and shared Accordion styling; it does not alter application behavior, data handling, permissions, or deployment. No actionable merge-blocking risk remains beyond normal checks and review.

Poem

A rabbit taps the trigger bright

New colors bloom in open light
The corners round, the spacing sings
Eight pixels guide the padded things
Shared styles hop on polished springs

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ 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%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 3 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely identifies the main change: styling adjustments to the TWAP EOA tracker order-details expand button.
Description check	✅ Passed	The description provides an on-topic summary, testing instructions, and a screenshot. The optional Background section and Self-checks checklist are omitted, but the core description is complete enough…
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.

Full details: Description check

Explanation

The description provides an on-topic summary, testing instructions, and a screenshot. The optional Background section and Self-checks checklist are omitted, but the core description is complete enough for this change.

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/twap-eoa-expandable-fixes

---

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

[Danziger]

✅ AI Review (Cursor Grok 4.6, worked 2m): Order details accordion matches the Figma split

Review completed. I found no comments worth posting.

• Collapsed trigger: 12px padding, 10px radius, 8px gap, 14/20 medium secondary, muted chevron.
• Expanded panel: 14px radius, 8px 8px 16px padding, field fill (COLOR_PAPER_DARKER).
• Expanded trigger: field-emphasis via color-mix of PAPER_DARKER / PAPER_DARKEST, hover PAPER_DARKEST, label COLOR_PRIMARY.
• $isCollapsible is required for the open chrome; missing/false stays the static details layout.
• Trigger uses min-height only, so a wrapping translation can grow.

Review scope and related context

Branch feat/twap-eoa-expandable-fixes vs develop. No GitHub review threads yet.

This is separate from PR 7989, which deferred the smaller Order details label.

Generated using the pr-review skill from the CoW Protocol skills repo.

[fairlighteth]

✅ Manual verification: expanded chevron color does not match the label

• In the expanded state, “Order details” renders in primary blue while the chevron remains muted gray.

⚠️ AI Review (Codex GPT-5, worked 9m): expanded chevron keeps the muted color

Finding: [NON-BLOCKING] Match the expanded chevron color to the label

• Location: Accordion.styled.ts:75
• The expanded trigger label changes to COLOR_PRIMARY, but Chevron retains COLOR_TEXT_OPACITY_50; its open-state rule only rotates it.
• This leaves the active chevron muted instead of matching the blue label shown in the Figma target.

Suggested fix

• Set the chevron to COLOR_PRIMARY under ${Trigger}[data-panel-open] &.
• Include color in its transition if the change should animate.

🤖 Prompt for AI agents

Verify this finding against the current PR head and attached visual target.

Context:
- libs/ui/src/pure/Accordion/Accordion.styled.ts
- The expanded trigger label becomes COLOR_PRIMARY.
- The Chevron remains COLOR_TEXT_OPACITY_50 and only rotates.
- Update the expanded chevron to match the primary label while keeping the collapsed chevron muted.

Generated using the pr-review skill from the CoW Protocol skills repo.