Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(ui): beautify ai interpret panel styling #714

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

elliotxx
Copy link
Collaborator

@elliotxx elliotxx commented Jan 11, 2025

What type of PR is this?

/kind refactor

What this PR does / why we need it:

This PR updates the styling of the interpret_panel component to enhance its visual design and user experience. The changes include:

  • Beautify ai interpret panel styling
  • Improve re-scan and collapse button UI interactions
  • Beautify font style in summary and issue card

These improvements make the component more engaging and aesthetically pleasing.

Old:

image

image

image

Now:

image

image

image

Which issue(s) this PR fixes:

Fixes #

- Adjust box shadow and border colors for better contrast
- Update radial gradients for a smoother background effect
- Add a rotating background animation for visual interest
- Enhance header styling with gradient text and backdrop filter

These changes improve the visual design and user experience of the interpret_panel component, making it more engaging and aesthetically pleasing.
@elliotxx elliotxx added this to the v0.6.0 milestone Jan 11, 2025
@elliotxx elliotxx self-assigned this Jan 11, 2025
@elliotxx elliotxx changed the title style: update interpret_panel styling refactor(ui): pretty ai interpret panel styling Jan 11, 2025
@elliotxx elliotxx changed the title refactor(ui): pretty ai interpret panel styling refactor(ui): beautify ai interpret panel styling Jan 11, 2025
- Refactor CSS gradients for better readability by breaking long lines
- Enhance UI components with hover and active states for better user feedback
- Remove redundant code and improve code organization in stylesheets

These changes improve the maintainability of the codebase and enhance the user experience with more responsive UI interactions.
- Adjust font families, sizes, and weights for better readability
- Add hover effects and color gradients for interactive elements
- Introduce latency level classification (normal, warning, error)
- Improve metrics server display with enabled/disabled states
- Refactor CSS for better maintainability and consistency

These changes improve the visual appeal and user interaction experience, ensuring a more polished and intuitive interface.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant