feat: add custom error view

[d-loose]

@anasereijo we can go over design and copy for all of those next week:

Error message when refreshing a single snap or switching the channel while it is running:

Generic error page with custom message for SnapdException(kind: 'network-timeout') (see #1479 and #1668)

Generic error page with custom message for SnapdException(message: 'too many requests') (see #1684)

Ref #1479, #1668, #1684

UDENG-3056
UDENG-3264

[d-loose]

Updated error pages matching the Figma designs:

Network error:

Server error (e.g. 'too many requests')

Unknown error:

'Retry' will retry the action prior to encountering the error (loading search results, displaying a snap page, ..). 'Check status' will open https://status.snapcraft.io/ in a browser.

[spydon]

Lgtm functionality-wise!
I'm sure Ana will want to have a say in the design for the generic ones later. 😄

[d-loose]

I'm sure Ana will want to have a say in the design for the generic ones later. 😄

I've double-checked Figma now and realized that I forgot to actually include the action texts for each error in the view. Added them now and updated the screenshots in my previous comment!

@anasereijo please have a quick look when you have some time :)

[Feichtmeier]

Imho a centered, vertical layout could be better, especially for when the window size varies

 Image
  Text 
Buttons

[spydon]

Imho a centered, vertical layout could be better, especially for when the window size varies

 Image
  Text 
Buttons

I agree, it feels a bit "off" now, let's check that with Ana :)

[madsrh]

Imho a centered, vertical layout could be better, especially for when the window size varies

+1 for centered layout 👍

I've double-checked Figma now...

Obviously, us mortals can't see the Figma mockups, but shouldn't the "headline" have a different styling? I know that it is slightly larger, but it's barely visible and doesn't feel like a propper heading. Maybe just use the same weight as we use on the Update page?

[anasereijo]

It does indeed look better centered 👍
The heading looks almost the same as the text, so if that can be changed, go for it.

The spacing between elements looks odd - the first line of text looks closer to the heading than to the second line of text. I suggest adding more padding between the heading and the text, and decrease (or remove) the padding between the two lines of text.

[d-loose]

Column layout with adjusted spacing and font size: