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.
Added colors to notify users when the message length is near
the limit or has exceeded it. Used distinct colors for each
case to provide clear feedback.
Fixes: #32171.
This commit replaces the spectrum color picker used in the stream
popover and stream settings with a custom color picker popover, which
contains a grid of predefined color swatches and a custom color option.
The custom color option uses the HTML5 <input type="color"> which shows
the native browser color picker UI.
Fixes#14961.
Previously, due the uneven width between the icons and the user
presence indicator, the icons and presence indicator were misaligned
with each other.
This commit uses the grid and subgrid layout systems to fix this
misalignment issue.
This commit adds the icon-only button styles to the codebase along with
appending this new button style to the storybook-style page in
`/devtools/buttons` to view and test the icon-only button component.
The redesigned icon button component, uses the `icon-button` class to
follow Zulip's no-abbreviation policy, and to avoid conflicts with the
pre-existing `button` and bootstrap `btn` classes.
A button using this new style, should use the following classes,
- First, the base `icon-button` class which defines the structure
and behavior of the button. (Required)
- Second, a `icon-button-square` class, to be used in conjecture
with the `icon-button` class which provides the style for the squared
button style of icon button. (Optional)
- Third, a modifier class like `icon-button-neutral` which
defines the colors for the particular icon button type. (Required)
* css: Extract invalid input outline and shadow colors to variables.
We will use these colors in future for input pills and it would be
convenient to have them in a variable.
* group_setting_pill: Show outline on invalid input.
We could have manipulate the class directly from user_group_pill. But
it felt better to have `show_outline_on_invalid_input` as a param for
the input_pill prototype since we can have a consistent error state for
other pill input boxes if we want to.
* input_pill: Widget should not show as pending after pill creation.
* group_settings: Disable save changes button if pill widget is pending.
This will disable the button for group, realm and stream group settings.
* user_group_create: Don't go to next step with pending group widget.
We just show the red outline and shaking animation as an indication that
a group widget setting is pending when the user tries to go to the add
members step.
* stream_create: Don't go to next step with pending group widget.
Fixes#32113.
We just show the red outline and shaking animation as an indication that
a group widget setting is pending when the user tries to go to the add
subscribers step.
This, as well as increasing the spacing by 5px, ensures that the left
sidebar bottom elements aren't overlapped by URLs that the browser
shows in the corner when hovering links.
There is still some space from the browser scrollbar, and the
buddy list is no more to the right than the profile edit button
in the top right corner, so this shouldn't cause any issues.
This fixes a bug introduced in f40e1e9ad0
We changed the settings overlay container background color in that
commit, from hsl(0deg 0% 98%) to #ededed. #ededed is same as
hsl(0deg 0% 93%). The latter is the exact same color for stream and
group row active background. While we changed the settings overlay
background color, we did not change the active row color for stream and
group rows.
Fixes https://chat.zulip.org/#narrow/channel/9-issues/topic/Lack.20of.20highlighting.20of.20selected.20group.2E/near/1993630
This commit adds the redesigned button styles to the codebase along with
with a storybook-style page in `/devtools/buttons` to view and test the
redesigned button component.
The redesigned button component, uses the `action-button` class to
follow Zulip's no-abbreviation policy, and to avoid conflicts with the
pre-existing `button` and bootstrap `btn` classes.
A button using the new redesigned styles, required two classes,
- First, the base `action-button` class which defines the structure
and behavior of the button.
- Second, a modifier class like `action-button-primary-neutral` which
defines the styles for the particular action button type.
This commit is a part of the efforts to rename btn-related classes
and variables to align with Zulip's no-abbreviations policy and
streamline the search results.
This commit is a part of the efforts to rename btn-related classes
and variables to align with Zulip's no-abbreviations policy and
streamline the search results.
This commit adds more space between rows, increases the line height
so that the status message doesn't touch the status emoji, and makes
the status circle a little bigger.
