feat: API outage banner

[madkarmaa]

What's this?

This PR adds the <Banner /> component and some functionality. Originated from issue #191

Screenshots (as of commit 8fa880b)

Level: caution

Level: warning

Level: info

[oSumAtrIX]

Caution should use a different icon & all the colors are too saturated, use the same saturation/contrast as the other colors. The info banner should use the blue highlight color

[madkarmaa]

Caution should use a different icon

Such as? I've searched for "caution" on svgrepo.com

All the colors are too saturated, use the same saturation/contrast as the other colors

They're just placeholders, I didn't really follow the theme (for now)

The info banner should use the blue highlight color

The text selection color wasn't altered, or are you referring to something else?

[oSumAtrIX]

They're just placeholders, I didn't really follow the theme (for now)

If the PR isn't ready, mark as a draft

[madkarmaa]

above commit ^^^ tested to work with static build

[madkarmaa]

Level: warning

Level: caution

[oSumAtrIX]

Warning should be orange/yellow tinted

[madkarmaa]

Warning should be orange/yellow tinted

I couldn't find anything that follows the m3 color rules

[Ushie]

• Resolve the navbar not sticking to the top when scrolling
• Confirm the API outage banner is only displayed when appropriate

[Ushie]

The margin-top changes across pages doesn't consider cases where there is no banner being displayed, perhaps a minor refactor where we wouldn't need magic numbers would be good

[madkarmaa]

@Ushie where exactly?

[oSumAtrIX]

The issue is a bit difficult to solve. The banner is sticky so we have to simulate a hidden non sticky banner so the content shifts down. I guess what we can do is add the margin to that simulated banner, so when the banner is hidden, the margin is gone too

[oSumAtrIX]

No banner is shown despite the API being unreachable: