css: Redesign message source textarea and close / cancel buttons.

[N-Shar-ma]

css: Make all modal buttons half opaque when disabled, instead of grey.

Earlier, the primary modal button always turned grey on being disabled, while other modal buttons remained as is in light mode, and grey in dark mode. Now the styling is made consistent across all modal buttons, by giving them all 50% opacity when disabled.

css: Make message send / save buttons half opaque when disabled.

So far, the Send buttons area would turn grey when the message could not be sent. The Save button when editing a message would also turn grey when the message could not be edited anymore. Now we simply make the buttons half opaque instead of turning them grey in a disabled state.

css: Redesign exit / close buttons.

We change the background colors for the close / cancel / exit buttons in modals and messages (when editing them or viewing their source). The border is also removed for those buttons in messages.

message_edit: Show message source in full opacity.

When viewing the source of a message when not editable, the opacity of the read-only textarea would be reduced to 0.5, like for any other read- only textarea. This was unnecessary for viewing message source, so the opacity for this case is now set to 1.

Fixes: #28701.

Screenshots and screen captures:

Light:

Message edit / source

Modal (both enabled buttons)

Modal (both disabled buttons)

Disabled Send button

Dark:

Message edit / source

Modal (both enabled buttons)

Modal (both disabled buttons)

Disabled Send button

Self-review checklist

• Self-reviewed the changes for clarity and maintainability
  (variable names, code reuse, readability, etc.).

Communicate decisions, questions, and potential concerns.

• Explains differences from previous plans (e.g., issue description).
• Highlights technical choices and bugs encountered.
• Calls out remaining decisions and concerns.
• Automated tests verify logic where appropriate.

Individual commits are ready for review (see commit discipline).

• Each commit is a coherent idea.
• Commit message(s) explain reasoning and motivation for changes.

Completed manual review and testing of the following:

• Visual appearance of the changes.
• Responsiveness and internationalization.
• Strings and tooltips.
• End-to-end functionality of buttons, interactions and flows.
• Corner cases, error conditions, and easily imagined bugs.

[zulipbot]

Hello @zulip/design members, this pull request was labeled with the "redesign" label, so you may want to check it out!

[N-Shar-ma]

@alya This should be quick to test out

[alya]

Thanks! The text color looks darker to me than in the screenshot in the issue, but I don't know if that's an illusion or we changed plans since the design was posted?

[alya]

The button also needs to be restyled, so this change wouldn't close out #28701.

[N-Shar-ma]

Thanks! The text color looks darker to me than in the screenshot in the issue, but I don't know if that's an illusion or we changed plans since the design was posted?

@alya The demo has a more intense default text color (so it's for sent / rendered messages too) than we currently do, and the color here is the same as the current message text color.

Thanks for pointing out the different button styling, I'll soon fix that in another commit

[N-Shar-ma]

@alya We use common styles for the message source close button (which the issue #28701 specifies) and other Close / Cancel buttons, specifically the Cancel buttons when editing a message and those in modals (screenshots added in PR description) and on billing pages. So this PR changes those too, to the style specified for the message source Close button. The border is only removed for message edit / source buttons though, not the modal ones.

Do let me know if any of this needs to change!

[alya]

Hm, @terpimost , did you intend for this to apply to modals as well, or are you taking a separate pass there?

[alya]

Also, have we thought about how this button looks next to a disabled main action button? This might be OK, but I just want to make sure we explicitly consider it. It will come up a lot in modals.

[terpimost]

Disabled Primary button shouldn't be grey. It should just be 0.5 transparent and cursor is default

[alya]

Related work: #29527

[N-Shar-ma]

Any next steps needed here? Do we want to redesign the primary button in this same PR? @alya

[alya]

I think we should apply the primary button change on the same PR as this change, yeah. @sahil839 would it make sense for @N-Shar-ma to do that here, and then #29527 could be rebased on top of that?

[sahil839]

Yes, that would be fine.

[N-Shar-ma]

@alya Looked into this closer and I now see we use the same purple for all primary buttons: the Send button, the Save button when editing, and of course the main action button in modals. Do we want the disabled state of all of them to have opacity: 0.5 instead of grey? Or do we only want this change for a certain subset of primary buttons, like just the modal ones? FYI @terpimost

[alya]

I would imagine all of them, but I'll let @terpimost confirm.

[terpimost]

I suggest to approach disabled state as 0.5 by default in all cases and if in some case we have a negative feedback so a custom disabled state tines there

[N-Shar-ma]

@alya I've pushed changes making all modal buttons, and the message send / save buttons half opaque when disabled, and added screenshots in the PR description too. Please take a look!

[alya]

Cool, looks good to me in manual testing! (I did some spot-checking of places that I could think of.)

[timabbott]

I'm not sure I like the borderless cancel buttons -- the low-contrast boundary may be a problem, at least on my screen. But we can test-deploy and get some experience with it. I think aside from that detail I'd probably have just merged rather than testing.

[timabbott]

@N-Shar-ma can you post somewhere in #design to just raise visibility for the new cancel button styling (etc.) so we can get more feedback on it? I think probably we can plan to merge and fix-forward in any case, I just don't want to lose track of that as a thing to get attention on.

[N-Shar-ma]

@timabbott posted in #design > Close / Cancel buttons restyled, border removed #29397

[timabbott]

OK. I'm going to go ahead and merge and we can continue the discussion there; it's basically about one line of remaining code under discussion, and not something so visible that it'd feel bad to flip-flop on users a bit.