Commit Graph

211 Commits

Author SHA1 Message Date
sanchi-t 82fd3c9b32 css: Refactor theme colors for `alerts`.
This change moves the light and dark theme colors for
`alerts` to CSS variables.
2024-09-27 13:27:58 -07:00
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
tnmkr 23efb5cec7 custom_profile_fields: Support non editable profile fields.
This commit allows configuration of "editable_by_user" property from the
organization settings modal. It also adds support for non-editable
fields in profile settings modal.

Fixes #22883.

Co-Authored-By: Ujjawal Modi <umodi2003@gmail.com>
2024-09-23 18:09:38 -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 19c29af4bb icons: Cleanup redundant `.fa-group` related styling.
This also fixes the opacity of the `.zulip-icon-triple-users` icon in
the recent view.
2024-09-20 09:07:05 -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
sujal shah 3b69f2e5d9 stream_settings: Extract `creator_detail` section.
Extract display_pill and date code to separate
'creator_detail.hbs' file.
Rename 'stream_creator_details' to 'creator_details'.
2024-09-13 18:44:58 -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 7cb55d2f91 buttons: Remove unused .btn-link styles. 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
Sanchit Sharma 48b60db4a4 settings_config: Use `kbd` for `realm_enter_send` label.
Fixes: #29083.
2024-09-06 11:47:04 -07:00
Sanchit Sharma 671946351c settings: Improve visibility of "Enter Sends Message" setting.
Addresses user research feedback by duplicating the "Enter Sends
Message" setting in the Settings > Preferences menu, specifically within
the General section, ensuring users can easily locate and configure
this option.

server_events_dispatch: Remove break statement.
The settings page needs to be updated when
`enter_sends` property is updated.

css: Update vertical-align to middle for the checkbox element.

Co-authored-by: Akarsh Jain<akarsh.jain.790@gmail.com>.
2024-09-06 11:47:04 -07:00
Shubham Padia 2f120d2572 settings: Make show more tab look similar to other tabs.
Fixes https://chat.zulip.org/#narrow/stream/101-design/topic/org.20settings.20-.20show.20more.20-.20icon.20alignment/near/1935512
Also renames `.collapse-settings-btn` to `.collapse-settings-button`.
2024-09-03 12:20:42 -07:00
Shubham Padia 3afc34050b css: Use classnames for settings page .sidebar li items.
Having the `*` selector there affects the performance. See
https://chat.zulip.org/#narrow/stream/6-frontend/topic/CSS.20selector.20performance/near/1845719
for more details.
We've used `sidebar` instead of `sidebar-wrapper` for the rules in
dark-theme also, since that is the rule being followed for light theme.
We've introduced a new class called `sidebar-item`.
2024-08-30 10:23:19 -07:00
Karl Stolley f55feae0ea search: Reset default iOS button styles. 2024-08-16 13:58:50 -07:00
Tim Abbott e4567e05ac css: Explode dark theme disabled rule.
This replaces a :disabled selector with individual ones for each
element type; I verified in CSS selector profiling that this change
removes lines that were previously about 10% of profiled CSS selector
processing time for rendering the combined feed.

The reason being that the rendered elements have very few disable-able
elements, but the browser was spending a lot of time trying to match
**every** element for whether it might have been disabled, which was
slow.

