zulip icon indicating copy to clipboard operation
zulip copied to clipboard

message feed: Refine dark mode styles for alert_word.

Open amaranand360 opened this issue 2 years ago • 1 comments

This pull request addresses various style enhancements in dark mode to improve readability and accessibility:

  • All colors used in this pull request have been suggested in #12614(comment)
  • Adjusts the color and background-color of alert words for better visibility.
  • Modifies the alert_word link color to enhance contrast and readability.
  • Improves the search result background-color for a more cohesive dark mode experience.
  • I've ensured that the changes made for dark mode don't affect the light mode. Attached is a screenshot of the light mode that shows the adjustments made exclusively for dark mode, ensuring readability and accessibility.

Fixes: #12614

Screenshots and screen captures:

  • Dark Mode Before Changes for Alert Word:
Screenshot 2024-02-11 at 2 37 51 PM
  • Dark Mode After Changes for Alert Word:
Screenshot 2024-02-17 at 3 10 39 PM
  • Dark Mode Before Changes for Alert Word Link tag:
Screenshot 2024-02-17 at 3 45 54 PM
  • Dark Mode After Changes for Alert Word Link tag:
Screenshot 2024-02-17 at 3 12 56 PM
  • Dark Mode Before Changes for search results
Screenshot 2024-02-11 at 2 38 32 PM
  • Dark Mode After Changes for search results
Screenshot 2024-02-03 at 12 54 37 PM
  • Light Mode:

    • Doesn't Effect the Changes for Search Results:
Screenshot 2024-02-03 at 12 56 50 PM
  • Doesn't Effect the Changes for Alert Word:
Screenshot 2024-02-03 at 12 57 13 PM
  • Before Changes for highlighted link text:
Screenshot 2024-02-15 at 11 27 46 AM
  • After Changes for highlighted link text: Screenshot 2024-02-15 at 11 43 05 AM
Self-review checklist
  • [x] Self-reviewed the changes for clarity and maintainability (variable names, code reuse, readability, etc.).

Communicate decisions, questions, and potential concerns.

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

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

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

Completed manual review and testing of the following:

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

amaranand360 avatar Feb 17 '24 10:02 amaranand360

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

zulipbot avatar Feb 17 '24 10:02 zulipbot

Continues work from #28813.

alya avatar Feb 22 '24 07:02 alya

I believe the next step here is @karlstolley 's review. Unless there's feedback on #28813 that still needs to be addressed?

alya avatar Mar 04 '24 00:03 alya

Okay. Please see my comments above. Also, make your screenshots way more simple to compare as before and after. The best ways to do this:

  1. Make sure you have EXACTLY the same content on screen in both the before and after shots
  2. Use GitHub-flavored Markdown table syntax to show before and after shots, side by side. See for example the screenshots in #29203

karlstolley avatar Mar 05 '24 21:03 karlstolley

Heads up @amaranand360, we just merged some commits that conflict with the changes you made in this pull request! You can review this repository's recent commits to see where the conflicts occur. Please rebase your feature branch against the upstream/main branch and resolve your pull request's merge conflicts accordingly.

zulipbot avatar Mar 19 '24 16:03 zulipbot