feat: Add banner for when the API is down

[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

resolved

[PalmDevs]

LGTM

[oSumAtrIX]

When the API is down and the banner is dismissed, does it remember? Because otherwise loading another page or refreshing will cause the banner to show up again.

[Ushie]

When the API is down and the banner is dismissed, does it remember? Because otherwise loading another page or refreshing will cause the banner to show up again.

Refreshing the page will show it again, but going to a different page won't, I think that's good behavior because I might come back 5-10m later to check if it's working now

[oSumAtrIX]

I was thinking of a permanent banner, but not as obtrusive as this one, specifically for the down API. The only reason you would want to dismiss this banner is because it blocks elements. Due to that, the user can not know if the API is up again. If the API down banner can be adjusted so that it appears as a small red strip a the top for example that can not be dismissed, but also does not block any view or space, then this problem would be solved.

The easiest way to achieve this is to add a parameter "permanent" for example. If it is true, the CSS will be used which displays the banner as a slim strip at the top of the site and hides the dismiss button. Other banners such as when used in #195 can set the parameter to false so that the banner overlaps like it currently does and has a dismiss button.

[madkarmaa]

Refreshing the page will show it again, but going to a different page won't, I think that's good behavior because I might come back 5-10m later to check if it's working now

that's exactly what it does

[madkarmaa]

@oSumAtrIX what's the practical use of a permanent banner when a simple page refresh is gonna bring it back? I don't see any user willing to stay with the website open on their browser until the API is back up again

[oSumAtrIX]

The practical use is that it does not overlap over any content so the user isn't drawn to dismiss the banner & isn't needed ro refresh the page. If the API is down & the banner is dismissed there's no indication left that the site won't work properly. A permanent small banner at the top prevents that.

added/fixed in 4dd7f79

[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