Sahil Batra
6f6059da73
personal_menu: Support changing information density settings.
...
This commit adds UI in personal popover menu for user to change
font-size and line-height.
Fixes part of #33186 .
2025-03-10 16:07:37 -07:00
Sayam Samal
cd08c628ba
alerts: Modify alert-box container to use flex layout.
...
This is prep commit for the alert banner redesign, which adds flex
layout to the alert-box container and modifies the animations logic to
work with the new layout.
2025-03-10 11:21:11 -07:00
Karl Stolley
370f3aa8d0
tables: Remove remaining padding on sort.
...
With the sort arrow icons no longer positioned absolutely, this
padding is unnecessary (icons now participate in the width).
2025-03-07 15:26:15 -08:00
Karl Stolley
0b8290f231
settings: Correct rounding on header heights.
2025-03-07 12:00:24 -08:00
Karl Stolley
a64f6e915f
app_variables: Remove .more-dense-mode values.
...
These will be obviated by the removal of the "Compact mode" control
and logic.
2025-03-06 10:58:03 -08:00
evykassirer
cd81643f3e
user_popover: Use variable for sizes in user popover menu.
2025-03-05 17:00:35 -08:00
evykassirer
7fa633faaf
flatpickr: Use constant variable for font-size.
...
This is part of an effort to remove all pixel font sizes
from most stylesheets. We won't scale this with font size
because the flatpickr doesn't scale with font size.
2025-03-05 14:00:32 -08:00
evykassirer
ddd14a3dc1
buddy_list: Use different spacing for avatar and non-avatar text.
...
This ensures the link and empty list "None" message text is always
aligned with the text of the user's names.
2025-03-03 17:33:48 -08:00
evykassirer
7a3aa1f920
right_sidebar: Extend sidebar links hover outline left, to full width.
2025-03-03 17:33:48 -08:00
evykassirer
0568f9eb1b
right_sidebar: Use variable for avatar right margin.
2025-03-03 17:33:48 -08:00
Karl Stolley
060b57470f
right_sidebar: Make width easier to reason about.
2025-03-03 16:03:54 -08:00
Karl Stolley
17629c0f9c
right_sidebar: Introduce the right sidebar with a narrower width.
2025-03-03 16:03:54 -08:00
Karl Stolley
1dad4dcdf7
app_layout: Calculate max-width using variablized values.
2025-03-03 16:03:54 -08:00
Aman Agrawal
b60ac90714
fluid_layout: Fix narrow description not aligned with content.
...
Fixes #30619
We adjust the left margin of middle column to place the header middle
column next the left sidebar to fix the alignment issue.
2025-03-03 16:03:54 -08:00
Aman Agrawal
a3d591b337
css: Extract realm logo max width as a variable.
2025-03-03 16:03:54 -08:00
Karl Stolley
390ab9d7c5
sidebar_vdots: Scale vdots areas to maintain square target.
2025-02-27 11:37:05 -08:00
Karl Stolley
ecbcfd23d5
right_sidebar: Perfectly align all right-sidebar vdots.
2025-02-27 11:37:05 -08:00
Karl Stolley
5b28684a72
right_sidebar: Improve available space in buddy list.
2025-02-27 11:37:05 -08:00
Anders Kaseorg
c71aeae34d
dependencies: Upgrade JavaScript dependencies.
...
Signed-off-by: Anders Kaseorg <[email protected] >
2025-02-26 16:20:47 -08:00
Karl Stolley
c1e86a9144
navbar: Remove realm navbar icon logo.
2025-02-26 15:52:49 -08:00
Karl Stolley
34cd1e2c27
right_sidebar: Better handle manually hidden right sidebar.
...
With the larger, flexibly sized right sidebar, we want to allow
for the middle column to expand to fill its place even outside of
the "Use full width on wide screens" setting.
2025-02-26 15:52:24 -08:00
Karl Stolley
c2cf7ef571
right_sidebar: Set em-based min and max width, flexible column width.
2025-02-26 15:52:24 -08:00
Shubham Padia
4da8cf35bf
right_sidebar: Rename to right column wherever applicable.
...
In our css variables, we were using sidebar and column interchangably.
But, sidebar is 10px less wider than the column. This commit makes no
behaviour change, but renames variables to use column where necessary
and uses variable for sidebar instead of a fixed 240px value.
2025-02-26 15:52:23 -08:00
Karl Stolley
bd94e3a932
user_circles: Improve gradients in light mode and over avatars.
2025-02-24 18:18:16 -08:00
Karl Stolley
28d785c133
user_circles: Introduce Vlad's new color schemes.
2025-02-24 18:18:16 -08:00
Anders Kaseorg
3ead4c06f0
app_variables: Rename “color” variables that are actually gradients.
...
Signed-off-by: Anders Kaseorg <[email protected] >
2025-02-19 11:01:48 -08:00
Anders Kaseorg
320c7a04ba
app_variables: Fix light-dark() conversion of gradients.
...
Signed-off-by: Anders Kaseorg <[email protected] >
2025-02-19 11:01:48 -08:00
Maneesh Shukla
a98135649f
deactivated_user: Show deactivated status for deactivated users.
...
Fixes : #26833 .
2025-02-18 22:20:05 -08:00
Anders Kaseorg
b5b2d1e364
app_variables: Use CSS light-dark().
...
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark
https://www.npmjs.com/package/@csstools/postcss-light-dark-function
Signed-off-by: Anders Kaseorg <[email protected] >
2025-02-18 16:23:03 -08:00
Anders Kaseorg
4cbcc891db
app_variables: Remove dead variables.
...
Signed-off-by: Anders Kaseorg <[email protected] >
2025-02-18 16:23:03 -08:00
evykassirer
c872bea5e8
modals: Use consistent width for input and dropdown elements.
2025-02-13 16:09:04 -08:00
evykassirer
ee3660ae19
settings: Use new icon for plus (stream/usergroup) button.
2025-02-12 16:03:44 -08:00
evykassirer
2ccf9147bd
inbox: Remove background on exit button hover.
2025-02-12 12:16:14 -08:00
evykassirer
753edc4b1a
navbar: Scale navbar with app font size, using em.
2025-02-05 12:33:50 -08:00
evykassirer
23b29bf283
settings: Move settings-sidebar-width to app_variables.
2025-02-04 10:43:10 -08:00
evykassirer
7da8dfcced
settings: Use em for header instead of px.
2025-02-04 10:43:10 -08:00
evykassirer
cc88bcdf2a
settings overlay: Use shared variable for subheader height.
2025-02-04 10:43:10 -08:00
evykassirer
ef02dc093e
settings/subscriptions: Use shared variable for header height.
2025-02-04 10:43:10 -08:00
Sayam Samal
06005bc32c
css: Redesign link styles.
...
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.
2025-01-30 10:17:39 -08:00
Karl Stolley
a21b89ab98
left_sidebar: Reduce intensity of DM group and bot icons.
2025-01-29 16:35:41 -08:00
Karl Stolley
ab58a2c656
left_sidebar: Allow masked unreads to scale.
2025-01-29 10:15:55 -08:00
sanchi-t
9921b116e8
css: Refactor theme colors for settings.
...
This change moves the light and dark theme colors for
`settings` to CSS variables.
2025-01-28 17:55:00 -08:00
Karl Stolley
38c6b82022
message_row: Refine action-button layout to better scale.
2025-01-22 16:18:31 -08:00
Karl Stolley
0d0aaa8586
compose: Introduce scrolling buttons in gridded layout.
2025-01-14 15:52:02 -08:00
Aman Agrawal
05c0213cad
recent_view: Prevent participant avatars from overflowing.
...
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`.
2025-01-13 18:30:38 -08:00
Sayam Samal
234b94391a
banners: Rename btn -> button in grid variables in app_variables.css.
2025-01-13 17:46:15 -08:00
Sayam Samal
6dabfa02cb
banners: Add new redesigned banner component.
...
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.
2025-01-13 17:46:13 -08:00
Sayam Samal
c406060bb2
buttons: Update color values for action buttons from hex -> hsl.
2025-01-13 17:44:52 -08:00
Sayam Samal
f2126c2d3c
buttons: Fix inner shadow for quiet type action buttons.
...
This commit adds the missing inner shadow for the dark mode, and updates
these values to match those in the Figma design.
2025-01-13 17:44:52 -08:00
Sayam Samal
8924161696
stream_color: Update custom color swatch icon to use rainbow gradient.
2025-01-12 12:39:02 -08:00
