Commit Graph

263 Commits

Author SHA1 Message Date
Sahil Batra
c8ad693e41 billing: Add bootstrap CSS to number type inputs.
This commit adds bootstrap CSS rules for number type inputs
in billing and upgrade page to billing.css as we will be
removing them from bootstrap.css in further commits.
2023-05-23 10:54:12 -07:00
Sahil Batra
96eaadda71 activity: Add bootstrap CSS styles for number type inputs.
This commit adds bootstrap CSS rules for number type inputs
in activity page to activity.css as we will be removing them
from bootstrap.css in further commits.
2023-05-23 10:54:12 -07:00
Sahil Batra
a62a863f67 bootstrap: Remove CSS for "submit" type inputs.
We use "submit" type inputs in dev login page. Only "cursor"
CSS was applied to those elements from bootstrap and this
commit adds it to those elements in portico_signin.css and
removes the CSS in bootstrap.css and bootstrap-btn.css.
2023-05-23 10:54:12 -07:00
Sahil Batra
599ad856b2 bootstrap: Remove CSS for ".input-xxlarge" elements.
We use "input-xxlarge" class for search box in activity
support page only. This commit adds the width property
in activity.css for the search box and rest of the CSS
applied using this class was redundant and can be removed
safely.
2023-05-23 10:54:12 -07:00
Aman Agrawal
dc6099d656 message_row: Use equal top/bottom padding in message content.
We had the `3px 0 1px` padding before migration to use grid,
then I switched it to use `4px 0 1px` since we were planning to
use blue box border which seemed to have helped that case.

Since we switched to using outline for blue box, it makes sense
to just use equal padding.
2023-05-23 10:45:28 -07:00
Karl Stolley
ab94bcb21b css: Move recipient-row unread markers to message row file. 2023-05-22 15:54:57 -07:00
Karl Stolley
36c5df7663 css: Move message-row styles to own file. 2023-05-22 15:54:57 -07:00
Karl Stolley
ffbd0cb316 css: Clean up comments for future readers. 2023-05-22 15:54:57 -07:00
Aman Agrawal
eeea5c1713 css: Fix @everyone and @stream displayed as user mentions.
Backend incorrectly renders @everyone and @stream as `user-mention`
while they are clearly `group_mention`. To fix this, we use
`data-user-id` property of @everyone and @stream which are
set to `*` for them.
2023-05-22 12:41:44 -07:00
Aman Agrawal
67ff421194 css: Change mention text and background colors. 2023-05-22 12:41:44 -07:00
Aman Agrawal
c415944e55 css: Separate mention pill colors. 2023-05-22 12:41:44 -07:00
Aman Agrawal
f04ae8acd3 drafts: Fix message header overlapping outline. 2023-05-22 09:31:21 -07:00
Hardik Dharmani
d9716bc189 left_sidebar: Improve mentions in muted topics.
When there are only muted unread mentions in a stream, show `@` icon
and unread count in faded style, also align the `@` on more topics
with no unead counter on it.

If there are only muted unread messages without mentions don't show
the unread counter on the stream.

Fixes #25382.
2023-05-19 18:40:57 -07:00
Karl Stolley
c2f6167c01 css: Remove superfluous grid- properties.
The use of named areas with `grid-area` make it unnecessary to
declare `grid-row` or `grid-column` values. (Note also that
grid areas must not be presented in quotation marks.)

Additionally, because `.unread_marker` is no longer placed on the
grid by itself (i.e., it always accompanies `.date_unread_marker`
or `.message_unread_marker`), it does not need any manual grid
placement, `grid-area` or otherwise.
2023-05-19 13:48:16 -07:00
Aman Agrawal
9aa9f9b3c8 message: Separate unread marker of date_row from message.
This allows us to easily disable unread marker for date row of
the first unread message without producing any bugs.
2023-05-19 13:48:16 -07:00
Karl Stolley
ef3289b73b css: Present message_row as CSS Grid.
This change enables the unread marker to participate as a grid item,
rather than the product of various absolute/relative positioning
hacks. The intention is to therefore prevent the blue active-message
box from disappearing on browsers that have zoomed out (~80% zoom).

With grid in place, this also makes for a more robust presentation
of each message row, and named grid areas should make it possible to
modify and extend the grid into the future.

Finally, this change removes styles that are no longer necessary in
the context of CSS Grid.
2023-05-19 13:48:16 -07:00
Josiah Kievit
28c5c64b8d
css: Remove copy code button outline.
Added styling to show no outline around the copy to clipboard button on click. 

