Make error page backgrounds match the background color of the site

[mitchdowney]

Here's what an error looks like for me today:

I followed this link: https://podverse.fm/podcast/Cf9LRlppMy

[FischerDavid]

There appears to be a style override to make this background white with black text. This tag is in the main section of the page.

<div style="color:#000;background:#fff;font-family:-apple-system, BlinkMacSystemFont, Roboto, &quot;Segoe UI&quot;, &quot;Fira Sans&quot;, Avenir, &quot;Helvetica Neue&quot;, &quot;Lucida Grande&quot;, sans-serif;height:100vh;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center">

Removing color:#000;background:#fff; makes the background and text color match the rest of the application style

[mitchdowney]

@FischerDavid this should be easy to fix...but Next.js is auto-generating the 500 error page right now, and they don't give us a class name that would allow us to easily target that div with the CSS we need 😕

It seems like we'll need to replace the 500 page entirely with a custom override. It shouldn't be super difficult but it's not a feature I can knock out quickly... https://nextjs.org/docs/advanced-features/custom-error-page

This is a pretty high priority, but I'm not sure when we'll get to this one yet.

[mitchdowney]

This has gone on too long! Assigning it to myself.

[mitchdowney]

This is in v4.12.1 https://github.com/podverse/podverse-web/pull/1114