Button UI enhancement

[DiyaMenon]

✨ Improved UI for the Run and Help buttons.

Run Button

• Added gradient background for better depth.
• Added subtle sheen animation on hover using ::after.
• Improved hover and active states with smoother transitions.
• Adjusted box-shadow for a softer lift effect.

Help Button

• Added Font Awesome question icon (fa-circle-info).
• Updated hover and active styles for better interactivity.
• Improved color contrast and button visibility.

General UI

• Added spacing (gap: 14px) between buttons.
• Created a shared .animated-btn class for consistency.
• Integrated Font Awesome via CDN.

Summary by CodeRabbit

• New Features

  • Icon-enhanced Run and Help buttons with animated styling.
  • Help modal styling added to enable an improved in-app help experience.

• Style

  • Unified UI spacing, borders, typography, and rounded corners across panels and headers.
  • Enhanced button visuals: gradients, animated overlays, and refined hover/active effects.
  • Improved layout and readability for editor, canvas, and output areas.

• Refactor

  • Consolidated styles into reusable classes for consistency and easier maintenance.

[coderabbitai]

Warning

.coderabbit.yaml has a parsing error

The CodeRabbit configuration file in this repository has a parsing error and default settings were used instead. Please fix the error(s) in the configuration file. You can initialize chat with CodeRabbit to get help with the configuration file.

💥 Parsing errors (1)

Validation error: Invalid enum value. Expected 'de' | 'de-DE' | 'de-AT' | 'de-CH' | 'en' | 'en-US' | 'en-AU' | 'en-GB' | 'en-CA' | 'en-NZ' | 'en-ZA' | 'es' | 'es-AR' | 'fr' | 'fr-CA' | 'fr-CH' | 'fr-BE' | 'nl' | 'nl-BE' | 'pt-AO' | 'pt' | 'pt-BR' | 'pt-MZ' | 'pt-PT' | 'ar' | 'ast-ES' | 'ast' | 'be-BY' | 'be' | 'br-FR' | 'br' | 'ca-ES' | 'ca' | 'ca-ES-valencia' | 'ca-ES-balear' | 'da-DK' | 'da' | 'de-DE-x-simple-language' | 'el-GR' | 'el' | 'eo' | 'fa' | 'ga-IE' | 'ga' | 'gl-ES' | 'gl' | 'it' | 'ja-JP' | 'ja' | 'km-KH' | 'km' | 'ko-KR' | 'ko' | 'pl-PL' | 'pl' | 'ro-RO' | 'ro' | 'ru-RU' | 'ru' | 'sk-SK' | 'sk' | 'sl-SI' | 'sl' | 'sv' | 'ta-IN' | 'ta' | 'tl-PH' | 'tl' | 'tr' | 'uk-UA' | 'uk' | 'zh-CN' | 'zh' | 'crh-UA' | 'crh' | 'cs-CZ' | 'cs' | 'nb' | 'no' | 'nl-NL' | 'de-DE-x-simple-language-DE' | 'es-ES' | 'it-IT' | 'fa-IR' | 'sv-SE' | 'de-LU' | 'fr-FR' | 'bg-BG' | 'bg' | 'he-IL' | 'he' | 'hi-IN' | 'hi' | 'vi-VN' | 'vi' | 'th-TH' | 'th' | 'bn-BD' | 'bn', received 'java' at "language"

⚙️ Configuration instructions

• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Walkthrough

The HTML adds a Font Awesome CDN link and updates Help/Run button markup to use new classes and icons. The CSS replaces ID-based button styles with reusable classes, restructures layout/typography for panels and outputs, and adds modal/docs styling for a help dialog.

Changes

Cohort / File(s)	Summary
Icon & button markup kidcode-web/src/main/resources/static/index.html	Added Font Awesome stylesheet; replaced plain Help/Run buttons with elements using animated-btn, help-btn, run-btn and icon spans.
Button & icon styling kidcode-web/src/main/resources/static/style.css	Introduced reusable button classes (.animated-btn, .run-btn, .help-btn), .button-icon, gradients, overlays, hover/active and animation effects.
Layout & component refactor kidcode-web/src/main/resources/static/style.css	Consolidated and standardized styles for container, editor-panel, visual-panel, panel-header, editor/canvas/output areas (flex layout, spacing, borders, typography, radii).
Help modal & docs styling kidcode-web/src/main/resources/static/style.css	Added .modal, .modal.hidden, .modal-content, .close-button and .help-docs rules, including typography, code/table formatting, and focus/visibility handling.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

I twitch my whiskers—icons gleam and hum,
Buttons in a row, ready to run or come.
Panels tidy up like leaves in spring,
A cozy modal opens—help’s a friendly thing.
I hop, I click, I grin—new styles make me hum. 🐇✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title “Button UI enhancement” succinctly conveys the primary change by indicating that the user interface for buttons has been improved, directly reflecting the added styling and animations for the Run and Help buttons. It is concise, clear, and allows team members to grasp the main purpose of the pull request at a glance.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 431f066 and 6bd13c8.

📒 Files selected for processing (1)

• kidcode-web/src/main/resources/static/index.html (2 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• kidcode-web/src/main/resources/static/index.html

---

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

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2121ad3 and 431f066.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (2)

• kidcode-web/src/main/resources/static/index.html (2 hunks)
• kidcode-web/src/main/resources/static/style.css (1 hunks)

[DiyaMenon]

✅ Fixed — added the official SRI hash and referrerpolicy attribute for Font Awesome.