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

Refine NextLogo Accessibility and Styling #74869

Merged
merged 10 commits into from
Jan 14, 2025
Merged

Refine NextLogo Accessibility and Styling #74869

merged 10 commits into from
Jan 14, 2025

Conversation

gaojude
Copy link
Contributor

@gaojude gaojude commented Jan 14, 2025

This PR addresses the following issues and improvements:

  1. Apply a style reset to Storybook for consistency.

  2. Update NextLogo element from div to button to improve accessibility.

  3. Add a press effect to shrink NextLogo for better interactivity.

  4. Ensure the pointer cursor is consistent across the entire NextLogo area.

  5. Add a box shadow to NextLogo for improved visual depth.

  6. Optimize animation by refining speed and sequence.

  7. Replace hardcoded colors with CSS variables to enable dark mode support.

  8. Fix overflow issues with effects.

  9. Resolve black background overflow problem.

  10. Enhance SVG anti-aliasing for a cleaner appearance.

  11. Center the logo by moving it to the right by 1 pixel.

This PR serves as a fast-follow to #74833

@ijjk ijjk added created-by: Next.js team PRs by the Next.js team. type: next labels Jan 14, 2025
Copy link
Contributor Author

gaojude commented Jan 14, 2025

This stack of pull requests is managed by Graphite. Learn more about stacking.

@gaojude gaojude changed the title fix animation sequence, speed, and positioning polish dev overlay indicator Jan 14, 2025
@gaojude gaojude marked this pull request as ready for review January 14, 2025 16:25
@gaojude gaojude changed the title polish dev overlay indicator enhance Next.js logo button in dev tools indicator Jan 14, 2025
@gaojude gaojude changed the title enhance Next.js logo button in dev tools indicator Enhance Next.js logo button in dev tools indicator Jan 14, 2025
@gaojude gaojude changed the title Enhance Next.js logo button in dev tools indicator Enhance NextLogo Styling, Accessibility, and Dark Mode Support Jan 14, 2025
@gaojude gaojude changed the title Enhance NextLogo Styling, Accessibility, and Dark Mode Support Refine NextLogo Accessibility and Styling Jan 14, 2025
@gaojude gaojude requested a review from devjiwonchoi January 14, 2025 16:35
@ijjk
Copy link
Member

ijjk commented Jan 14, 2025

Stats from current PR

