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

Draft
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

NihadBadalov
Copy link

@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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
needs:review this PR needs a review by maintainers or other community members question Further information is requested
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