This commit makes the modal title responsive for font-sizes 12px to
20px. For #add-poll-modal, we remove the .modal__title rule for
font-size set to 1.375em. That removal technically increases it's font
size from 1.375em to 1.5714em, but that new font size is the same as the
previous 1.375rem that was changed in
e80a23642d (r1904958062)
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.
As a follow-up to the previous commit which replaces the spectrum color
picker instances with the custom color picker popover, this commit
removes the spectrum-colorpicker library and its related code from the
codebase.
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.
This temporary change allows us to preserve these old styles
while iteratively move all the close buttons to new styles.
Once the migration is complete, `old_clear_search_button` won't
exist anymore and there will be new styles for `clear_search_button`.
This commit includes the following changes:
- Use a regular text cursor in place of a pointer cursor for the
"Name" field label when the name changes are disabled.
- Introduce a class named `cursor-text` that sets the property
`cursor: text;`.
- Implement tests to verify the above changes made.
A small delay before showing up of the action buttons
is required so that there will be no flickering when
mouse just slides over the message headers.
Fixes part of #26852.
Added `opacity` CSS with `:focus-within` pseudo-class to
the recipient bar. This keeps the action button visibility
consistent with the action UIs - topic editing UI and notification
menu.
Fixes part of #26852.
Co-authored by: ecxtacy <dc.dhruvchouhan@gmail.com>
- Toggles the CSS rule `opacity: 0` on the recipient bar
controls when the bar is hovered.
- If the recipient bar is sticky, then the controls are always visible.
- In case of conversation views, the recipient actions remain visible.
Fixes part of #26852.
Co-authored by: ecxtacy <dc.dhruvchouhan@gmail.com>
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)
