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

Nahiyan_Dark mode on dropdown items #2328

Merged
merged 3 commits into from
Jul 6, 2024

Conversation

Nahiyan-16
Copy link
Contributor

Description

Dark mode is implemented on all dropdown items on the header

Related PRS (if any):

This frontend PR is related to the dev backend

How to test:

  1. check into current branch
  2. do npm install and npm run start:local to run this PR locally
  3. Clear site data/cache
  4. log as owner
  5. go to any page besides the dashboard or timelog page (They seem to be broken in development)
  6. Once you can see the header, select on reports, other links and welcome dropdowns.
  7. verify dark mode is working properly both in light mode and dark

Screenshots or videos of changes:

Screenshot 2024-06-06 211226
Screenshot 2024-06-06 211243

@Vijeth-V
Copy link

Vijeth-V commented Jun 8, 2024

Good job Nahiyan, this works perfectly well.

Screenshot 2024-06-08 at 2 37 22 PM

cvtqx
cvtqx previously approved these changes Jun 9, 2024
Copy link
Contributor

@cvtqx cvtqx left a comment

Choose a reason for hiding this comment

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

All the drop down elements look dark in dark mode and light in light mode, just as expected.

Video:
https://github.com/OneCommunityGlobal/HighestGoodNetworkApp/assets/107726913/25803993-6515-4d18-8ba2-961fcd13fcc6

Copy link
Contributor

@Logeshwari-Renu Logeshwari-Renu 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 the PR and the dark mode works on the Reports, Other links and User dropdowns available in the header.
When switched back to Light mode the dropdown changes to light colour.
The Functionality for dark mode on dropdown in headers works fine!

PR2328_1
PR2328_2
PR2328_3

aaryaneil
aaryaneil previously approved these changes Jun 15, 2024
Copy link
Contributor

@aaryaneil aaryaneil left a comment

Choose a reason for hiding this comment

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

Tested the PR and the changes work as expected. Added screenshots for light and dark mode drop down menus.
Screenshot 2024-06-14 at 8 49 28 PM
Screenshot 2024-06-14 at 8 49 31 PM
Screenshot 2024-06-14 at 8 49 34 PM
Screenshot 2024-06-14 at 8 49 42 PM
Screenshot 2024-06-14 at 8 49 44 PM
Screenshot 2024-06-14 at 8 49 46 PM

tianyangL11
tianyangL11 previously approved these changes Jun 15, 2024
Copy link

@tianyangL11 tianyangL11 left a comment

Choose a reason for hiding this comment

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

Great! It work as expected
607abc08bd3aa19a4787968be3f2f92
09280ee6d8e5212cb1663fd57a1c1fc
a348e0b5b67ced805b4cc5fa4fa1720

Copy link
Contributor

@KurtisIvey KurtisIvey left a comment

Choose a reason for hiding this comment

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

I might come across as a stickler for this one, but i'm requesting changes for two reasons.

  1. the "hello username" is in the same font color as the actual drop down selector links. It should be lighter or modified to a less intuitively interactive color as it is in light mode.
    Screenshot 2024-06-15 at 4 13 28 PM

  2. There's no reason to lighten the text as the hover color activates. Normally, text lightens in color when in dark mode and hovered upon. Just leave the text color as white, so the contrast ratio doesn't get worse at the very least.
    Screenshot 2024-06-15 at 4 14 26 PM

@KurtisIvey
Copy link
Contributor

Changes look great. If you can clear up the merge conflict please and then shoot me a slack message once it's done, so I can review it again when I get off work.

Copy link
Contributor

@KurtisIvey KurtisIvey left a comment

Choose a reason for hiding this comment

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

Everything checks out after clearing up the merge conflict. Great Job!
image
image

@one-community one-community merged commit 6cc06ed into development Jul 6, 2024
1 check passed
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.

8 participants