fix: OPTIC-2148: Icons in the circles under pre-annotation regions are missing

Reason for change

The checkmark and cross icons on the preannotation circles were not displaying correctly. Additionally, the colors of the Accept and Reject buttons were not aligned with the new branding guidelines. This PR addresses both of these issues to improve the visual consistency and user experience.

This PR also introduces a smoother transition animation to the hover state of the buttons as well as displaying the pointer cursor when hovering them.

Screenshots

• Before:

• After:

Rollout strategy

No specific rollout strategy is required for this visual fix. The changes will be deployed with the next release.

Testing

1. Log in to the LSO application in the specified environment.
2. Navigate to a project with a connected model and interactive preannotations enabled (as per the preconditions).
3. Open a task and ensure a preannotation is displayed for a selected label.
4. Hover over the circles under the preannotation region.
5. Verify that the left circle now displays a white cross on a red background (Reject).
6. Verify that the right circle now displays a white checkmark on a green background (Accept).
7. Confirm that the Accept and Reject buttons in the preannotation interface reflect the new branding colors.

Risks

Low. This PR primarily involves visual corrections and should not introduce any functional regressions.

Reviewer notes

• Please pay close attention to the correct rendering of the icons and the updated button colors.
• Ensure that the changes are consistent across different browsers if possible.

General notes

• The color adjustments for the Accept and Reject buttons were made to align with the latest branding specifications.
• The fix ensures that users can clearly distinguish between the accept and reject actions for preannotations through both color and iconography.

✅ Deploy Preview for label-studio-storybook ready!

Name	Link
🔨 Latest commit	b3ec229dfb4aed2949da428f5489e76504fa0674
🔍 Latest deploy log	https://app.netlify.com/sites/label-studio-storybook/deploys/6824a962267b4200084428c1
😎 Deploy Preview	https://deploy-preview-7506--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.

✅ Deploy Preview for heartex-docs canceled.

Name	Link
🔨 Latest commit	b3ec229dfb4aed2949da428f5489e76504fa0674
🔍 Latest deploy log	https://app.netlify.com/sites/heartex-docs/deploys/6824a96268a156000801fcaf

✅ Deploy Preview for label-studio-docs-new-theme canceled.

Name	Link
🔨 Latest commit	b3ec229dfb4aed2949da428f5489e76504fa0674
🔍 Latest deploy log	https://app.netlify.com/sites/label-studio-docs-new-theme/deploys/6824a9624002fa000816b7db

This PR is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 10 days.

This PR was closed because it has been stalled for 10 days with no activity.