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

Feat: Add background color change on hover to nav links #4494

Merged
merged 4 commits into from
Jun 3, 2024

Conversation

NihadBadalov
Copy link
Contributor

@NihadBadalov NihadBadalov commented Feb 14, 2024

⚠️⚠️⚠️ Since we do not accept all types of pull requests and do not want to waste your time. Please be sure that you have read pull request rules:
https://github.com/louislam/uptime-kuma/blob/master/CONTRIBUTING.md#can-i-create-a-pull-request-for-uptime-kuma

Tick the checkbox if you understand [x]:

  • I have read and understand the pull request rules.

Description

Fixes #1753

Type of change

Please delete any options that are not relevant.

  • User interface (UI)

Checklist

  • My code follows the style guidelines of this project
  • I ran ESLint and other linters for modified files
  • I have performed a self-review of my own code and tested it
  • I have commented my code, particularly in hard-to-understand areas (including JSDoc for methods)
  • My changes generates no new warnings
  • My code needed automated testing. I have added them (this is optional task)

Screenshots (if any)

Theme hovering over selected hovering over non-selected
dark image image
light image image

Copy link
Collaborator

@CommanderStorm CommanderStorm left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This does not really look like the other button-hover effects we already have.
I see why you thought that this would be the correct approach. The item-hoverable things, such as single status pages, behave this way.
I think currently these are buttons (maybe they should not? => unclear)

=> making this primary on hover not truly fit into the current design language as far as I see. (open to discussion)

I would expect this to be a light-gray in the light mode and a dark gray in the dark mode, as the other buttons "lighten" on hover.

@CommanderStorm CommanderStorm added the question Further information is requested label Feb 15, 2024
@CommanderStorm CommanderStorm marked this pull request as draft February 15, 2024 00:53
@NihadBadalov

This comment was marked as outdated.

@NihadBadalov NihadBadalov marked this pull request as ready for review February 15, 2024 07:16
Copy link
Collaborator

@CommanderStorm CommanderStorm left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have tested this PR and the current way this is implemented is not mergable. I have updated the screenshots in the description.

Again, my communication was not clear in the review. Need to work on that ^^

In the dark mode the currently selected button is now just black on dark gray if hovered over, and in the light mode it does not have any visual effect I can perceive.
I would expect this to behave like our other buttons…

The hover effect for non-selected looks nice though 👍🏻

@CommanderStorm CommanderStorm marked this pull request as draft February 17, 2024 23:35
@CommanderStorm CommanderStorm added the needs:review this PR needs a review by maintainers or other community members label May 19, 2024
@CommanderStorm CommanderStorm added area:dashboard The main dashboard page where monitors' status are shown and removed question Further information is requested labels May 28, 2024
@CommanderStorm CommanderStorm marked this pull request as ready for review June 3, 2024 19:04
@CommanderStorm CommanderStorm removed the needs:review this PR needs a review by maintainers or other community members label Jun 3, 2024
@CommanderStorm
Copy link
Collaborator

Thanks for the better design! 🎉

Note

This PR is part of the v2.0 merge window => see #4500 for the bugs that need to be addressed before we can ship this release ^^

All changes in this PR are small and uncontroversial ⇒ merging with junior maintainer approval

@CommanderStorm CommanderStorm merged commit a00b4ed into louislam:master Jun 3, 2024
10 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area:dashboard The main dashboard page where monitors' status are shown
Projects
None yet
Development

Successfully merging this pull request may close these issues.

The nav-links Status page and Dashboard don't have :hover-styling
2 participants