This commit converts the pixel values to em instead to make the banner
scale better with the different font sizes.
(cherry picked from commit bf88426cd1)
This is prep commit for the alert banner redesign, which adds flex
layout to the alert-box container and modifies the animations logic to
work with the new layout.
This is part of an effort to remove all pixel font sizes
from most stylesheets. We won't scale this with font size
because the flatpickr doesn't scale with font size.
With the larger, flexibly sized right sidebar, we want to allow
for the middle column to expand to fill its place even outside of
the "Use full width on wide screens" setting.
In our css variables, we were using sidebar and column interchangably.
But, sidebar is 10px less wider than the column. This commit makes no
behaviour change, but renames variables to use column where necessary
and uses variable for sidebar instead of a fixed 240px value.
This commit redesigns the link styles based on the Figma designs by
Vlad Korobov, and implements them in the navbar banners. This also
removes the `--color-text-link` which was being used in the custom
profile field links in the user card popovers while the variable did
not exist previously.
We update max_avatars on rerenders based on recent view width
to prevent participant avatars from overflowing their width.
We use resize event to update `--recent-view-max-avatars` which
is checked on `complete_rerender`.
This commit adds the redesigned banner component to the codebase along
with a storybook-style page in /devtools/banners to view and test the
redesigned banner component.
Any banner using the new redesigned styles, requires two classes,
- First, the base `banner` class which defines the structure and
behavior of the banner.
- Second, a modifier class like `banner-info` which defines the styles
for the particular banner type.
The navbar alert banners also have a custom class `navbar-alert-banner`
which is used to define the specific style and structure for these
banner types.
This commit also makes the `banner`, `action-button` and `icon-button`
components into handlebar templates to maintain consistency in their
usage in the codebase.