Previously, when clicking this button, a rectangular outline appeared around 
the button, which didn't look good, since a 'Copied!' message was already displayed.

Fixes #25533.
2023-05-19 13:09:10 -07:00
evykassirer
27bc36b7d6 settings: Revert dark mode background color changes. 2023-05-19 10:57:50 -07:00
Karl Stolley
0407abc788 help_pages: Improve anchor highlights.
These changes ensure that only headings targeted by URL fragments are
highlighted in full. Div elements will have their immediate first
child element highlighted instead (e.g., the first element of an API
parameter box).
2023-05-18 13:57:42 -07:00
Aman Agrawal
44ae67d426 css: Fix gap between header and sticky header at some zoom level. 2023-05-18 13:39:46 -07:00
Aman Agrawal
3acd7b8f47 css: Move message header padding to the element with border.
Apply border and top margin on the same element so that browser
has no way to introduce a gap between them.
2023-05-18 13:39:46 -07:00
Tim Abbott
ac3acc941f css: Increase opacity for grey elements.
The message timestamp and a few settings elements looked off with the
new 25% off white dark theme font color.
2023-05-16 16:52:22 -07:00
Trident Pancake
6fb16f3598 message_edit: Disable save btn after edit time limit
Fixes #25413.

The old code was disabling the save button wrong by using
`.addClass("disabled")` instead of `prop()`.

Added tooltip for the disabled save button as per issue #25413 and changed
"Times up!" color to red.

The textbox readonly logic was changed to no longer becoming readonly. Reason
being there are edge cases involving the compose buttons such that simply
marking the textbox as readonly is not sufficient.

E.g. using the compose buttons after readonly still modifies the content.

One solution might be to just hide the compose buttons visually. However, there
are edge cases for that too. If preview mode was previously active, then
perhaps that state needs to be reverted. If any modal is open, such as the emoji
picker, then that needs to be closed. Solving these edge cases doesn't
improve the user experience. Keeping the textbox editable allows an easier way
for user to copy the text and don't have weird cases.
2023-05-16 15:59:29 -07:00
Lakshay Mittal
a208da9c4d style: Fix dropdown text alignment by reducing vertical padding.
Zulip's select widgets have a 30px height; this comes from Bootstrap
but is also generally nice for visual consistency.

In modals, we use a 15px font-size, instead of the 14px used in the
rest of the app, and in that context, the 4px vertical padding plus
30px fixed height resulted in the text not being vertically aligned.

Fix this by removing that vertical padding; all of our select elements
with these classes appear to position the text in the center of the
dropdown through other CSS mechanisms.
2023-05-16 15:43:06 -07:00
Sahil Batra
007a51f277 accounts: Allow user to change email visibility during first login.
We now allow users to change email address visibility setting
on the "Terms of service" page during first login. This page is
not shown for users creating account using normal registration
process, but is useful for imported users and users created
through API, LDAP, SCIM and management commands.
2023-05-16 13:52:56 -07:00
Aman Agrawal
e6c7363613 css: Make top message logo less bright. 2023-05-16 12:35:17 -07:00
Aman Agrawal
29880a4a1e css: Change border-bottom color for message header. 2023-05-16 12:35:17 -07:00
Aman Agrawal
c84681c69c css: Color tweaks. 2023-05-16 12:35:17 -07:00
Aman Agrawal
2a98968846 css: Use 75% white as default text color. 2023-05-16 12:35:17 -07:00
Aman Agrawal
3f4deedba1 css: Remove stale css.
`message_view_header_underpadding` is no longer present in the
codebase as we move the padding to be above the sticky recipient
bar.
2023-05-16 12:35:17 -07:00
Aman Agrawal
9f5b7ba9b0 css: Separate out text colors. 2023-05-16 12:35:17 -07:00
Aman Agrawal
17bdf22521 css: Allow actions_hover icon to have a focus outline. 2023-05-16 11:57:17 -07:00
Tim Abbott
74e6367455 css: Increase constrast for blue box. 2023-05-15 16:01:09 -07:00
Joelute
584b11af2d unread_banner: Apply updated design to message feed banners.
In #22524, we have updated the compose banner to the new, updated design
while the unread banners have remained the same. When comparing them side
by side, they look rather old and outdated. We should apply the updated
design to the unread banners as well.

Fixes: #25551.
2023-05-15 15:59:12 -07:00
Karl Stolley
b852da6eed help_pages: Preserve anchor highlights.
This commit assigns a `.scroll-target` class to preserve any URL
fragment whose corresponding ID is on the self-same page as the
activating link.

