Commit Graph

127 Commits

Author SHA1 Message Date
Karl Stolley 89e32bc917 left_sidebar: Place redesigned subheaders. 2024-09-24 11:08:50 -07:00
Karl Stolley 61221ddc74 sidebars: Update colors, opacity for side bar titles and toggles. 2024-09-24 11:08:50 -07:00
Karl Stolley 74fc257a05 left_sidebar: Place redesigned styles for action headings. 2024-09-24 11:08:50 -07:00
Karl Stolley 14695dd26a sidebars: Update typography for sidebar titles. 2024-09-24 11:08:50 -07:00
Aditya Kumar Kasaudhan aabecf131c typeahead: Improve link styling in typeahead suggestions.
Previously, links in typeahead suggestions appeared inconsistent with
the surrounding text when highlighted. This commit updates the link
styling to match the text color and adds a subtle underline with reduced
opacity for better visual consistency.

Fixes #31005.
2024-09-23 18:01:47 -07:00
sanchi-t 07af9b357b css: Refactor theme colors for `.message_edit_history_content`.
This change moves the light and dark theme colors for
`.message_edit_history_content` to CSS variables.
2024-09-23 16:07:51 -07:00
Sayam Samal a95c6a610e copy: Indicate successful copy by displaying a check icon momentarily. 2024-09-20 15:44:20 -07:00
Sayam Samal 3f79af12ac copy: Redesign copy button in user card popover.
This commit serves as the base for standardizing the look and feel of
the copy button throughout the UI.

Changes:
    - Replaces the old fa-copy icon with the new Zulip custom copy icon.
    - Standardizes the hover/active states for interactivity.
    - Defines two variants of the copy button, one which is just the
      icon and the other which is squared off like a traditional button.
    - Removes the `.popover-menu-icon` classes from the copy buttons,
      as that class is made to be used with popover menu option icons.
2024-09-20 15:44:20 -07:00
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