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

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

erison7596
Copy link

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

@psychlone77
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
Owner

@dostonnabotov dostonnabotov 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
Owner

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.

font-family: "Rubik", sans-serif;
font-size: 18px;
font-weight: 400;
color: #555555;
Copy link
Owner

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
Owner

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/

@@ -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

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

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.

4 participants