Style pulse and Force Surge buttons in system override panel

[surbhibadhe]

Summary

This PR updates the styling of the Pulse and Force Surge buttons in the System Override panel.

Changes

• Added orange styling for the Pulse button to match the pulse easter egg.
• Updated the Force Surge button styling for better visuals.

Closes #522

[deepsource-io]

DeepSource Code Review

We reviewed changes in b0bf6c9...924face on this pull request. Below is the summary for the review, and you can see the individual issues we found as inline review comments.

See full review on DeepSource ↗

PR Report Card

Overall Grade

Security   Reliability   Complexity   Hygiene

Code Review Summary

Analyzer	Status	Updated (UTC)	Details
JavaScript		Jul 2, 2026 4:21p.m.	Review ↗
Secrets		Jul 2, 2026 4:21p.m.	Review ↗

---

Important

AI Review is run only on demand for your team. We're only showing results of static analysis review right now. To trigger AI Review, comment @deepsourcebot review on this thread.

[gemini-code-assist]

Code Review

This pull request adds a new PULSE button to the system override template and introduces corresponding styling overrides in the stylesheet, including an update to the XP pulse color. The feedback recommends maintaining visual consistency by using Tailwind's amber palette uniformly for the pulse theme, and suggests utilizing Tailwind's built-in ! modifier directly in the HTML template to avoid adding custom CSS overrides with !important in the stylesheet.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[gemini-code-assist]

The PR description states that the orange styling is added to match the pulse easter egg. However, the pulse easter egg color in .xp-pulse is set to #f59e0b (Tailwind's amber-500), while this button uses orange classes (bg-orange-500/5, border-orange-500/20) and its text color is overridden to #fbbf24 (Tailwind's amber-400).

To ensure visual consistency and avoid mixing orange and amber, we should use Tailwind's amber color palette consistently for the PULSE button. Additionally, we can use Tailwind's ! modifier (e.g., !text-amber-500) to override the default #dev-tools button text color directly in the HTML, allowing us to remove the custom CSS overrides in style.css entirely.

        <button onclick="triggerSecretUnlock('pulse')" class="override-btn py-1.5 bg-amber-500/5 hover:bg-amber-500/20 !text-amber-500 text-[8px] border border-amber-500/20 rounded transition-all">
            PULSE
        </button>

References

1. When suggesting style changes, adhere to the project's existing CSS framework (e.g., Tailwind CSS) and its conventions, rather than introducing separate, traditional CSS files.

[gemini-code-assist]

Instead of adding custom CSS rules with !important to override button text colors, we should leverage Tailwind CSS's built-in ! (important) modifier directly in the HTML templates. This keeps the styling utility-first, avoids cluttering the stylesheet, and aligns with the project's Tailwind conventions.

We can remove these rules entirely and apply the colors directly in the template using !text-amber-500 (for the PULSE button) and !text-blue-400 (for the Force Surge button).

References

1. When suggesting style changes, adhere to the project's existing CSS framework (e.g., Tailwind CSS) and its conventions, rather than introducing separate, traditional CSS files.