chore: Update call widget handle colors

[gabriellsh]

Proposed changes (including videos or screenshots)

Before:

After:

Issue(s)

VGA-10

Steps to test or reproduce

Further comments

Summary by CodeRabbit

• Style

  • Updated widget handle styling with refreshed theme colors and improved visual appearance.

• Refactor

  • Simplified component implementation.

[dionisio-bot]

Looks like this PR is not ready to merge, because of the following issues:

• This PR is targeting the wrong base branch. It should target 7.13.0, but it targets 7.12.0

Please fix the issues and try again

If you have any trouble, please check the PR guidelines

[changeset-bot]

⚠️ No Changeset found

Latest commit: 4f669bf

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[coderabbitai]

Walkthrough

Updated the WidgetHandle component to use the Palette design system for colors, replacing hardcoded color values with palette tokens. Refactored the Box element to consolidate inline styling while maintaining ref forwarding and prop spreading functionality.

Changes

Cohort / File(s)	Summary
Widget component styling & refactor packages/ui-voip/src/v2/components/Widget/WidgetHandle.tsx	Imported Palette design tokens; updated dragHandle CSS styles with palette surface and font colors for default and hover states; consolidated Box JSX element by removing separate prop declarations and using inline props instead

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 A widget's handle, now styled just right,
With palette tokens bringing design to light,
Surface tints and font hues, no hardcoded sight,
The drag icon glows with consistent might,
Colors harmonized, the UI's delight! 🎨

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title "chore: Update call widget handle colors" accurately and concisely describes the main change in the pull request. The changeset focuses on updating the colors of the widget drag/handle icons in WidgetHandle.tsx by importing Palette and applying new color values. The title is clear, specific, and aligns with the PR objective of updating widget handle colors, making it easy for teammates to understand the primary change when scanning history.
Linked Issues Check	✅ Passed	The linked issue VGA-10 requires fixing the drag icon color, and the code changes directly address this requirement. The modifications update the WidgetHandle component by importing Palette and applying new color values for the drag handle using Palette.surface and Palette.text properties, which implements the color fix for the drag/handle icons as specified in the issue. The implementation aligns with the stated objective of updating widget handle colors.
Out of Scope Changes Check	✅ Passed	All changes in the pull request are directly related to the objective of fixing drag icon colors specified in VGA-10. The core changes involve importing Palette and updating color values for the drag handle styles. The JSX refactoring that simplifies the Box component structure appears to be part of the color implementation effort rather than an independent change, and does not introduce unrelated functionality or scope outside the drag icon color fix.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ 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 chore/dragIconColor

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 0870d72 and 2acf026.

⛔ Files ignored due to path filters (1)

• packages/ui-voip/src/v2/__snapshots__/MediaCallWidget.spec.tsx.snap is excluded by !**/*.snap

📒 Files selected for processing (1)

• packages/ui-voip/src/v2/components/Widget/WidgetHandle.tsx (2 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

• GitHub Check: 📦 Build Packages
• GitHub Check: CodeQL-Build
• GitHub Check: CodeQL-Build

🔇 Additional comments (2)

packages/ui-voip/src/v2/components/Widget/WidgetHandle.tsx (2)

2-2: Excellent migration to Palette design tokens!

The migration from hardcoded colors to Palette tokens aligns with fuselage best practices and improves theming support across light/dark/high-contrast modes.

Based on learnings: The retrieved learnings confirm that fuselage-tokens should be preferred over ad-hoc styles for better design system integration.

Also applies to: 10-16

---

26-26: Icon color inheritance is properly supported—no changes needed.

The Icon component from @rocket.chat/fuselage supports CSS color inheritance via currentColor, so it correctly inherits the parent Box's color values from the dragHandle CSS class. The icon will display in the default color (font-default) and switch to font-info on hover, as intended. This pattern is consistent with other Icon usages in the codebase.

---

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

[codecov]

Codecov Report

❌ Patch coverage is 62.50000% with 3 lines in your changes missing coverage. Please review.
✅ Project coverage is 67.60%. Comparing base (f94a415) to head (4f669bf).
⚠️ Report is 1 commits behind head on develop.

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #37271      +/-   ##
===========================================
- Coverage    67.64%   67.60%   -0.05%     
===========================================
  Files         3338     3338              
  Lines       113721   113721              
  Branches     20663    20659       -4     
===========================================
- Hits         76923    76876      -47     
- Misses       34126    34163      +37     
- Partials      2672     2682      +10     

Flag	Coverage Δ
e2e	57.39% <ø> (-0.08%)	⬇️
unit	71.57% <62.50%> (-0.04%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.