Freecodecamp: [localhost] Can't read buttons on dev 404 page + nightmode

[moT01]

with an instance running locally
go to any user profile url (localhost:8000/anyuser)
it will bring up this page...

can't read the buttons/search

[raisedadead]

This is a low priority issue to resolve development experience

[lizzardarcher]

Hello, I want to help you with this problem

[ahmadabdolsaheb]

thank you @lizzardarcher. please go ahead with proposing a solution or submitting pull request.

[chezzwizz]

Since the production site seems to issue an error page that resembles the attached image:

this issue may be related to a local setup issue. Check to make sure that your server and client are accessing the proper libraries and extensions. If you are able to do a thorough audit of your setup and files and still find that you are having the issue, try posting some information about what type of server you are using and perhaps some information from your logs that might relate to missing files. Also, be sure that your client side (browser) is loading the provided scripts correctly. Look for errors in the console related to missing or bad libraries.

[raisedadead]

Hi @chezzwizz check this: https://www.gatsbyjs.org/docs/add-404-page/

[raisedadead]

Gatsby has a middleware that renders a "pre" 404 page. We need to handle the default styles on this middleware page.

[sfialok98]

I don't understand the issue completely..
The submit button seems to work fine.
Can someone explain the issue.. And is this the expected page ?

[ahmadabdolsaheb]

@sfialok98, please visit http://localhost:8000/1243er4 locally to view the 404 page.

[RisingGeek]

Can I work on this issue?

[ahmadabdolsaheb]

Defiantly, @RisingGeek. Please go ahead with describing the solution you have in mind or submitting a pull request.

[lirikf]

Hi all,

gatsby-focus-wrapper .ais-InstantSearch__root .default-layout button,

gatsby-focus-wrapper .ais-InstantSearch__root .default-layout input

{
color:var(--blue-dark);
}

Including these lines in client/static/css/bootstrap.min.css seems to fix the problem. However, I'm not entirely certain it doesn't produce side-effects.

[sangeet]

Hi @lirikf :

That will affect every button and input under every other page as #gatsby-focus-wrapper .ais-InstantSearch__root .default-layout seems to be shared by every other page. I am not sure if it is a good idea to change all buttons and inputs under all pages.

The source for this page is at https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/internal-plugins/dev-404-page/raw_dev-404-page.js and I can't seem to find any classes or IDs attached to these elements.

So, with no ID's or classes attached to that component , I am unsure if a clean way to do something like that is possible. Maybe someone who understands this better can comment further on this.

Is changing button text color globally under dark mode a viable solution for this?

[sangeet]

The following changes in global.css fixes this bug and brings the styling more along the lines of the rest of the website. Since, the colors are based on variables which change based on light/dark theme, this shouldn't break anything on the website (AFAIK, every other button, etc are using the .btn class)

button, input[type="submit"] {
  background-color: var(--quaternary-background);
  color: var(--secondary-color);
}

#search{
  background-color: var(--quaternary-background);
  color: var(--primary-color);
  border-color: var(--quaternary-color);
}

#search::placeholder {
  color: var(--primary-color);
}

Is this an acceptable fix?

[chezzwizz]

Gatsby has a middleware that renders a "pre" 404 page. We need to handle the default styles on this middleware page.

If it uses the themes API, then I would imagine there might be some good information at https://www.gatsbyjs.org/docs/theme-api/

There are several mentions of the gatsby-config.js file with some path and color references. Perhaps there might be some settings in this file or another file in the components of the theme directory that the 404 page rendering uses.

Edit: There seems to be some pages under the client/src/component/fourohfour directory with some styles that pertain to the 404 page specifically. If it is just the 404 page that this problem exists, perhaps a fix can be added to the style sheet here so as not to spread the changes to pages where it is no necessary. I also noticed that there are several theme related pages under the components folder.

[Dnguye92]

Do you have to ask for permission to work on these issues or can we just submit a PR

[ahmadabdolsaheb]

@Dnguye92, you are welcome to work on this issue and submit a pr.
Also, feel free to discuss your solution before submitting your pr.

[5hel2l2y]

how do you activate the nightmode?