Fix Availability Page and Settings Page NoticeBar styles

[davinotdavid]

Description of the Change

• We were using the AlertBox component (present only in Appointment, not in services-ui) for the success / failures of the Availability page and Settings page. However, the AlertBox is a wrapper for NoticeBar changing some of its styles, hence the visual difference between the warning state and the success state font-sizes.
• This PR normalizes the component used to be NoticeBars instead, also making it sticky and making sure that only one NoticeBar is present at a time.

Screenshots

Before / Availability

After / Availability

--

Before / Settings

After / Settings

Benefits

• No more overlapping of NoticeBar / AlertBox
• Better hitbox for the close button
• Consistent font-size across NoticeBars

Applicable Issues

Fixes #1389

[devmount]

Thanks for fixing this inconsistency, Davi!

My first thought was: Aren't we duplicating code again, we once deduplicated (I'm sure there was a historical reason we built that wrapper, but I can't remember 😅) ? But thinking about it, it makes sense to let the parent component provide the clearing methods, the cta buttons etc. Since we use that notification box at a lot of different locations. So yes, I agree on the changes, thanks for this!

Which leads to the question: Should we ditch AlertBox completely and only use NoticeBar for the other 12 occurences (in 7 files) in the codebase? 🤔

[davinotdavid]

@devmount thanks for the review! So there are some of those instances where I think it makes sense to have a smaller version of it, for example in the GenericModal since there's less space all around.

IMHO we can keep the AlertBox for these instances for now but I'd rather have a variant in the NoticeBar component in services-ui that is "dense" or "sm" for these cases. However, IIRC we don't have a design for it planned yet :(

What do you think?

[devmount]

IMHO we can keep the AlertBox for these instances for now but I'd rather have a variant in the NoticeBar component in services-ui that is "dense" or "sm" for these cases. However, IIRC we don't have a design for it planned yet :(

What do you think?

Yes, agree! A variant for the NoticeBar would be best. I'll create an issue in services-ui for this and see, if we can implement that there.

[davinotdavid]

@devmount sounds good, thanks! I will merge this then 🙇