[Fix]: Fixed Navbar dark mode navigation #1059

officeneerajsaini · 2024-10-24T05:28:32Z

This Pull Request Fixes the Navbar Navigation Color in Dark mode.

Issue Number:

Closes 🐛 Bug: Some Section need's Improvement #1057

Screenshots/videos:
Before:

Screen.Recording.2024-10-24.at.10.51.20.AM.mov

After :

Screen.Recording.2024-10-24.at.10.52.49.AM.mov

officeneerajsaini · 2024-10-24T05:32:36Z

In macOS, I'm encountering another issue with the Navbar search button. The search button's style contains a background-color property.

officeneerajsaini · 2024-10-24T05:37:07Z

github-actions · 2024-10-24T05:51:04Z

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name	Status	Preview	Last Commit
website	✅ Ready (View Log)	Visit Preview	`e7e3954`

codecov · 2024-10-24T05:51:39Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (7ecd915) to head (e7e3954).
Report is 70 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff            @@
##              main     #1059   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           10        10           
  Lines          373       373           
  Branches        94        94           
=========================================
  Hits           373       373

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

Bumps [husky](https://github.com/typicode/husky) from 9.1.5 to 9.1.6. - [Release notes](https://github.com/typicode/husky/releases) - [Commits](typicode/husky@v9.1.5...v9.1.6) --- updated-dependencies: - dependency-name: husky dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> fixed navbar dark mode navigation fixed fixed

officeneerajsaini · 2024-10-24T06:32:07Z

I'm sorry for making this pull request complex for the reviewer. Initially, I did my work well, but the package-lock.json and yarn.lock files were included. Then I made another commit, and I wanted to combine both commits into a single one. Due to some issues, I deleted my branch and then restored it. Now, I've combined both commits into one, but it also includes the previous merged commit. That's what has been happening with me.

DhairyaMajmudar · 2024-10-24T06:34:24Z

I'm sorry for making this pull request complex for the reviewer. Initially, I did my work well, but the package-lock.json and yarn.lock files were included. Then I made another commit, and I wanted to combine both commits into a single one. Due to some issues, I deleted my branch and then restored it. Now, I've combined both commits into one, but it also includes the previous merged commit. That's what has been happening with me.

No worries with that just remove the changes from yarn.lock and package.json files.

officeneerajsaini · 2024-10-24T06:35:28Z

I'm sorry for making this pull request complex for the reviewer. Initially, I did my work well, but the package-lock.json and yarn.lock files were included. Then I made another commit, and I wanted to combine both commits into a single one. Due to some issues, I deleted my branch and then restored it. Now, I've combined both commits into one, but it also includes the previous merged commit. That's what has been happening with me.

No worries with that just remove the changes from yarn.lock and package.json files.

Yeah I did 😄

officeneerajsaini · 2024-10-24T06:36:49Z

The commit #1049 is also included in my pull request.

package.json

yarn.lock

officeneerajsaini · 2024-10-24T17:19:43Z

@DhairyaMajmudar Please Review Code now.

DhairyaMajmudar · 2024-10-25T05:38:36Z

@officeneerajsaini pls. don't change the font colors

officeneerajsaini · 2024-10-25T06:03:36Z

@officeneerajsaini pls. don't change the font colors

In dark mode, some light colors look better than a dark-on-dark combination.

Consistent color:

Screen.Recording.2024-10-25.at.11.26.19.AM.mov

Some Lightness :

Screen.Recording.2024-10-25.at.11.25.50.AM.mov

Should I go with the website theme color?

benjagm

Looks great, Thanks!!

However I do prefer the white color for the navbar fonts instead that light grey. Can we change that?

officeneerajsaini · 2024-10-30T12:19:04Z

Screen.Recording.2024-10-30.at.5.46.20.PM.mov

officeneerajsaini · 2024-11-06T11:08:59Z

@benjagm now take a look on code

benjagm · 2024-11-08T06:13:20Z

It looks better. However, the blue color is difficult to distinguish from the background. Can we find something lighter? Why not just underlying the current section instead of changing the color?

officeneerajsaini · 2024-11-08T10:42:48Z

Screen.Recording.2024-11-08.at.4.18.13.PM.mov

DhairyaMajmudar · 2024-11-08T12:52:14Z

styles/globals.css

It seems like this class is no longer used, if it is so you can remove it.

Dhairya, I changed the grey color to white in response to Benjamin's request.

Looks great, Thanks!!

However I do prefer the white color for the navbar fonts instead that light grey. Can we change that?

I also added a new CSS property to show an underline on the current page, so some additional CSS properties need to be added. 😄

This class is used when there are 6 community meetings, and events are available.

Without class :

with class :

Awsm! With that then keep it don't remove

benjagm · 2024-11-10T07:48:24Z

Hi everyone.

I checked the current version and found this behavior:

Light style:
- Style looks good
- When navigating using links in the header, all styles to highlight the current section work with the exception of Tools. When in tools there is no style in the header highlight the current version.
Drak Style:
- When navigating using links in the header, the styles to highlight the current version don't work.

officeneerajsaini · 2024-11-10T09:33:13Z

Light style:

Style looks good

When navigating using links in the header, all styles to highlight the current section work with the exception of Tools. When in tools there is no style in the header highlight the current version.

Yes , Found that part too .

benjagm · 2024-11-23T09:07:56Z

@officeneerajsaini we are very close! Let's make the last change and push it. Great work so far. Thanks for your patience.

benjagm · 2024-12-13T06:59:07Z

Hi @officeneerajsaini . Is there any update on this?

officeneerajsaini · 2024-12-13T14:06:11Z

Hi @officeneerajsaini . Is there any update on this?

Screen.Recording.2024-12-13.at.7.28.53.PM.mov

I fixed the last issue related to the Tools navigation behaviour. This PR is now ready to merge.

Here’s a summary of what has been done in this PR:

Fixed the active page underlining issue in Dark Mode.
Resolved the issue where the active page was not showing correctly on the Tools page in both Light and Dark modes.

benjagm · 2024-12-13T14:46:20Z

Thanks @officeneerajsaini . Ok I think the reason why the preview deployment I checked is outdated is because the deployment work failed due to some format checks:

https://github.com/json-schema-org/website/actions/runs/11986321387/job/33419247261?pr=1059

Can you run prettier on that file? I am so looking forward to merge it.

thanks for your patience. It has been a very busy weeks for me on my new job.

officeneerajsaini · 2024-12-13T17:51:04Z

@benjagm Yeah, I know you were very busy at that time, which is why I waited for your response.
I have done everything that was needed. On my local host, everything is working well, but in this preview development, I can't see the underlining navigation.

officeneerajsaini · 2024-12-17T13:28:39Z

Now This Code Ready To Merge @benjagm Please take a Look.

benjagm

Thanks for the hard work Neeraj. I just added a small change to make it work. Kudos!

officeneerajsaini · 2024-12-21T16:34:02Z

Thanks, Benja 🫠

officeneerajsaini requested a review from a team as a code owner October 24, 2024 05:28

github-actions bot deployed to Preview October 24, 2024 05:51 View deployment

github-actions bot deployed to Preview October 24, 2024 06:00 View deployment

officeneerajsaini closed this Oct 24, 2024

officeneerajsaini deleted the improvement branch October 24, 2024 06:10

officeneerajsaini restored the improvement branch October 24, 2024 06:11

officeneerajsaini reopened this Oct 24, 2024

dependabot bot and others added 2 commits October 24, 2024 11:49

fixed

1dfe08f

officeneerajsaini force-pushed the improvement branch from d495e6d to 1dfe08f Compare October 24, 2024 06:22

github-actions bot deployed to Preview October 24, 2024 06:25 View deployment

DhairyaMajmudar added the Hacktoberfest-accepted Pull requests accepted for Hacktoberfest'24 label Oct 24, 2024

DhairyaMajmudar reviewed Oct 24, 2024

View reviewed changes

package.json Outdated Show resolved Hide resolved

yarn.lock Outdated Show resolved Hide resolved

Update package.json

5d6eef6

github-actions bot deployed to Preview October 24, 2024 07:02 View deployment

officeneerajsaini added 2 commits October 24, 2024 12:33

Update yarn.lock

e96cf06

Update yarn.lock

711decc

github-actions bot deployed to Preview October 24, 2024 07:08 View deployment

benjagm requested changes Oct 26, 2024

View reviewed changes

officeneerajsaini and others added 2 commits October 30, 2024 17:41

white text in dark mode

3c113a5

Update next-env.d.ts

09b2376

github-actions bot deployed to Preview October 30, 2024 12:16 View deployment

DhairyaMajmudar reviewed Nov 8, 2024

View reviewed changes

DhairyaMajmudar requested a review from benjagm November 8, 2024 12:52

Update Layout.tsx

1923643

github-actions bot deployed to Preview November 8, 2024 14:02 View deployment

fixes tools page navigation active class

f44ddf0

Update Format

5e34158

github-actions bot deployed to Preview December 13, 2024 17:32 View deployment

Update Layout.tsx

d1f482f

github-actions bot deployed to Preview December 20, 2024 17:14 View deployment

Update tailwind.config.js

e7e3954

github-actions bot deployed to Preview December 21, 2024 15:10 View deployment

benjagm approved these changes Dec 21, 2024

View reviewed changes

benjagm merged commit 179a1d3 into json-schema-org:main Dec 21, 2024
8 of 9 checks passed

officeneerajsaini deleted the improvement branch December 21, 2024 16:34

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Fix]: Fixed Navbar dark mode navigation #1059