This probably reflects a browser bug.
2024-08-14 13:42:59 -07:00
Shubham Padia a746a7e784 css: Remove unnecessary rule for subscriptions_overlay.
Even though the border-color was set for `#subscriptions_overlay
.subsection-parent div`, since the border-style was not set. It did not
have any effect on the appearance of the children div of
.subsection-parent.
2024-08-13 22:36:35 -07:00
Shubham Padia 0d95d79033 css: Use classname instead of div for .flex.overlay-content.
Each child div for .flex.overlay-content has the class
.overlay-container, so it is safe to replace the div with that
classname.
Having the `div` selector there affects the performance. See
https://chat.zulip.org/#narrow/stream/6-frontend/topic/CSS.20selector.20performance/near/1845719
for more details.
2024-08-13 22:36:35 -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
evykassirer 1b8658670c css: Use classname for stream subheader name. 2024-07-26 14:41:08 -07:00
evykassirer 8427b6f744 css: Use classname instead of span selector for todo checkboxes. 2024-07-26 14:41:08 -07:00
evykassirer 90ab7f6287 css: Remove unused span selector in scroll to bottom container.
This rule was originally introduced with a span element in
0eafa6039b but the span has been
since removed.
2024-07-26 14:41:07 -07:00
Sahil Batra b0e8096579 css: Do not use "*" selector for color_animated_button styles.
Using "*" selector is inefficient as they require checking every
element because of the browser's bottom-up matching process.
2024-07-24 12:31:20 -07:00
Alex Vandiver 39d6f4ce10 thumbnail: Show the right spinner based on dark/light mode. 2024-07-21 18:41:59 -07:00
Shubham Padia 0565fbb6ff recent_view: Replace fa-envelope with zulip-icon-user.
We don't have any more occurrences of fa-envelope is our codebase now.
2024-07-17 12:08:07 -07:00
Sayam Samal 4457225d35 bootstrap: Remove legacy `nav nav-list` classes and related CSS.
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.
2024-07-15 10:00:22 -07:00
tnmkr 6613efeca3 org_settings: Fix dropdown color in `Organization settings` section.
This fixes the text color for .dropdown-widget-button dropdowns both in
enabled and disabled state.
2024-07-09 13:11:53 -07:00
tnmkr f94c55229f stream_settings: Fix .dropdown-widget-button color.
Fixes "Who can unsubscribe others from this channel?" dropdown to match
other dropdowns.
2024-07-09 13:11:53 -07:00
tnmkr 58d91de1d6 stream_settings: Fix blue color on hover for creator pill.
These pills were added in b524a2c1ea.
2024-07-09 13:11:53 -07:00
N-Shar-ma 5a740d4fbb compose: Fix the red outline in invalid state in dark theme.
In dark theme, the selector for the outline was the wrong element, so a
double, misplaced outline would show up.
2024-06-28 15:13:21 -07:00
Aman Agrawal 772969e68c emoji_picker: Format search bar same as dropdown widget. 2024-06-28 11:24:12 -07:00
Sayam Samal b616f013f0 gear_menu: Add theme switcher to the gear menu popover.
Standardize theme selection across the web app by replacing separate
light/dark theme menu options being used in the spectator view with the
new 3-way theme switcher.

Fixes #30318.
2024-06-27 16:24:49 -07:00
Aman Agrawal 52ac602acb typeahead: Make them look like dropdown widget.
This attempts to change background color and text color of typeaheads
to be same as dropdown widgets we have in the app.
2024-06-26 16:26:31 -07:00
N-Shar-ma 878d02cf5c compose: Redesign control buttons row and textbox to look like 1 unit.
The row of buttons is placed using CSS grid template areas so that
visually it is now inside the bottom edge of the textbox. The color of
the buttons row and individual buttons is changed to match the color of
the textbox. All textbox border / box shadow properties are now applied
to its parent instead which is extended under the buttons' row, so that
its border snuggly fits around the buttons row too.

Notable side effects:
- In dark mode the textbox in focused state now has a light border which
does not match the recipient input's current border which doesn't change
when focused. Likely, the recipient input should be updated to match the
textbox's border color.
- The dividers in the formatting buttons row are not vertically centered
now. This should be figured out soon.

