Earlier tooltip info for the default topic menu notification option
had static string to display.
This commit changes the string info and includes channel name and its
corresponding privacy icon to display in the tooltip.
Using "*" selector is inefficient as they require checking every
element because of the browser's bottom-up matching process.
This commit instead updates the selector to use individual
classes for elements to apply the CSS rules keeping in mind
to use unique class names instead of general class names.
This commit fixes the overflowing issue for long bot owner names in the
user card popover, and also repositions the bot owner user card popover
to align with the bot owner name on the bot user card popover.
This CSS was needed when there was label along with the buttons
on the same line when this was originally added in 626c5ef55e.
But there is no label with the buttons now, so this CSS is not
needed.
This commit updates the color of the text items in the user card popover
which are mostly user related information, to use the new Zulip color
palette.
This increases the contrast of the custom profile fields and other user
related information such as the user's local time and status text to
improve readability.
Fixes part of #31027.
The postcss-color-mix-function plugin does not support var() color
arguments since those cannot be dynamically resolved. This commit
replaces all var() color arguments with their static hsl() equivalent
values to ensure that color-mix() functions are successfully compiled
to rgb() for browser compatibility.
Previously animated images were automatically played in the
message feed of the web app.
Now that we have still thumbnails available for them, we can add a new
personal setting, "web_animate_image_previews", which controls how the
animated images would be played in the web app message feed -- always
played, on hover, or only in the image viewer.
Fixes#31016.
This commit increases right padding for the th elements in recent
views table to make sure that the sorting arrow is visible correctly
for various screen width and font sizes. This change is similar to
what we did for tables in settings UI.
When rendering a spoiler block that includes a datetime format,
the dropdown button was pushed out of view on smaller devices.
This happened because the time tag was overflowing past
the spoiler blocks width.
This commit intends to fix this problem by adding a `white-space`
attribute to the rendered time tags which will stop it from
overflowing.
Fixes#30641.
We now set max-width on the pill value for stream creator pill
to make sure that the pill does not get too long for long names
and the full name can anyways be seen by clicking on the pill.
Fixes part of #30918.
We don't need `align-self: baseline;` for `fa-envelope` set in
`message_view_header` since this is a different icon and it appears
better without it like other icons.
We also don't need the explicit font-size for switching b/w 14px and
16px mode since `zulip-icon` class takes care of that by default.
We had to specify margin-bottom as 10px separately for
`modal_password_input`, `password_visibility_toggle` and
`settings-forgot-password` classes. We've added a div that encapsulates
all these 3 elements which are meant to be in the same row and gives it
a common margin-bottom.
This is a refactor commit.
We've removed the unused parent div. We've also removed the class that
was only being used in that div from zulip.css. We've attached a class
to the anchor element now and it has the same name as the class we
removed.
Fixes https://chat.zulip.org/#narrow/stream/9-issues/topic/Eye.20icon.20misaligned.20in.20Manage.20your.20API.20key/near/1890711.
The eye icon to show and hide password was misaligned in the 16px info
density mode. But since the icon was using absolute positioning to style
the icon, we took this chance to refactor the element to use flexbox.
We've renamed the `password-div` to `settings-password-div` for settings
specific styling. The eye icon was only broken in settings, and since
the settings and the login/signup stuff the same class was used at is
quite different from each other, it might be better to have two
different classes. The other `password-div` has not been refactored, it
might be better refactored in its own PR along with other similar
elements to use flexbox.
Fixes#30895.
The root font-size for the app has always been 16px, and it remains the
same when switching between 14px and 16px mode. This leads to
`.small` buttons looking relatively smaller to their surroundings in
16px mode. So, if we use a unit that changes when switching between
modes, we will have to multiple that value by (16/14) so that we don't
change the existing behaviour for the 14px mode and make things smaller.
This commit only affects `.small` buttons, the same named class is used
in other places but does not use rem unit there and therefore does not
require any changes.
The original plan was to use em instead of rem and multiply it by
(16/14 * 0.8), but since em depends on the parent element, there was a
case in the poll button widget where 1em was equal to 16px in the dense
14px mode. While, the right thing to do might have been some refactor to
make it work as desired, the safest thing to do right now might be to
use the --base-font-size-px variable directly for the 9.0 release.
Fixes#30920.
Before this, the buttons remained the same when switching 14px vs 16px
mode because rem was used as the unit and we are not changing the root
font-size for either of the 14px or 16px mode. Root font-size is 16px in
both cases.
We've removed 0.875 out of the 0.875rem for the font-size of the buttons
since 0.875rem is equal to 14px. It has been replaced with the base font
size variable.
We've removed the rem values for padding and border-radius and written
the pixel values directly taking in account 1 rem = 16px. We don't scale
the padding and border when switching b/w 14px and 16px mode, so we
should not do that here too. While keeping the rem around would be the
same as the current pixel value in either of the modes, removing the rem
is still better since we've concluded here that we don't need to scale
the padding and border-size b/w modes.
Since we access email through pills,to improve the
visibility on a narrow screen, if the screen width
goes below 'lg_min' or 992px drop the email column from users,
deactivated users, bots, channels, groups using a new classname
'settings-email-column'.
This commit overrides the margin-top set on the stream lock icon at the
top-level in `app_components.css`, since we don't need to pull up this
icon for the stream actions popover header.
This commit updates the `max-width` of popovers to relative length units
to allow the UI to scale with the font-size. This helps with the multi-
line popover options which we want to break evenly across different
sizes.
The `max-width` of `97vw` still applies to all popovers, and ensures
that the UI does not overflow the viewport.
A `min-width` is applied to the popover hotkey hints to ensure that they
are nearly square when only one character is present. This `min-width`
was previously using rem units, which did not scale with the font size
of the popover font.
This commit changes the `min-width` to use `em` units, which will scale
with the font size of the popover hotkeys.
Fixes#30674.
When having a bigger translation string, it was noticed that Add channel
button had no horizontal padding. But this wasn't true for a shorter
string. The button was using `min-width` as a proxy for padding. When
the width of the button went beyond the minimum 100px, the padding
disappeared.
`.new-style` properties will apply here for the standard button
styling, where the standard horizontal padding is important for the fix.
But we can't use the vertical padding of that class since we want the
button to align with the filter to the right of it which is smaller than
a standard button, so we set the vertical padding to 0 and give the
button a height of 30px. This height is used at multiple places to be
the same as the search filter, e.g. roles dropdown in users tab.
We've also changed the margin from 11px to 12px to be the same as the
filter on the right.
This commit makes the selectors for CSS applied to users
and bots table more specific since the classes used
before are generic and can be used at other places
as well.
This commit makes the selector used to apply CSS to
file name column in uploaded files table more specific
as the class name used before is generic and can be
used at other places as well.
For buttons in the compose box using `.small`, all properties except
min-width were already being overriden in compose.css. So we added
`min-width: inherit` to compose.css and remove the `small` class.
Preparatory commit for #30895.
With the redesign of all popovers completed, we have transitioned away
from the legacy Bootstrap-based popover system. As a result, the
Bootstrap `nav nav-list` classes are now obsolete and no longer used
in the codebase.
This commit, a part of the efforts to clean up the legacy Bootstrap CSS,
removes these unused classes and any related CSS workarounds.
Fixes#26990.
This is a prep commit for removing `nav nav-list` classes from all
popovers.
The send later modal, although not being a popover specifically, was the
last place in the code still using `nav nav-list` classes.
This commit updates the `max-width` of popovers to relative length units
to allow the UI to scale with the font-size.
The `max-width` of `97vw` still applies to the popover, and ensures
that the UI does not overflow the viewport.
- Adds focus outline to the custom profile field links.
- Replaces the grey outline of the copy and status buttons with the
blue one used across the popover options.
- Adds hover state styling to the focus state styling for the copy
buttons.
evykassirer
Tim Abbott
Pratik Chanda
Sahil Batra
Sayam Samal
Alex Vandiver
Karl Stolley
roanster007
Aman Agrawal
codewithnick
Sanchit Sharma
Shubham Padia
Anders Kaseorg
sujal shah
Vector73
adnan-td