This accommodates a side-effect of the fetch-based page-loading
logic, which seems to lose the `:target` reference once a load
or reload is complete.
2023-05-15 14:57:42 -07:00
Karl Stolley
ceec61ba10 help_pages: Highlight headings targeted by URL fragments.
One caveat: While the approach here works fine when loading a new
docs page whose URL includes a fragment, there appears to be something
about `simplebar` that clears out the `:target` reference. If you
click a heading link on a help page, for example, you might
momentarily see the highlighted style appear before it disappears.
2023-05-15 14:57:42 -07:00
Daniil Fadeev
e64e5f2413 scheduled_messages: Add keyboard navigation.
Keyboard navigation has been added to the scheduled messages modal
in this commit. The solution is based on the `modals_handle_events`
function from the `messages_overlay_ui.js` module, as well as some
helpful functions from the same module.

Fixes: #25181.
2023-05-15 14:46:21 -07:00
Aman Agrawal
c375d36c9e css: Dim color of failed message sent icons. 2023-05-14 16:46:20 -07:00
Aman Agrawal
1bffdda59f scheduled_message_overlay: Add a failed delivery indicator.
Fixes #25501
2023-05-14 16:46:20 -07:00
Satyam Bansal
fad5c88aa9 select_recipient_widget: Use "button" tag instead of "div".
Previously, hovering over the stream selector in the
compose box would show a mouse/text pointer instead
of a hand pointer.

Fixes #25592.
2023-05-14 16:35:48 -07:00
Ujjawal Modi
eda1ee555b streams: Properly disable add subscriber container for existing streams.
Earlier the field used for adding subscribers to existing
streams was not properly disabled.

This commit properly disables the field and also adds a new function
for enabling and disabling add subscribers container.
2023-05-14 11:19:05 -07:00
Tim Abbott
2b2ee686f3 portico: Extract CSS variable padded-content-padding. 2023-05-12 11:54:17 -07:00
Karl Stolley
f1db7c1d72 portico_css: Keep targeted elements below menu bar.
This PR ensure that all elements targeted by URL fragments will
remain visible below the portico's menu bar at all viewport
sizes and also when a user zooms in, provided the target is on a
page with the menu bar, which will have the `portico-landing`
class.

Whether a quirk or a bug, Chrome appears to ignore the padding on
ancestral containing elements when calculating the offset for
`scroll-margin-top`, which is why padding has been moved to
`.inner-content` for `.why-page` and `.case-studies-page`, which
are the two unique class names for portico pages where the targeted-
element scrolling behavior is used.
2023-05-12 11:54:17 -07:00
Karl Stolley
a5ff3d7e59 portico_pages: Add uniform structure HTML structure.
This commit ensures that the Attribution, Jobs, and Team pages all
share a uniform structure to match those of other pages. This will
simplify styling and should ensure greater confidence when modifying
portico landing-page styles.

The one CSS modification here, for the jobs page, maintains the space
at the top of the "How we work" section.
2023-05-12 11:54:17 -07:00
Aman Agrawal
461d935463 css: Fix unread marker leaking through message header. 2023-05-12 11:13:20 -07:00
Tim Abbott
fe54df0b01 css: Darken light theme message feed borders.
This was a design bug caused by Figma's grey background.

https://chat.zulip.org/#narrow/stream/101-design/topic/UI.20redesign.3A.20background/near/1567435
2023-05-11 16:05:05 -07:00
Hardik Dharmani
ede1e547ee stream_settings: Fix bugs with #stream-creation .modal-footer.
This commit addresses `#stream-creation .modal-footer` becoming
transparent after an error in creating a stream due to overlapping
with `.stream-creation-body`. Instead of adding data-simplebar on
.stream-creation-body, added it to a new div
`stream-creation-simplebar-container` which contains 3 divs:
stream_create_info,stream_creating_indicator and stream-creation-body.

Additionally, fixed the border-radius of the modal footer on the
bottom left side for device width > $md_min.

Fixes #25526
2023-05-11 15:50:56 -07:00
Aman Agrawal
35278a74bb css: Fix highlighted stream color with keyboard navigation.
Instead of highlighting the topics of the `active-stream`, we
highlight the stream name.
2023-05-11 12:44:23 -07:00
Aman Agrawal
232543d425 billing: Making /upgrade page header visible.
This was hidden following #25518
2023-05-11 11:30:31 -07:00
Karl Stolley
1d5e026b66 left_sidebar: Adjust size and position of DM icons. 2023-05-11 10:53:03 -07:00