fix: OPTIC-2152: Zoom presets option hotkeys not optimized for dark mode

[ricardoantoniocm]

Reason for change

The Zoom Preset menu displays hotkeys with a color scheme that is inconsistent with other tools in the application and is not optimized for dark mode, making them nearly invisible in dark mode. This PR addresses these inconsistencies and introduces a new, consistent visual style for all image tool hotkeys, improving usability and aesthetics in both light and dark modes. The changes include adjustments to sizing, colors, and alignment to ensure hotkeys appear as physical keys and are consistently right-aligned.

Screenshots

Before:

After:

Rollout strategy

This change involves only front-end visual updates and does not require a phased rollout or feature flags. The changes will be deployed with the next application release.

Testing

The following testing steps were performed to verify the changes:

• Visual Inspection (Light and Dark Modes): Verified that the hotkeys in the Zoom Presets menu and the other Image tools now have a consistent appearance in both light and dark modes. Ensured that the colors provide sufficient contrast for readability in both themes.
• Alignment Check: Confirmed that all Tool hotkeys are consistently right-aligned within their respective menus or displays.
• Sizing and Spacing: Verified that the size and spacing of the hotkeys are visually appropriate and consistent across the Tools.
• Accessibility Check (Contrast): Used browser developer tools to inspect the color contrast ratio of the hotkeys against their background in both light and dark modes to ensure they meet accessibility guidelines (WCAG AA).

Risks

There are minimal risks associated with this change as it primarily involves visual styling. However, potential risks include:

• Unexpected visual regressions: While thorough visual inspection was performed, there's a slight chance of unintended visual artifacts or inconsistencies on specific browsers or operating systems.
• User perception: Users might have become accustomed to the previous styling, although the new style aims for improved clarity and consistency.

Reviewer notes

Please pay close attention to the following during the review:

• Ensure the hotkey styling in the Zoom Presets menu is consistent with the new style implemented in other parts of the application.
• Verify that the hotkey text is easily readable in both light and dark modes, paying attention to color contrast.
• Check that the alignment and sizing of the hotkeys are consistent and visually appealing.

General notes

The new hotkey style is designed to mimic the appearance of physical keys, providing a more intuitive visual cue for users. This update improves the overall user experience by enhancing consistency and accessibility across the application.

[netlify]

✅ Deploy Preview for label-studio-docs-new-theme ready!

Name	Link
🔨 Latest commit	ae98ae6
🔍 Latest deploy log	https://app.netlify.com/sites/label-studio-docs-new-theme/deploys/681e2049dc9c5900085a2447
😎 Deploy Preview	https://deploy-preview-7490--label-studio-docs-new-theme.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for heartex-docs ready!

Name	Link
🔨 Latest commit	ae98ae6
🔍 Latest deploy log	https://app.netlify.com/sites/heartex-docs/deploys/681e2049e810bd00085fb78e
😎 Deploy Preview	https://deploy-preview-7490--heartex-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for label-studio-storybook ready!

Name	Link
🔨 Latest commit	ae98ae6
🔍 Latest deploy log	https://app.netlify.com/sites/label-studio-storybook/deploys/681e20498e2bed0008b78358
😎 Deploy Preview	https://deploy-preview-7490--label-studio-storybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[Copilot]

Pull Request Overview

A PR addressing visual inconsistencies in the hotkey styling for the Zoom Presets menu to improve appearance in dark mode.

• Updated background colors from var(--color-neutral-background) to var(--color-neutral-surface)
• Adjusted padding, margins, and box-shadow settings for improved alignment and a physical key look
• Revised flex layout and removed opacity styling for a clearer, more consistent visual presentation

Reviewed Changes

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

File	Description
web/libs/editor/src/components/Toolbar/Tool.scss	Updated background, padding, and box-shadow for hotkey styling
web/libs/editor/src/components/Toolbar/FlyoutMenu.scss	Adjusted layout (flex-direction and margins), removed opacity from shortcuts, and refined key element styling

Comments suppressed due to low confidence (1)

web/libs/editor/src/components/Toolbar/FlyoutMenu.scss:185

• [nitpick] It may be helpful to add a comment clarifying the intent behind removing the opacity on the __shortcut element, so future reviewers understand this design decision.

// Removed: opacity: 0.6;

[ricardoantoniocm]

/git merge

Workflow run
Successfully merged: rename web/libs/datamanager/src/components/App/{App.jsx => App.tsx} (73%)