Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

feat: add responsive 404 error page with modern design and decorations #255

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

Closed
erison7596 wants to merge 1 commit into quicksnip-dev:main from erison7596:main

Conversation

Copy link

@erison7596 erison7596 commented Feb 6, 2025

Description

Type of Change

  • ✨ New snippet
  • πŸ›  Improvement to an existing snippet
  • 🐞 Bug fix
  • πŸ“– Documentation update
  • πŸ”§ Other (please describe):

Checklist

  • I have tested my code and verified it works as expected.
  • My code follows the style and contribution guidelines of this project.
  • Comments are added where necessary for clarity.
  • Documentation has been updated (if applicable).
  • There are no new warnings or errors from my changes.

Related Issues

Closes #

Additional Context

Screenshots (Optional)

Click to view screenshots

Copy link
Collaborator

Hi @erison7596. I would like to know how this NotFound page is reached? Maybe you should include a fallback route in the AppRouter to the NotFound component. Also, try to fix the CSS to use the color variables so the colors match the theme and are compatible with light/dark mode.

Copy link
Collaborator

@technoph1le technoph1le left a comment

Choose a reason for hiding this comment

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

Thank for your contributions. I noticed some issues in your code that doesn't follow the style guide. Please make the necessary changes before we can proceed.

padding: 12px 24px;
background: #007dfe;
color: #ffffff;
font-family: "Rubik", sans-serif;
Copy link
Collaborator

@technoph1le technoph1le Feb 6, 2025

Choose a reason for hiding this comment

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

We recommend using our own declared fonts instead of new ones.

psychlone77 reacted with thumbs up emoji
font-family: "Rubik", sans-serif;
font-size: 18px;
font-weight: 400;
color: #555555;
Copy link
Collaborator

@technoph1le technoph1le Feb 6, 2025

Choose a reason for hiding this comment

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

As @psychlone77 suggested as well, using custom variables help match with both dark and light themes

margin: 20px 0;
}

.notfound-description {
Copy link
Collaborator

@technoph1le technoph1le Feb 6, 2025

Choose a reason for hiding this comment

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

We use BEM naming convention for naming selectors. You can refer here for details: https://getbem.com/

psychlone77 reacted with thumbs up emoji
@@ -0,0 +1,25 @@
import React from "react";
import svg404 from "public/404.svg"; // Altere para o caminho correto da imagem 404
Copy link
Collaborator

@Mathys-Gasnier Mathys-Gasnier Feb 7, 2025

Choose a reason for hiding this comment

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

Please make the comment in english

Copy link
Collaborator

Ok, I tweaked around here and there. Then, I thought who needs 404 page anyways? So, instead of directing the user to 404 NotFound page, I set up the redirects so that it goes to the main homepage back again. Here's the commit.

It seems to be the easiest and "quickest" solution that works without crashing. If you face any issues, let us know. :)

Copy link
Collaborator

@erison7596 thanks once again for your contribution. Since you didn't respond for over 3 weeks, I'm closing this issue.

If you want to work on it in the future, make sure to follow our style guide and open a new PR next time. Cheers xD

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@technoph1le technoph1le technoph1le requested changes

@Mathys-Gasnier Mathys-Gasnier Mathys-Gasnier requested changes

@psychlone77 psychlone77 Awaiting requested review from psychlone77 psychlone77 is a code owner

@saminjay saminjay Awaiting requested review from saminjay saminjay is a code owner

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

AltStyle γ«γ‚ˆγ£γ¦ε€‰ζ›γ•γ‚ŒγŸγƒšγƒΌγ‚Έ (->γ‚ͺγƒͺγ‚ΈγƒŠγƒ«) /