Default Build (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary vercel/next.js jude/polish Change
buildDuration 17.1s 15s N/A
buildDurationCached 14.1s 11.9s N/A
nodeModulesSize 417 MB 417 MB ⚠️ +18.8 kB
nextStartRea..uration (ms) 414ms 415ms N/A
Client Bundles (main, webpack)
vercel/next.js canary vercel/next.js jude/polish Change
5306-HASH.js gzip 53.5 kB 53.4 kB N/A
8276.HASH.js gzip 169 B 168 B N/A
8377-HASH.js gzip 5.44 kB 5.44 kB N/A
bccd1874-HASH.js gzip 52.9 kB 52.9 kB N/A
framework-HASH.js gzip 57.5 kB 57.5 kB N/A
main-app-HASH.js gzip 240 B 242 B N/A
main-HASH.js gzip 34.2 kB 34.2 kB N/A
webpack-HASH.js gzip 1.71 kB 1.71 kB N/A
Overall change 0 B 0 B
Legacy Client Bundles (polyfills)
vercel/next.js canary vercel/next.js jude/polish Change
polyfills-HASH.js gzip 39.4 kB 39.4 kB
Overall change 39.4 kB 39.4 kB
Client Pages
vercel/next.js canary vercel/next.js jude/polish Change
_app-HASH.js gzip 193 B 193 B
_error-HASH.js gzip 193 B 193 B
amp-HASH.js gzip 512 B 510 B N/A
css-HASH.js gzip 343 B 342 B N/A
dynamic-HASH.js gzip 1.84 kB 1.84 kB
edge-ssr-HASH.js gzip 265 B 265 B
head-HASH.js gzip 363 B 362 B N/A
hooks-HASH.js gzip 393 B 392 B N/A
image-HASH.js gzip 4.57 kB 4.57 kB N/A
index-HASH.js gzip 268 B 268 B
link-HASH.js gzip 2.35 kB 2.34 kB N/A
routerDirect..HASH.js gzip 328 B 328 B
script-HASH.js gzip 397 B 397 B
withRouter-HASH.js gzip 323 B 326 B N/A
1afbb74e6ecf..834.css gzip 106 B 106 B
Overall change 3.59 kB 3.59 kB
Client Build Manifests
vercel/next.js canary vercel/next.js jude/polish Change
_buildManifest.js gzip 749 B 747 B N/A
Overall change 0 B 0 B
Rendered Page Sizes
vercel/next.js canary vercel/next.js jude/polish Change
index.html gzip 524 B 523 B N/A
link.html gzip 539 B 538 B N/A
withRouter.html gzip 520 B 520 B
Overall change 520 B 520 B
Edge SSR bundle Size
vercel/next.js canary vercel/next.js jude/polish Change
edge-ssr.js gzip 129 kB 129 kB N/A
page.js gzip 207 kB 207 kB N/A
Overall change 0 B 0 B
Middleware size
vercel/next.js canary vercel/next.js jude/polish Change
middleware-b..fest.js gzip 667 B 668 B N/A
middleware-r..fest.js gzip 155 B 156 B N/A
middleware.js gzip 31.3 kB 31.3 kB N/A
edge-runtime..pack.js gzip 844 B 844 B
Overall change 844 B 844 B
Next Runtimes Overall increase ⚠️
vercel/next.js canary vercel/next.js jude/polish Change
274-experime...dev.js gzip 322 B 322 B
274.runtime.dev.js gzip 314 B 314 B
app-page-exp...dev.js gzip 372 kB 372 kB ⚠️ +190 B
app-page-exp..prod.js gzip 130 kB 130 kB
app-page-tur..prod.js gzip 142 kB 142 kB
app-page-tur..prod.js gzip 138 kB 138 kB
app-page.run...dev.js gzip 360 kB 360 kB ⚠️ +168 B
app-page.run..prod.js gzip 126 kB 126 kB
app-route-ex...dev.js gzip 37.6 kB 37.6 kB
app-route-ex..prod.js gzip 25.6 kB 25.6 kB
app-route-tu..prod.js gzip 25.6 kB 25.6 kB
app-route-tu..prod.js gzip 25.4 kB 25.4 kB
app-route.ru...dev.js gzip 39.2 kB 39.2 kB
app-route.ru..prod.js gzip 25.4 kB 25.4 kB
pages-api-tu..prod.js gzip 9.69 kB 9.69 kB
pages-api.ru...dev.js gzip 11.6 kB 11.6 kB
pages-api.ru..prod.js gzip 9.68 kB 9.68 kB
pages-turbo...prod.js gzip 21.7 kB 21.7 kB
pages.runtim...dev.js gzip 27.5 kB 27.5 kB
pages.runtim..prod.js gzip 21.7 kB 21.7 kB
server.runti..prod.js gzip 916 kB 916 kB
Overall change 2.46 MB 2.47 MB ⚠️ +358 B
build cache
vercel/next.js canary vercel/next.js jude/polish Change
0.pack gzip 2.09 MB 2.09 MB N/A
index.pack gzip 75.7 kB 73.9 kB N/A
Overall change 0 B 0 B
Diff details
Diff for main-HASH.js

Diff too large to display

Diff for app-page-exp..ntime.dev.js
failed to diff
Diff for app-page.runtime.dev.js
failed to diff
Commit: 47a65b3

@gaojude gaojude requested a review from huozhi January 14, 2025 17:32
Copy link
Member

@devjiwonchoi devjiwonchoi left a comment

Choose a reason for hiding this comment

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

Would be awesome if description has video or screenshot!

@gaojude gaojude merged commit 019afc3 into canary Jan 14, 2025
140 checks passed
@gaojude gaojude deleted the jude/polish branch January 14, 2025 18:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants