[WEB-6702] feat: redesign intake action buttons and use design tokens

[anmolsinghbhatia]

Description

• Add CheckCircleFilledIcon and CloseCircleFilledIcon to propel icon library
• Redesign intake header action buttons (Accept, Decline, nav, more menu) to use IconButton and Button from propel with secondary variant
• Replace 7 hardcoded hex colors in intake status icons with semantic design tokens
• Apply changes to both desktop and mobile headers

Type of Change

• Improvement

Media

Accepted

Before (dark)
After (dark)
Before (light)
After (light)

Declined

Before (dark)
After (dark)
Before (light)
After (light)

Duplicate

Before (dark)
After (dark)
Before (light)
After (light)

Pending

Before (dark)
After (dark)
Before (light)
After (light)

Sidebar

	Dark	Light
Before
After

Summary by CodeRabbit

• New Features

  • Added filled accept/decline circle icons to the design system.

• Style

  • Unified inbox navigation and action button sizing and appearance for desktop and mobile.
  • Updated context menu trigger styling for consistent controls.
  • Refreshed status indicator colors for pending, accepted, declined, snoozed, and duplicate states for clearer visual hierarchy.

[makeplane]

Linked to Plane Work Item(s)

• [WEB-6702] Update Accept and Reject Buttons on Intake Work item

This comment was auto-generated by Plane

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 4da3438d-c333-4899-82cb-29deaa3057db

📥 Commits

Reviewing files that changed from the base of the PR and between 1652862 and 0f50dfe.

📒 Files selected for processing (2)

• packages/propel/src/icons/misc/check-circle-filled-icon.tsx
• packages/propel/src/icons/misc/close-circle-filled-icon.tsx

✅ Files skipped from review due to trivial changes (2)

• packages/propel/src/icons/misc/check-circle-filled-icon.tsx
• packages/propel/src/icons/misc/close-circle-filled-icon.tsx

---

📝 Walkthrough

Walkthrough

Refactors inbox header components to use shared design-system controls (IconButton, new filled icons), standardizes status badge tokens, and adjusts button variant class ordering in the Propel button helper.

Changes

Cohort / File(s)	Summary
Inbox Header Components apps/web/core/components/inbox/content/inbox-issue-header.tsx, apps/web/core/components/inbox/content/inbox-issue-mobile-header.tsx	Replaced manual prev/next buttons with IconButton, switched menu triggers to MoreHorizontal via customButton and getIconButtonStyling(), replaced accept/decline icons with new filled icons and normalized Button sizing/props.
Status Badge Mapping apps/web/core/components/inbox/inbox-status-icon.tsx	Replaced hex color classes with semantic design-system classes for multiple EInboxIssueStatus entries and adjusted snoozed/duplicate backgrounds.
Propel Button Styles packages/propel/src/button/helper.tsx	Reordered Tailwind utility class strings for error-outline and secondary variants to change hover/active/disabled precedence.
Filled Status Icons packages/propel/src/icons/misc/check-circle-filled-icon.tsx, packages/propel/src/icons/misc/close-circle-filled-icon.tsx, packages/propel/src/icons/misc/index.ts	Added CheckCircleFilledIcon and CloseCircleFilledIcon components and re-exported them from the misc icons index.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~30 minutes

Possibly related PRs

• [WEB-5614] chore: platform header and breadcrumb enhancements #8383 — Similar UI refactor replacing manual buttons/CustomMenu ellipsis with IconButton and MoreHorizontal, and adding/using new icons.

Suggested reviewers

• aaryan610

Poem

🐰
I hopped through props and SVG light,
Replaced old chevrons with buttons right,
Filled circles gleam in tidy rows,
Tokens sing where color flows,
Inbox bounces — ready, bright! 🎨✨

🚥 Pre-merge checks | ✅ 2 | ❌ 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%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main changes: redesigning intake action buttons and using design tokens, directly matching the PR's objectives.
Description check	✅ Passed	The description covers all required template sections with specific details about changes, includes type of change marked, provides comprehensive before/after media, but lacks explicit test scenarios.

_{✏️ 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 feat/intake-action-buttons-redesign

---

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

[Copilot]

Pull request overview

This PR updates the web intake (inbox) headers to use Propel Button/IconButton components and semantic design tokens, while also extending the Propel icon set with new filled status icons.

Changes:

• Add CheckCircleFilledIcon and CloseCircleFilledIcon to the Propel icons (misc) barrel exports.
• Redesign desktop + mobile intake header actions (accept/decline/nav/more menu) to use Propel Button/IconButton with secondary styling.
• Replace hardcoded hex colors in inbox status icon styling with semantic token classes.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
packages/propel/src/icons/misc/index.ts	Re-export newly added filled circle status icons.
packages/propel/src/icons/misc/check-circle-filled-icon.tsx	New filled “check circle” icon component for intake actions/status.
packages/propel/src/icons/misc/close-circle-filled-icon.tsx	New filled “close circle” icon component for intake actions/status.
packages/propel/src/button/helper.tsx	Adjust secondary and error-outline variant class composition for Propel buttons.
apps/web/core/components/inbox/inbox-status-icon.tsx	Swap hardcoded hex colors for semantic design token classes.
apps/web/core/components/inbox/content/inbox-issue-mobile-header.tsx	Replace bespoke buttons with IconButton and update the “more” menu trigger/icons.
apps/web/core/components/inbox/content/inbox-issue-header.tsx	Update desktop header actions/buttons and “more” menu trigger to match new design system usage.