In #22524, we have updated the compose banner to the new, updated design
while the unread banners have remained the same. When comparing them side
by side, they look rather old and outdated. We should apply the updated
design to the unread banners as well.
Fixes: #25551.
Previously, the close buttons on the unread banners used "x" as the icon.
This unfortunately doesn't scale well as we increase the font-size. To fix
this, we should update the button to use zulip icons instead of a character
as the button.
Previously, infomational banners didn't have any dark theme stylings which
resulted in a messy and terrible contrast with the dark themed app. These
changes adds those missing styles and uses the same stylings and colors
as the compose banners. Thus, making a definite improvement then before.
Previously, the color of the unread banners is yellow which signals more
of a warning to the users. After a discussion in CZO, it was decided to
set setting configured unread banners to blue, which represents more of a
notice/informational banner as the user should be aware of the changes they
made to their settings.
Previously, the unread banner templates just rendered on the contents of
the unread banner. This works fine if we don't want to make changes towards
the parent/container of the contents.
This change introduces a new container to each unread banner templates and
a rename. Thus, we can make unique styling changes to the unread banners
while also bring the structure closer to how it is for compose banners.
Since we currently have 3 unread banners, it'd be much preferred to group
all of them up into one folder to keep them organized like how compose
banners are. This way, it's much easier to keep track of unread banners
and new ones in the future.