Commit Graph

119 Commits

Author SHA1 Message Date
Karl Stolley d73044ee57 compose: Decouple compose buttons from button classes.
In the 2024 redesigned button configurations, the compose buttons
become outliers. This retains their previous style inherited from
.button, allowing that base component class to move forward.
2024-09-19 16:16:11 -07:00
Karl Stolley da91ebc592 checkboxes: Render border-color-matched SVGs in light and dark modes.
This obviates the need for the buggy use of a brightness filter,
which causes rendering problems on iOS devices and possibly others.
2024-09-16 15:43:47 -07:00
Karl Stolley 8741c9e43f dark_mode: Introduce higher-contrast, opaque text.
Fixes: #31615
2024-09-16 15:43:47 -07:00
Karl Stolley 8c984f68ec checkboxes: Decouple label.checkbox from .new-style tangle. 2024-09-11 14:22:45 -07:00
Karl Stolley df3d3197ff buttons: Simplify color declarations attached to .button. 2024-09-11 14:22:45 -07:00
Karl Stolley 7674318332 settings: Move tab-switcher out of .new-style block. 2024-09-11 14:22:45 -07:00
opmkumar 719518baba popovers: Add stream-info-popover when channel pill is clicked.
Shows a stream info popover whenever a channel pill is clicked (such
as in the pill widgets for adding subscribers to a channel or
invitations). The stream info popover contains channel icon and name,
channel description and a link to channel settings.

Fixes #30567.
2024-09-10 16:16:53 -07:00
Tim Abbott ad890890f6 lint: Fix several duplicate word typos. 2024-09-10 15:59:00 -07:00
Sayam Samal 5590c704ca user_card_popover: Reposition bot owner field and display as user pill.
This commit repositions the bot owner field from below the bot’s name to
align with the user fields, providing more space for the newly added
bot owner user pill.
2024-08-27 15:52:39 -07:00
opmkumar b9425d4d10 left sidebar: Improve how starred message count is hidden.
Fixes #30898.
2024-08-27 13:08:29 -07:00
Karl Stolley cd88f4421b left_sidebar: Better handle bracket with resolved topics. 2024-08-27 13:03:55 -07:00
Karl Stolley 2374c8a8c0 left_sidebar: Add grouping border to channel and topics. 2024-08-27 13:03:55 -07:00
Karl Stolley 65cd772e24 left_sidebar: Adjust gridded rows to match Vlad's design. 2024-08-27 13:03:55 -07:00
Karl Stolley a22aa41367 left_sidebar: Update left sidebar padding for new design.
This also moves the 2px of reduced lefthand padding to the overall
width of the left sidebar, which will keep the left sidebar at its
same width (in other words, the message area will not shift any
further to the left, either).

Fixes #27565
2024-08-27 13:03:55 -07:00
Karl Stolley 485428db86 rendered_markdown: Approximate non-alpha dark mode table border color. 2024-08-20 09:34:07 -07:00
Karl Stolley f55feae0ea search: Reset default iOS button styles. 2024-08-16 13:58:50 -07:00
Shubham Padia 5ffb75387a typeahead: Change color for the right hand side option label.
Fixes
https://chat.zulip.org/#narrow/stream/101-design/topic/UI.20redesign.3A.20new.20topic.20indicator.20in.20typeaheads/near/1908770.
We could have made this change specific to the option label for
composebox typeahead only, but I don't see a scenario where all the
other colors are the same for another typeahead but the right option
label color is different. Currently, the option_label is only used in
composebox typeahead, so visually this commit will only affect that
typeahead.
2024-08-13 18:28:32 -07:00
Karl Stolley 87a0fa0c8c right_sidebar: Avoid vdots appearing beneath Simplebar scroll. 2024-08-13 08:55:31 -07:00
Karl Stolley c4dfa7890e right_sidebar: Add minor lefthand padding called for by Vlad's design. 2024-08-13 08:55:31 -07:00
Karl Stolley 557038416c right_sidebar: Rework righthand gutter, header to match Vlad's design.
Fixes #27574.
2024-08-13 08:55:31 -07:00
Karl Stolley 2f726b20ed compose: Specify non-alpha message-area colors.
This keeps colors uniform between edit and preview modes, and also
ensures no bleedthrough of the editor when in preview mode.

