Refactor Expression Editor floating button styles for theming

[kanushka]

Purpose

Refactors the styling of the floating button within the Expression Editor to ensure correct and consistent appearance across different themes (e.g., light and dark modes).

Changes

• Update CSS/style properties for the Expression Editor's floating action button.
• Ensure thematic variables are correctly applied to support theme switching.

Fixed: wso2/product-ballerina-integrator#1870

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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 refactors the Expression Editor's floating button styles to improve theming consistency by removing conditional styling based on active state. The changes simplify the button appearance to use consistent theme colors across light and dark modes.

Key Changes

• Removed isActive prop-based conditional styling from FloatingToggleButton styled component
• Enhanced expand/minimize functionality to show the button in both expanded and collapsed states with appropriate icons
• Updated button titles for better clarity ("Helper Panel" suffix added)

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

File	Description
styles.tsx	Simplified FloatingToggleButton styles by removing isActive prop dependency and conditional theming; now uses consistent theme colors
FloatingToggleButton.tsx	Removed isActive prop from being passed to styled component while preserving it in aria-pressed for accessibility
ChipExpressionEditor.tsx	Enhanced expand/minimize button to display in both states with MinimizeIcon for expanded mode and ExpandIcon for collapsed mode; improved button titles

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Unnecessary template literal wrapping for the box-shadow value. This can be simplified to:

box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);

Suggested change

	box-shadow: ${'0 1px 2px rgba(0, 0, 0, 0.15)'};
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);