use a custom 404 page

[stefan0xC]

As suggested here dani-garcia/bw_web_builds#100 we might want to use a custom 404 page.

first-draft

[BlackDex]

It could be me, but i find the image a bit to much.
A quiet but smaller is probably a big win.

And, not sure about the color, it's very much in your face hehe.
And maybe change the top bar color to the same as the admin page, instead of the Bitwarden blue?

[stefan0xC]

Hm. I don't really know what color would be better. So I've removed the color for now:
second-draft

Not sure I'm really happy with the design either it was just a quick draft so I had something to replace the original 404.png 😞

[stefan0xC]

Maybe a simple 404 would suffice?

third-draft

[BlackDex]

That looks better indeed.
But i would then have everything aligned. So the, Big 404 right in the center of the Sorry, but... text.
And maybe the font-size a bit smaller?

Besides that, it looks nice.

[stefan0xC]

Like this?

[BlackDex]

I think that looks nice yea.

[BlackDex]

Ow, one other item.
Could you compress the png please?
Use a nice Rust developed tool oxipng for this by running oxipng -o max -Z -a --strip all 404.png
That will save about 47% of the size :)

[tessus]

I think it looks more pofessional when the text is not centered (except the png).

I like the first one much better : #2948 (comment)

[BlackDex]

Well, only the image centered looks strange too. Also the whole Bitwarden web vault is centred by default, at least to the viewport.
Having it unaligned looks unprofessional too me.

[tessus]

There's no accounting for taste.

Just wanted to chime in, since the all centered approach looked weird to me. But I usually do not have to see that page anyway. ;-)

[tessus]

Out of curiosity. Why is a png file used and not svg text? Or normal text?

[GeekCornerGH]

To be fair, I think Bitwarden's 404 page looks way better

[BlackDex]

To be fair, I think Bitwarden's 404 page looks way better

We are not holding you back to create a nice graphic 😉 .

[stefan0xC]

Out of curiosity. Why is a png file used and not svg text? Or normal text?

Initially because I wanted to simply replace the original. The original image also is linked to the web vault so you can go back easily.

I think it would probably be fine to use SVG instead of PNG, I just have not considered it.

[tessus]

I think it would probably be fine to use SVG instead of PNG, I just have not considered it.

nah, don't worry about it. The png is very small. I just didn't understand it, because the rest is just HTML text. Thus the 404 Return to web vault? could be simple text too. And if you don't want to use CSS to make the font bigger, a svg text element can also do the trick.

But it doesn't really matter. This is not a page that is called thousands of times per second, so I don't care if it 2.1k instead of 100-200 bytes.

[GeekCornerGH]

To be fair, I think Bitwarden's 404 page looks way better

We are not holding you back to create a nice graphic 😉 .

@BlackDex so first, I am bad at GFX, sorry haha,
also I didn't saw this one: #2948 (comment) which looks pretty good tbh