[Fix]: Fixed Navbar dark mode navigation #1059

officeneerajsaini commented Oct 24, 2024

officeneerajsaini commented Oct 24, 2024

officeneerajsaini commented Oct 24, 2024

github-actions bot commented Oct 24, 2024 •

edited

Loading

codecov bot commented Oct 24, 2024 •

edited

Loading

officeneerajsaini commented Oct 24, 2024

DhairyaMajmudar commented Oct 24, 2024

officeneerajsaini commented Oct 24, 2024

officeneerajsaini commented Oct 24, 2024

officeneerajsaini commented Oct 24, 2024

DhairyaMajmudar commented Oct 25, 2024

officeneerajsaini commented Oct 25, 2024

benjagm left a comment

officeneerajsaini commented Oct 30, 2024

officeneerajsaini commented Nov 6, 2024

benjagm commented Nov 8, 2024

officeneerajsaini commented Nov 8, 2024 •

edited

Loading

DhairyaMajmudar Nov 8, 2024

officeneerajsaini Nov 8, 2024

officeneerajsaini Nov 9, 2024

DhairyaMajmudar Nov 9, 2024

benjagm commented Nov 10, 2024

officeneerajsaini commented Nov 10, 2024

benjagm commented Nov 23, 2024

benjagm commented Dec 13, 2024

