fix(platform): align approval card styling with chat design

[larryro]

Summary

• Replaced colored status backgrounds and borders with clean neutral border-border styling on all 4 approval card types
• Changed approve/create buttons from variant="success" to variant="primary" (dark) and reject/cancel buttons from variant="destructive" to variant="secondary" (outlined)
• Removed icon background wrappers (bg-primary/10 rounded-md p-1.5) for a cleaner inline icon look
• Hidden status Badge in pending state, only shown for resolved (approved/rejected) states
• Changed border radius from rounded-lg to rounded-xl and removed shadow-sm

Files changed

• workflow-run-approval-card.tsx
• workflow-creation-approval-card.tsx
• integration-approval-card.tsx
• human-input-request-card.tsx

Test plan

• Verify workflow run approval card renders correctly in pending/approved/rejected states
• Verify workflow creation approval card renders correctly in all states
• Verify integration approval card renders correctly in all states
• Verify human input request card renders correctly in all states
• Confirm buttons have proper contrast and focus states in both light and dark mode
• Confirm card styling matches the Figma reference design

🤖 Generated with Claude Code

Summary by CodeRabbit

• Style
  • Simplified visual styling across approval cards with cleaner borders and refined spacing.
  • Updated status badge displays to appear only for approved and rejected items, reducing visual clutter.
  • Adjusted button colors for improved visual consistency across approval and rejection actions.
  • Enhanced workflow approval cards with execution result and error message displays.
  • Improved status messaging and caption displays for better user clarity.

[greptile-apps]

Your free trial has ended. If you'd like to continue receiving code reviews, you can add a payment method here.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 7f9f58ef-3964-495b-a18c-d589c3ee8fb0

📥 Commits

Reviewing files that changed from the base of the PR and between b245f68 and 4d9ba0c.

📒 Files selected for processing (4)

• services/platform/app/features/chat/components/human-input-request-card.tsx
• services/platform/app/features/chat/components/integration-approval-card.tsx
• services/platform/app/features/chat/components/workflow-creation-approval-card.tsx
• services/platform/app/features/chat/components/workflow-run-approval-card.tsx

---

📝 Walkthrough

Walkthrough

Four approval card components in the chat features folder are refactored with consistent UI styling updates. Card container styling is simplified by replacing combined border/background/shadow schemes with streamlined rounded-xl and border layouts. Icon containers lose their colored background wrappers and are rendered inline with shrink-0 classes. Status badges are now conditionally rendered only for non-pending states, and approval/rejection buttons change variants from success/destructive to primary/secondary. Loading indicators are simplified to show only spinners during processing. Some components add conditional sections for execution outcomes and status messaging. No public API signatures change.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/approval-card-styling

---

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