fix: improve close button contrast on onboarding tour modal

[Marsssssssssssdsss]

Description

This PR fixes the close (X) button contrast issue on the Cycles onboarding modal (tour component).

Problem

The close button in the top-right corner of the tour modal has no background color, causing it to blend into the header area with bg-accent-primary. This makes the button difficult to notice and reduces discoverability.

Solution

• Added bg-surface-1 to give the close button a solid background that contrasts against the accent-colored header
• Added shadow-md for better visual separation from the content
• Added hover:bg-surface-3 for a subtle interactive hover state

Changes

• apps/web/ce/components/onboarding/tour/root.tsx: Updated the close button's className

Before

The close button had only border border-strong with no background, blending into the modal header.

After

The close button now has a visible surface background, shadow for depth, and hover effect.

Closes #9182

Summary by CodeRabbit

• Style
  • Enhanced the close button in the onboarding tour with improved visual styling, including background color, drop shadow, and hover effects.

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[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: 0ee63e41-abac-445c-b682-0e858f640552

📥 Commits

Reviewing files that changed from the base of the PR and between 3f57fef and 8e0fef7.

📒 Files selected for processing (1)

• apps/web/ce/components/onboarding/tour/root.tsx

---

📝 Walkthrough

Walkthrough

The onboarding tour close button receives visual styling enhancements. A background color, shadow, and hover state are added to the close button className to improve visibility and contrast against the modal background.

Changes

Close Button Visual Enhancement

Layer / File(s)	Summary
Close button styling improvement apps/web/ce/components/onboarding/tour/root.tsx	Close button className is extended with base background color, drop shadow, and hover state styling.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Poem

A button so plain, now gleams with pride,
Shadows dance and colors guide,
Click the X, it glows with grace,
Finding home in cyberspace. ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately and concisely describes the main change: improving close button contrast on the onboarding tour modal.
Description check	✅ Passed	The description comprehensively covers the problem, solution, specific changes, before/after states, and links to the related issue #9182.
Linked Issues check	✅ Passed	The PR successfully addresses the requirements from issue #9182 by adding bg-surface-1 for contrast, shadow-md for visual separation, and hover:bg-surface-3 for interactivity.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to fixing the close button visibility issue; no unrelated modifications are present.
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 unit tests (beta)

• Create PR with unit tests

---

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

[Rahulcheryala]

Hey @Marsssssssssssdsss, thanks for the fix: improving the close button contrast on the onboarding tour is a good catch!

We're picking up your changes into an internal branch and shipping them. Just a heads up, we've removed shadow-md and hover:bg-surface-3 from the close button's className as they aren't part of our design system.