officeneerajsaini commented Dec 13, 2024

benjagm commented Dec 13, 2024

officeneerajsaini commented Dec 13, 2024

officeneerajsaini commented Dec 17, 2024

benjagm left a comment

officeneerajsaini commented Dec 21, 2024 •

edited

Loading

[Fix]: Fixed Navbar dark mode navigation #1059

[Fix]: Fixed Navbar dark mode navigation #1059

Conversation

officeneerajsaini commented Oct 24, 2024

officeneerajsaini commented Oct 24, 2024

officeneerajsaini commented Oct 24, 2024

github-actions bot commented Oct 24, 2024 • edited Loading

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

codecov bot commented Oct 24, 2024 • edited Loading

Codecov Report

officeneerajsaini commented Oct 24, 2024

DhairyaMajmudar commented Oct 24, 2024

officeneerajsaini commented Oct 24, 2024

officeneerajsaini commented Oct 24, 2024

officeneerajsaini commented Oct 24, 2024

DhairyaMajmudar commented Oct 25, 2024

officeneerajsaini commented Oct 25, 2024

benjagm left a comment

Choose a reason for hiding this comment

officeneerajsaini commented Oct 30, 2024

officeneerajsaini commented Nov 6, 2024

benjagm commented Nov 8, 2024

officeneerajsaini commented Nov 8, 2024 • edited Loading

DhairyaMajmudar Nov 8, 2024

Choose a reason for hiding this comment

officeneerajsaini Nov 8, 2024

Choose a reason for hiding this comment

officeneerajsaini Nov 9, 2024

Choose a reason for hiding this comment

DhairyaMajmudar Nov 9, 2024

Choose a reason for hiding this comment

benjagm commented Nov 10, 2024

officeneerajsaini commented Nov 10, 2024

benjagm commented Nov 23, 2024

benjagm commented Dec 13, 2024

officeneerajsaini commented Dec 13, 2024

benjagm commented Dec 13, 2024

officeneerajsaini commented Dec 13, 2024

officeneerajsaini commented Dec 17, 2024

benjagm left a comment

Choose a reason for hiding this comment

officeneerajsaini commented Dec 21, 2024 • edited Loading

github-actions bot commented Oct 24, 2024 •

edited

Loading

codecov bot commented Oct 24, 2024 •

edited

Loading

officeneerajsaini commented Nov 8, 2024 •

edited

Loading

officeneerajsaini commented Dec 21, 2024 •

edited

Loading