Update error/warning page communication and iconography

[rossmoody]

Description

Generally speaking we need to update the error page communication to omit mentions of the Chrome brand, chrome support links and chrome iconography across the board. This encompasses 60+ instances of communication between all the error page variations though the iconography specifically seems to fall specifically within these 6 icon groups:

1. Network Error pages - Sad document icon
2. SSL Errors - Red Triangle Alert Icon
3. Clock is ahead/behind - Clock icon
4. Loud Malware/Phishing pages - White Triangle Alert Icons (red background)
5. Captive Portal - Wifi symbol
6. No internet - Dinosaur

Additionally, the typographic and button styling should be updated to Brave brand parity. i.e. Poppins, Muli and rounded button aesthetic. This could also be a unique opportunity to introduce some brand personality and talk to users with a little more care and relatable verbiage since it directly relates to their security which is pretty central to Brave values.

Steps to Reproduce

1. Type "chrome://interstitials/" into the brave URL bar to view ssl, clock, loud security alert and captive portal error states.
2. Type "chrome://network-errors/" into the brave URL bar to view network error states.
3. Type "chrome://dino/" into the Brave URL bar to view the "no internet" state.
4. Cross check with https://testsafebrowsing.appspot.com/ to cover more use cases

Actual result:

Expected result:

This is a proposed initial stylistic update to the iconography for these states.

Page might charge you money:

Connection not private:

Malware warning:

Phishing warning:

Unwanted software warning:

Assets

Figma: https://www.figma.com/file/aJu3WGDztEWNZgwQTD9yx2/?node-id=0%3A49

Additional Information

To get a better understanding of the variations encompassing error page communication in this issue visit the info strings logic docs on chromium for interstitial errors and general error pages.

[rebron]

cc: @Brave-Matt on the info links. If this is ready, could we get this into 0.55.x? No reason to wait.

[petemill]

Great work @rossmoody! I'll work on the styles.

[fmarier]

Note that the dinosaur from chrome://dino is particularly important because it's also part of the Dinosaur Easter Egg game :)

It would be really fun to have instead a pixelated lion jumping over bisons or something like that.

[karenkliu]

@fmarier I would love to help create a pixellated lion jumping over/chasing bisons!!! So down to make this easter egg game.

[bsclifton]

@karenkliu if you pull down the brave-browser repo and do an init, you can find the picture resources here: src/components/neterror/resources/images/ 😄

https://source.chromium.org/chromium/chromium/src/+/main:components/neterror/resources/images/default_100_percent/offline/ https://source.chromium.org/chromium/chromium/src/+/main:components/neterror/resources/images/default_200_percent/offline/

Let me know if you need any help...

[karenkliu]

More use cases, designs, and assets added!

[karenkliu]

Cross-platform reference: iOS: https://github.com/brave/brave-ios/issues/483 Android: https://github.com/brave/browser-android-tabs/issues/2381

[karenkliu]

Updated designs to reflect that these should be full-screen HTML pages using our web UI.

[karenkliu]

This is a dupe of https://github.com/brave/brave-browser/issues/7464

[karenkliu]

Reopening this for Desktop+Android. iOS has a different Safe Browsing setup so we still need these error pages done for Desktop+Android.