Fixes: #28702.
2024-06-21 17:29:56 -07:00
evykassirer f6c9b515c7 input_pill: Redesign input pills.
This commit also replaces the close button with
an svg. This is part of the app redesign, and
preparation for the upcoming search pill project.
2024-06-20 15:16:17 -07:00
Shubham Padia 628757a2df left_sidebar: Use same color for active narrow filter for dm section.
Fixes #30467.
2024-06-19 18:10:15 -07:00
Shubham Padia e9f3371eca css: Remove unused css rules for background colour in dark theme.
We don't need this explicit rule anymore, since the css variable will
change the background color from zulip.css itself.
2024-06-19 18:10:15 -07:00
Shubham Padia b0eab81459 left_sidebar: Rename active_private_messages_section to use `direct`.
Rename `active_private_messages_section` to
`active-direct-messages-section`.
We've also hyphenated the attribute during the rename.
Part of the private_message to direct_message rename project.
2024-06-19 18:10:15 -07:00
Shubham Padia 694d457f43 css: Remove unnnecessary ids from active pm section color.
By removing the ids and setting the background-colour directly
for `.active_private_messages_section` achieves the same purpose.
2024-06-19 18:10:15 -07:00
Sahil Batra 77f327260d settings: Fix public channel creation setting in dark theme.
The correct CSS was not being applied to the public channel
creation setting dropdown in dark theme and this commit fixes
it by just updating the CSS to use a common selector for all
dropdown widgets in "Organization permissions" panel, so that
we would avoid having this kind of bug in future when more
settings are added.

We do not update the CSS to use a common selector for all
dropdown widgets in the whole settings overlay because
the one used for notification stream settings use different
text color for now.
2024-06-14 17:11:23 -07:00
PieterCK dae4c28b5b css: Add new css for rendered markdown table in dark mode.
Add a new dark mode css in app_variable.css for rendered
markdown tables. This rule sets a brighter color for tables
in messages / chat to make it more visible when the user is
using dark theme.

Fixes zulip#29856.
2024-06-12 06:45:00 -07:00
PieterCK e16b8eba56 css: Refactor css for markdown thead background color.
This refactor aims to make managing css for rendered
markdown table easier by abstracting the css for thead
background color into a new variable in app_variable.
2024-06-12 06:45:00 -07:00
N-Shar-ma ac3b5b3b04 compose: Redesign and relocate compose expand / collapse button.
The compose expand / collapse button is moved from the top right of the
compose area to the top right corner inside the compose textarea /
preview.

The textarea / preview and the button area shares the same grid parent.
25px extra padding is added to and margin is subtracted from the right
of the element so the button is visually inside it. It appears only on
hovering the compose area, and uses a new custom icon.

Fixes: #28791.
2024-06-11 14:13:10 -07:00
N-Shar-ma 41d790bd08 compose: Make the preview box background color same as the textbox's. 2024-06-11 14:13:10 -07:00
Aman Agrawal 371cd0da6c recent_view: Use html as scroll container.
Fixes #17933, #27517

Instead of `recent_view_table`, we make `html` as our scroll container.
This fixes an important bug for us where filters sometimes disappear
due to them scrolling under navbar which is unexpected. Since we are
now using separate containers to display rows and
filter (while includes table headers), where filters use sticky
positioning, this bug will be fixed.
2024-06-07 10:17:10 -07:00
Tim Abbott 097066f412 Revert "recent_topics: Change background color in dark mode on hover on a row."
This reverts commit 4ee37244bb.

This was not found to be uniformly agreed as an improvement.
2024-05-28 14:38:50 -07:00
Sahil Batra 016917679e invites: Do not show streams if user cannot subscribe others.
We do not show the streams list in invite modal if the user
does not have permission to subscribe others to stream and
show a notice mentioning it.
2024-05-14 14:20:07 -07:00
Shubham Padia 4ee37244bb recent_topics: Change background color in dark mode on hover on a row.
Fixes #30083.
We have used the dark theme color for the left sidebar row hover:
`--color-background-active-narrow-filter`. We are not using that variable
directly since we don't want a change in that color affecting the color in
recent conversations.
We've also used a single color on hover compared to 2 different colors
for unread and read row before. Light mode also uses a single color on
hover.
Relevant CZO conversation:
https://chat.zulip.org/#narrow/stream/101-design/topic/Hover.20color.20in.20Recent.20conversations.20dark.20mode.2E/near/1797727
2024-05-14 11:46:37 -07:00