Add deprecation notice on Second Screen modal

[Copilot]

Overview

This PR adds a prominent deprecation notice to the Second Screen modal to inform users that Second Screen will be shut down on December 31st and recommends switching to Studio for a better experience.

Changes

User-Facing Changes

A warning banner now appears at the top of the Second Screen modal (positioned between the header and connection controls) with:

• Yellow/amber background with warning border styling
• Red exclamation triangle icon
• Clear message: "Second Screen will be shut down on December 31st. We recommend switching to Studio for a better experience."

Implementation Details

• Added deprecation notice banner component to SecondScreen/index.tsx
• Imported ExclamationTriangleIcon from @radix-ui/react-icons
• Used existing design tokens for consistent styling:
  • $bgWarning for background
  • $borderWarning for border
  • $dangerFg for icon color
• Wrapped icon in Box component with css prop for proper token-based styling (following existing patterns from Callout.tsx)

Translations

Added secondScreenDeprecationNotice translation key to all supported languages:

• English: "Second Screen will be shut down on December 31st. We recommend switching to Studio for a better experience."
• Spanish: "Second Screen se cerrará el 31 de diciembre. Recomendamos cambiar a Studio para una mejor experiencia."
• French: "Second Screen sera fermé le 31 décembre. Nous recommandons de passer à Studio pour une meilleure expérience."
• Hindi: "Second Screen 31 दिसंबर को बंद हो जाएगा। हम बेहतर अनुभव के लिए Studio पर स्विच करने की सलाह देते हैं।"
• Chinese: "Second Screen 将于 12 月 31 日关闭。我们建议切换到 Studio 以获得更好的体验。"
• Dutch: "Second Screen wordt op 31 december afgesloten. We raden aan om over te stappen naar Studio voor een betere ervaring."

Design Decisions

• Pattern Matching: The implementation follows the existing warning banner pattern used in StorageItem.tsx for Bitbucket app password warnings, ensuring visual consistency
• Color Scheme: Uses $bgWarning + $borderWarning with $dangerFg icon, matching existing warning components in the codebase
• Placement: Banner positioned after the header but before connection controls for maximum visibility without disrupting user workflow

Testing

• ✅ Build successful
• ✅ ESLint passed
• ✅ Navbar tests passed (tests that reference Second Screen)
• ✅ CodeQL security scan: 0 vulnerabilities found

Impact

• Minimal, surgical changes with no breaking functionality
• All users will see the prominent deprecation notice when accessing the Second Screen modal
• Provides clear communication about the shutdown timeline and migration path

Original prompt

Add a deprecation notice on the Second screen modal saying that Second screen will be shut down on December 31st, and that we recommend users to switch over to using Studio.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[changeset-bot]

🦋 Changeset detected

Latest commit: 23cc2de

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@tokens-studio/figma-plugin	Patch

Not sure what this means? Click here to learn what changesets are.

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