Before 567e8f369e, the background-color
for .grey-box was --color-background-modal-bar, but the dark part out of
the light-dark() for that color was being overriden by
hsl(0deg 0% 0% / 20%) in dark_theme.css. Since that was a refactor PR,
we added a new color called --color-background-grey-box to keep the
behaviour same as before.
But discussion in
https://chat.zulip.org/#narrow/channel/101-design/topic/grey-box.20dark.20theme.20color.2E
confirmed that we want to have `--color-background-modal-bar` as the
background color for that class.
Previously, long owner names could wrap onto two lines in the bot
management modal, breaking the layout. This commit adds CSS to keep
names on a single line and abbreviate with an ellipsis if too long.
Fixes#23266.
This commit removes "button" and "rounded" class from the button and
add the required rules to the pre existing sticky-bottom-option class.
Fixes part of #35006.
This commit updates the organization settings banners to use
`width: fit-content`, ensuring they no longer span the full available
width. While this change does not yet support wrapping the action button
to a new line, it works reliably for these banners.
Currently, flex-wrap is set to `nowrap` to prevent buttons from wrapping
to the next line, as using `min-content` or `fit-content` forces
wrapping when space runs out. This approach limits the banner width to
its content size while maintaining layout consistency.
Making this as a separate commit since this is an experimental change
and we can tinker this later when we have a solid solution.
This commit redesigns the upgrade and sponsorship banners by adding
AVAILABLE_ON_STANDARD, UPGRADE_ACCESS_BANNER, and
UPGRADE_OR_SPONSORSHIP_BANNER.
Fixes part of #34252.
This commit fixes the kbd element text being centered in dark theme
but not in light theme. Aligns text for all kbd elements not just
in dark theme.
Fixes:zulip#35059.
This commit adds the `banner-wrapper` class to the parent container of the
banner.
Added `margin-bottom: 10px` to the banner to improve its appearance.
Placed the event listener at the correct location with the $container
element so that it binds only once. Previously, it was being bound
every time the settings page was loaded, causing multiple event listeners
to be attached to the same element.
Additionally, the banner was not rendering when opening
Org settings > DEFAULT USER SETTINGS directly,
and this has been fixed by ensuring the banner is rendered correctly.
This removes the previous slightly-lighter text shade
in light mode, and gets away from the trickiness of
`color: inherit` in dark mode.
While we could probably go with inheritance
everywhere, simply by removing the color: value on
these element, setting an explicit color variable on
the inputs here builds better confidence as to what
the color value will ultimately be.
This commit add configuration options to improve dropdown behavior:
- `keep_focus_to_search`: Keeps focus in the search input during
navigation.
- `tab_moves_focus_to_target`: Moves focus to the target item on
Tab key press.
Migrate the demo organization warning that's shown on all the tabs
for organization settings to use the shared banner code.
Updates links in the current warning to be buttons in the banner,
and matches the navbar alert banner for demo organizations.
Fixes#34447.
This commit updates the save button style in the settings component to
ensure that the button appears as a borderless attention + success
intent action button alongside the "Saved" label, when an updated
setting is saved.
By moving the header background to <thead>, we achieve two things:
1. We avoid a bug in Chrome where the table background bled through
between header cells.
2. We no longer need `!important` on the data-sort hover, because
there is no longer a color set there.
This reverts commit 7d08f32ebb.
The commit message is factually incorrect, and the change broke our
fade-out transitions. visibility can be transitioned, and there is a
specific rule for what that means. This is critical for transitioning
opacity in the fade-out direction: if you fail to also transition
visibility, then the element disappears immediately regardless of
opacity.
https://developer.mozilla.org/en-US/docs/Web/CSS/visibility#interpolation
Signed-off-by: Anders Kaseorg <anders@zulip.com>
`visibility` cannot be animated since it is a boolean.
This fixes composition failure error in Chrome dev tools when
these animations are triggered that the animation has
no visible change.
This commit improves the saved snippets UI through the following ways:
- Reduces the space between the saved snippet title and description for
a more interconnected feel.
- Changes the delete icon from the old font-awesome icons to using the
new icon button component.
- Adds line-clamping to the saved snippet description to display two
lines of text instead of one, presenting the user with more context.
This commit adds the `invalid-input` class to the inline topic edit
input element when the new topic name is considered empty as a result
of realm_mandatory_topics property being set to True. This adds the
red glow borders to the invalid input field, which visually
communicates that some thing is wrong with the new topic name.
