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.
Karl Stolley
Sanchit Sharma
Shubham Padia
Aman Agrawal
Anders Kaseorg
Sahil Batra
sujal shah
Sayam Samal
evykassirer
Vector73