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

fix: Consistent hover styles for tabs & improved dark mode side menu UX #5133

Merged

Conversation

Dcode2100
Copy link
Contributor

@Dcode2100 Dcode2100 commented Feb 19, 2025

Thanks for submitting a PR! Please check the boxes below:

  • I have added information to docs/ if required so people know about the feature!
  • I have filled in the "Changes" section below?
  • I have filled in the "How did you test this code" section below?
  • I have used a Conventional Commit title for this Pull Request

Changes

Problem Statement -

  1. On hovering on tabs and side menu items for the primary color gets activated on title but not all the icons with it because we are using icons and jsx randomly causing inconsistent in hover effect on each tabs and sidemenu
  2. In dark mode the sidemenu when user hovers they cannot see any feedback on hovering .

Fix -

  1. I have enabled hover class for all the Tabs and side menu
    Before Changes -
    image

After Changes -
image

2.Have added two different background color on active and hover for improving user experience.
I have added different background colors for active and hover states to enhance the user experience.
Before Changes -
image

After Changes -
image

Please describe.

How did you test this code?

  • These are hover effect and UI fixes, manually tested in both dark and light modes.

Please describe.
Test hover effects in both dark mode and light mode on the following pages:
a. Organizations Page

  • Hover over the tabs and verify that the hover color updates consistently.
    b. Projects Page
  • Hover over the tabs and ensure uniform hover styling.
  • Hover over the side menu and check if the dark mode hover effect is applied correctly.

@Dcode2100 Dcode2100 requested a review from a team as a code owner February 19, 2025 06:38
@Dcode2100 Dcode2100 requested review from tiagoapolo and removed request for a team February 19, 2025 06:38
Copy link

vercel bot commented Feb 19, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Skipped Deployment
Name Status Preview Comments Updated (UTC)
docs ⬜️ Ignored (Inspect) Visit Preview Feb 19, 2025 6:38am

Copy link

vercel bot commented Feb 19, 2025

Someone is attempting to deploy a commit to the Flagsmith Team on Vercel.

A member of the Team first needs to authorize it.

@github-actions github-actions bot added the front-end Issue related to the React Front End Dashboard label Feb 19, 2025
Copy link
Contributor

github-actions bot commented Feb 19, 2025

Uffizzi Preview deployment-61080 was deleted.

@kyle-ssg kyle-ssg self-requested a review February 19, 2025 10:08
@kyle-ssg
Copy link
Member

Awesome, thanks!

@kyle-ssg kyle-ssg merged commit 145bf1f into Flagsmith:main Feb 19, 2025
19 of 29 checks passed
@Dcode2100 Dcode2100 deleted the fix/tab-and-aside-navbar-hover-styles branch February 19, 2025 10:12
@Dcode2100
Copy link
Contributor Author

Looking forward to making more significant contributions.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
front-end Issue related to the React Front End Dashboard
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants