feat: redesign intake action buttons and use design tokens by sriramveeraghanta · Pull Request #8799 · makeplane/plane

sriramveeraghanta · 2026-03-25T20:47:12Z

Summary

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 (text-warning-primary, bg-warning-subtle, text-danger-primary, bg-danger-subtle, bg-layer-3, text-success-primary, bg-success-subtle)
Apply changes to both desktop and mobile headers

Screenshots

Test plan

Verify Accept/Decline buttons render correctly in light and dark themes
Verify nav arrows (up/down) use IconButton styling
Verify more menu uses MoreHorizontal icon with getIconButtonStyling
Verify intake status icons use semantic tokens (Pending, Accepted, Declined, Snoozed, Duplicate)
Test on mobile viewport for mobile header changes

Summary by CodeRabbit

New Features
- Introduced new filled circle status indicator icons for enhanced visual recognition of accept and decline actions in the inbox.
Style Updates
- Enhanced button styling and navigation controls in the inbox interface.
- Standardized status indicator colors throughout the inbox using design system color tokens for improved visual consistency and overall design cohesion.

coderabbitai · 2026-03-25T20:47:33Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: eebb9f7e-a8cc-412d-9238-4a136a579b64

📥 Commits

Reviewing files that changed from the base of the PR and between d94a269 and d3ff7f3.

📒 Files selected for processing (6)

apps/web/core/components/inbox/content/inbox-issue-header.tsx
apps/web/core/components/inbox/content/inbox-issue-mobile-header.tsx
apps/web/core/components/inbox/inbox-status-icon.tsx
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

📝 Walkthrough

Walkthrough

This PR refactors inbox header components to standardize button styling with IconButton and newly created filled icon components, while migrating hardcoded color classes to design-system tokens throughout the inbox status icon styling.

Changes

Cohort / File(s)	Summary
Inbox Header Refactoring `apps/web/core/components/inbox/content/inbox-issue-header.tsx`, `apps/web/core/components/inbox/content/inbox-issue-mobile-header.tsx`	Replaced manual `<button>` elements with `IconButton` components for navigation chevrons, updated Accept/Decline actions to use new filled status icons, switched menu trigger from `CustomMenu` defaults to custom `MoreHorizontal` icon with `getIconButtonStyling()`, and added semantic `aria-label` attributes.
Design Token Migration `apps/web/core/components/inbox/inbox-status-icon.tsx`	Updated `ICON_PROPERTIES` color styling by replacing hardcoded Tailwind classes (e.g., `text-[`#AB6400`]`, `bg-gray-500/10`) with design-system tokens (e.g., `text-warning-primary`, `bg-warning-subtle`, `text-success-primary`) across multiple `EInboxIssueStatus` cases.
New Icon Components `packages/propel/src/icons/misc/check-circle-filled-icon.tsx`, `packages/propel/src/icons/misc/close-circle-filled-icon.tsx`	Added two new React icon components for filled check-in-circle and close-in-circle shapes. Both use `IconWrapper`, accept `ISvgIcons` props with `color` defaulting to `"currentColor"`, and generate unique `clipPathId` via `React.useId()`.
Icon Module Exports `packages/propel/src/icons/misc/index.ts`	Added re-exports for the two new icon components (`check-circle-filled-icon` and `close-circle-filled-icon`).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 With buttons rounded and icons filled,
A design system wonderfully skilled,
From chevrons to circles, we hop with glee,
Colors and tokens dance wild and free,
The inbox now shines with design so neat! ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the primary changes: redesigning intake action buttons and implementing design tokens instead of hardcoded colors.
Description check	✅ Passed	The description includes a clear summary, screenshots, test plan, but lacks detail in some sections compared to the template requirements.
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

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch fix-intake-accept-button-style

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

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

Copilot

Pull request overview

This PR updates the intake/inbox issue header UI to align with Propel components and design tokens, adding two new filled circle icons to the Propel icon set and replacing hardcoded status colors with semantic tokens across desktop and mobile.

Changes:

Added CheckCircleFilledIcon and CloseCircleFilledIcon to @plane/propel/icons.
Refactored desktop/mobile header actions to use Propel IconButton / Button (secondary, size lg) and updated the “more” menu trigger styling.
Replaced hardcoded hex colors in inbox status styling with semantic design tokens.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/propel/src/icons/misc/index.ts	Exports the newly added filled-circle icons from the misc barrel.
packages/propel/src/icons/misc/close-circle-filled-icon.tsx	Adds a new filled “close in circle” SVG icon component.
packages/propel/src/icons/misc/check-circle-filled-icon.tsx	Adds a new filled “check in circle” SVG icon component.
apps/web/core/components/inbox/inbox-status-icon.tsx	Swaps status icon color classes from hex to semantic token classes.
apps/web/core/components/inbox/content/inbox-issue-mobile-header.tsx	Updates mobile header action controls to use Propel `IconButton` and new filled icons; updates menu trigger.
apps/web/core/components/inbox/content/inbox-issue-header.tsx	Updates desktop header action controls to use Propel `IconButton` / `Button` and new filled icons; updates menu trigger.

Copilot · 2026-03-25T20:52:31Z

apps/web/core/components/inbox/content/inbox-issue-mobile-header.tsx

+          <CustomMenu
+            customButton={<MoreHorizontal className="size-4" />}
+            customButtonClassName={getIconButtonStyling("secondary", "lg")}
+            placement="bottom-start"


CustomMenu is using an icon-only customButton but no ariaLabel is provided. CustomMenu applies ariaLabel to the trigger button, so without it the menu trigger has no accessible name. Please add an ariaLabel such as "More actions".

Suggested change

placement="bottom-start"

placement="bottom-start"

ariaLabel="More actions"

Copilot · 2026-03-25T20:52:31Z

apps/web/core/components/inbox/content/inbox-issue-header.tsx

+                  <CustomMenu
+                    customButton={<MoreHorizontal className="size-4" />}
+                    customButtonClassName={getIconButtonStyling("secondary", "lg")}
+                    placement="bottom-start"


CustomMenu is being rendered with an icon-only customButton but without an ariaLabel. Since CustomMenu forwards ariaLabel to the underlying <button aria-label=...>, this control currently has no accessible name for screen readers. Please provide an appropriate ariaLabel (e.g., "More actions").

Suggested change

placement="bottom-start"

placement="bottom-start"

ariaLabel="More actions"

fix: intake accept button style

d3ff7f3

Copilot AI review requested due to automatic review settings March 25, 2026 20:47

Copilot started reviewing on behalf of sriramveeraghanta March 25, 2026 20:47 View session

Copilot AI reviewed Mar 25, 2026

View reviewed changes

sriramveeraghanta closed this Mar 26, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: redesign intake action buttons and use design tokens#8799

feat: redesign intake action buttons and use design tokens#8799
sriramveeraghanta wants to merge 1 commit intopreviewfrom
fix-intake-accept-button-style

sriramveeraghanta commented Mar 25, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Mar 25, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 25, 2026

Uh oh!

Copilot AI Mar 25, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	placement="bottom-start"
	placement="bottom-start"
	ariaLabel="More actions"

Conversation

sriramveeraghanta commented Mar 25, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Screenshots

Test plan

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Mar 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

sriramveeraghanta commented Mar 25, 2026 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Mar 25, 2026 •

edited

Loading