Style the error boundaries component

[Tbaut]

closes #41 ooooh that feels good!

I wasn't able to use createStyle, the app kept crashing, saying I wasn't able to use useTheme. so I did this all manually 🤷‍♂️.

Edit: error boundaries are a weird kind of component based on old fashion classes where you can't use hooks basically https://blog.lookitskris.com/error-boundaries-hooks/

---

Submission checklist:

Layout

• Change looks good in the desktop web ui
• Change looks good in the mobile web ui

Theme

• Components / elements inspected in light mode
• Components / elements inspected in dark mode

[render]

Your Render PR Server URL is https://files-ui-stage-pr-1910.onrender.com.

Follow its progress at https://dashboard.render.com/static/srv-c7tashcobjdabj6mttsg.

[render]

Your Render PR Server URL is https://storage-ui-stage-pr-1910.onrender.com.

Follow its progress at https://dashboard.render.com/static/srv-c7tashsobjdabj6mtue0.

[render]

Your Render PR Server URL is https://chainsafe-components-stage-pr-1910.onrender.com.

Follow its progress at https://dashboard.render.com/static/srv-c7tasikobjdabj6mtuqg.

[asnaith]

I ran this branch locally and temporarily reverted Tanmoy's search fix to test this out. Looking good in both themes.

The close button was not responding to my click action and I also noticed that after around 6 seconds of being displayed the styling for the error disappears and the unstyled error is displayed. Video below:

Screen.Recording.2022-02-02.at.1.29.35.PM.mov

[Tbaut]

What you see after some time is the react development error (which is still nice actually) because you run a dev server. This would not be shown in prod. or on render. The reason it is lagging is because this error is being prepared. Close it with the cross at the top right and you'll see the error boundaries component again, and the close button should then work.

[asnaith]

What you see after some time is the react development error (which is still nice actually) because you run a dev server. This would not be shown in prod. or on render. The reason it is lagging is because this error is being prepared. Close it with the cross at the top right and you'll see the error boundaries component again, and the close button should then work.

Sounds good 👍 thanks for the explanation. I wasn't sure what was happening there.

[asnaith]

Re-tested and closed the react development error, all is beautiful 🔥

[tanmoyAtb]

Its amazing how the light and dark theme vars worked out. 👍

I'm not sure how useful the stack part of the modal would be. This is what I got on a local build version.

@asnaith thanks for giving the idea on how to best test this PR :)

[Tbaut]

Yeah, the stack can be useful, as well as useless, it'll really depend on the error itself!
In my case (and Andrew's as well) it's actually super helpful because we know which component the error is coming from, but it may be obscure in a build indeed..