Improve UI/UX (Monaco editor): Enhance Editor Behavior on Light Theme.

[sahilkhan117]

Closes #282

Title

Improve UI/UX (Monaco editor): Enhance Editor Behavior on Light Theme.

Summary

This PR enhances the UI/UX of Monaco Editor, especially for the light theme, by:

1. Improving the background and selection colors.
2. Adding refined line highlighting to boost readability.
3. Introducing a border-radius and subtle scaling on word highlights for a smoother visual effect.

Updated UI Screenshots

Screenshot of When we move cursor to some word:

Screenshot of When we select some word (for copy or cut)

Updated Code

Update monaco.editor.defineTheme block with wordHighlightTextBackground and selectionBackground.

monaco.editor.defineTheme(name, {
  base,
  inherit: true,
  rules: [],
  colors: {
    "editor.background": backgroundColor,
    "editor.foreground": textColor,
    "editor.lineHighlightBorder": "#c5b58e60",
    "editor.wordHighlightTextBackground": "#88888860",
    "editor.selectionBackground": "#4A85BF80",
  },
});

Add Border radius with style tag using .wordHighlightText class.

<style>
  {
  `.editorwrapper .wordHighlightText {
      border-radius: 3px;
      scale: 1.05;
  }`
  }
</style>

Updated Behavior

Light Theme:

• The background and cursor pointer actions now have better contrast, enhancing text readability.
• Word selection and highlighting are more visually appealing with improved background colors.
• Added rounded corners and a subtle scaling effect on word highlights for a smoother experience.

Dark Theme:

• The background contrast and selection remain visually clear and consistent.
• The new styling enhancements also apply smoothly to the dark theme, maintaining a clean and polished appearance.

Related Issues

• Issue Improve UI/UX (Monaco Editor): need to Enhance Editor background color and Styling on Light Theme #282

Author Checklist

• Ensure you provide a DCO sign-off for your commits using the --signoff option of git commit.
• Commits messages follow AP format
• Merging to main from fork:sahilkhan117/i282/update-UI-of-Monaco-Editor

@DianaLease can you please review my PR and Let me know if there is any changes or corrections regarding this problem.

[netlify]

✅ Deploy Preview for ap-template-playground ready!

Name	Link
🔨 Latest commit	4ba8807
🔍 Latest deploy log	https://app.netlify.com/sites/ap-template-playground/deploys/67d93f7542c3df0008cd4a68
😎 Deploy Preview	https://deploy-preview-283--ap-template-playground.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.