ID selectors have been used for those colors to both keep the text
color declaration in the same place, and to avoid a dark-theme
specificity problem where the generic textarea took precedence over
the colors specified on the compose box's own textarea.
2024-08-01 16:30:56 -07:00
Karl Stolley cc1cfa9336 message_preview: Set preview height based on edit area.
This ensures that neither the compose box nor the edit-message area
shifts when toggling back and forth between edit and preview modes.
2024-07-31 12:37:19 -07:00
Sayam Samal 1f020816c2 user_card_popover: Update text item colors to improve contrast.
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.
2024-07-23 14:56:15 -07:00
Sayam Samal ee26f16d67 css: Replace var() color arguments with static hsl() equivalent values.
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.
2024-07-23 14:56:15 -07:00
Sayam Samal 97c27374d6 css: Use `oklch` color space in `color-mix()` for Zulip color palette. 2024-07-23 14:56:15 -07:00
Karl Stolley 9716ad9e84 search_box: Specify consistent, veritable height. 2024-07-23 14:00:32 -07:00
Sahil Batra b07ba1c100 css: Increase right padding for table headers.
This commit increases right padding of headers of sortable
table columns, so that there is some space between the arrow
and the hover shadow border.
2024-07-23 09:43:42 -07:00
Sahil Batra a888763141 css: Extract variable for the right padding for table headers.
This commit extracts CSS value for right padding, used in headers
of sortable columns of a table, in a variable.
2024-07-23 09:43:42 -07:00
Karl Stolley 800ae6d027 left_sidebar: Adjust left sidebar size, and account for right margin. 2024-07-19 16:54:53 -07:00
Karl Stolley 9534e0b5d0 left_sidebar: Size left sidebar to accomodate font, screen sizes. 2024-07-19 16:54:53 -07:00
Karl Stolley 27d5227e48 navbar_search: Make search bar conform to short viewports. 2024-07-17 14:50:35 -07:00
Karl Stolley f738a68bb1 pills: Make --height-input-pill authoritative. 2024-07-17 10:31:01 -07:00
Sayam Samal dd2739a7e1 user_card_popover: Update the hover and active colors of copy button.
Using the new color palette defined in the previous commit, this commit
updates the hover and active colors of the copy button in the user card
popover.

This also adds a background to the copy icon on hover and active states.
2024-07-12 13:03:40 -07:00
Sayam Samal 84bf694257 css: Add Zulip color palette to app_variables.css.
This commit adds the new Zulip color palette, as css custom properties
to the app_variables.css file. Defining it in the app_variables.css file
allows us to visualize the colors in the editor's autocomplete dropdown
when we use these color values for defining other component based css
variables.

Since hex color values are used in defining the color palette, we
disable the `color-no-hex` stylelint rule for that part of the file.
2024-07-12 13:03:40 -07:00
Sayam Samal 60d1993ed8 user_card_popover: Redesign popover using the new `popover-menu` theme.
As part of the popover menu redesign, this commit redesigns the user
card popover using the new "popover-menu" tippy theme and improves
accessibility by using appropriate ARIA attributes.
2024-07-12 13:03:40 -07:00
Sayam Samal 1b1f2411d8 user_group_popover: Redesign popover using the new "popover-menu" theme.
As part of the popover menu redesign, this commit redesigns the user
group info popover using the new "popover-menu" tippy theme and improves
accessibility by using appropriate ARIA attributes.

Fixes part of #28699.
2024-07-10 12:54:05 -07:00
evykassirer 11bb44c7cc search pills: Direct message group pill support.
This supports adding users to DM pills by simply typing
a user's name in the text input directly after a complete
dm pill. It only works for DM pills at the end of search
input.

Clicking the X button removes a user from its user pill
container, and if that user was the last user left in the
container, then the whole container is also removed.
2024-07-09 17:08:45 -07:00
Karl Stolley 7b5f0e4d89 compose_box: Scale formatting buttons with info density. 2024-07-09 13:38:44 -07:00
Pratik Chanda a7703e9f5f left_sidebar: Open topic menu when clicking on follow topic icon.
Earlier, in left sidebar, clicking on followed topic icon would narrow
to the topic.

This commit introduces the ability to open topic status menu from
left sidebar from followed topic icon.

Fixes: zulip#28941.
2024-07-05 16:36:49 -07:00
Karl Stolley d3b13cf15c message_controls: Reduce control button width to match padded icon. 2024-07-05 15:53:50 -07:00
N-Shar-ma b85e41df47 compose: Make compose close cross button smaller and add active state.
The background color's opacity is reduced for the button's active state.
2024-07-05 15:21:34 -07:00
Karl Stolley 97d401a0a1 left_sidebar: Calculate bottom scrolling buffer. 2024-07-05 14:38:28 -07:00
Aman Agrawal 41b431de70 info-overlay: Adjust width of overlay and columns.
Objectives are to make the width of overlay scale with font size and
reduce too much gap between text end of first column and
text start of the other column.
2024-07-05 11:36:35 -07:00
Karl Stolley 47430ac719 message_row: Allow user avatar to scale with UI. 2024-07-02 11:45:30 -07:00
Karl Stolley 8697c0c63e message_box: Base sender line-height on single-line message. 2024-07-02 11:45:30 -07:00
Karl Stolley 8556e098fb message_box: Set vertical margin to interelement space. 2024-07-02 11:45:30 -07:00
PieterCK b2515e8214 subscription css: Add new app variable for bottom border color.
This commit add a new css variable for subscription lists bottom
border color.

Fixes #30677.
2024-07-02 11:16:51 -07:00
N-Shar-ma c10ff0bea8 compose: Use same focus ring color for compose buttons in each theme.
A new css variable is created with the same blue color in light theme as
`color-outline-focus`, and gray color in dark theme, and is used for the
focus-visible state of the compose control buttons, the compose close
button, and the send later vdots button.
2024-06-28 15:14:01 -07:00
N-Shar-ma 3262afeb9b Revert "css: Redefine `--color-outline-focus` for dark theme."
This reverts commit 5c1069872d.
2024-06-28 15:14:01 -07:00
Karl Stolley a9c9115175 left_sidebar: Resize topic check with UI. 2024-06-28 15:12:00 -07:00