Theme and UI updates

[rkvishwa]

This pull request introduces several enhancements to the Sonar Code Editor's user interface, focusing on customizable appearance, improved branding, and better visual consistency. The most notable changes are the addition of an accent color picker, an "About" section in admin settings, and updates to the welcome screens and icon usage. The changes also ensure that the accent color is consistently applied across components and themes.

Appearance Customization

• Added an accent color picker to the Appearance tab in AdminSettingsModal, allowing users to select from preset colors or a custom color, with a reset option. The accent color is now passed as a prop and used throughout the interface.

• Updated CSS files to use the new --user-accent-rgb variable for backgrounds and borders, ensuring the accent color is applied consistently in badges, remote cursors, and modal components.

Branding and Information

• Added an "About" tab to the admin settings modal, displaying app icon, version, description, links to GitHub and the official website, license info, and Knurdz branding

• Updated welcome screens for both the editor and folder views with improved gradients, animated shine effects, and custom radar icons for a more modern and branded look.

Icon and UI Consistency

• Enhanced sidebar navigation in admin settings with Lucide icons for each tab, added dividers, and improved visual grouping.

• Updated tab icons and their colors in the editor to use the accent color variable for better theme consistency.

• Theme Improvements

• Defined custom Monaco editor themes (sonar-dark and sonar-light) to improve background and line highlight colors, matching the overall application theme.

---

These changes collectively enhance the user experience by offering more customization, clearer branding, and consistent visuals throughout the application.

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 594ddc23-be47-4f19-8a3f-b32636f21c1b

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch theme-update

📝 Coding Plan

• Generate coding plan for human review comments

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[appwrite]

Exam-IDE

Project ID: 69a964ef003091fbebdf

Sites (1)

Site	Status	Logs	Preview	QR
Sonar-Code-Editor 69b41a9f00321cbe83e4	Failed	View Logs	Preview URL

Tip

HTTPS and SSL certificates are handled automatically for all your Sites