Linear issue: ENG-1712. Restyling the quotes by layering the blockquote with a low opacity black background to create the darker tint effect
Next Steps:
- Update non-viewer blockquote message container color to be the base thread color
Paths
| Differential D4999 Authored by ginsu on Aug 31 2022, 7:47 PM.
Details Summary Linear issue: ENG-1712. Restyling the quotes by layering the blockquote with a low opacity black background to create the darker tint effect Next Steps:
Test Plan Please view the attached screenshots to see the target design in the figma document and the before and after of the changes I implemented Figma document: Figma. Before: After:
Diff Detail
Event TimelineThere are a very large number of changes, so older changes are hidden. Show Older Changes Harbormaster completed remote builds in B11940: Diff 16391.Sep 7 2022, 12:10 AM2022-09-07 00:10:00 (UTC-7) Comment Actions Are you running into the following when you try to run things locally? Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/atul/comm/keyserver/dist/web/markdown/markdown.css' imported from /Users/atul/comm/keyserver/dist/web/markdown/rules.react.js I'm not able to patch in the changes and test it out. Assuming it's not just an issue on my end, we can schedule something to walk through it? This revision now requires changes to proceed.Sep 7 2022, 9:27 PM2022-09-07 21:27:58 (UTC-7) atul retitled this revision from [WEB] implemnted darker thread color tint to blockquote container to [web] Implement darker thread color tint to blockquote container.Sep 12 2022, 10:30 AM2022-09-12 10:30:35 (UTC-7) Comment Actions Glad I caught this diff before it got accepted. It might be best for me to do a second-pass review of all Markdown diffs until @atul is able to get up to speed with the codebase
Harbormaster completed remote builds in B12235: Diff 16787.Sep 18 2022, 5:54 AM2022-09-18 05:54:01 (UTC-7) ginsu edited the summary of this revision. (Show Details)Sep 18 2022, 5:55 AM2022-09-18 05:55:01 (UTC-7) Harbormaster completed remote builds in B12236: Diff 16788.Sep 18 2022, 5:57 AM2022-09-18 05:57:02 (UTC-7) Harbormaster completed remote builds in B12237: Diff 16789.Sep 18 2022, 6:01 AM2022-09-18 06:01:00 (UTC-7) ginsu edited the summary of this revision. (Show Details)Sep 18 2022, 6:38 AM2022-09-18 06:38:51 (UTC-7) ashoat added inline comments.
This revision now requires changes to proceed.Sep 18 2022, 1:48 PM2022-09-18 13:48:12 (UTC-7) Comment Actions Hi @ginsu.
Comment Actions resovled ashoat's and kamil's comments, my bad on unintentionally reverting kamils changes. Also good shout on tinycolor not parsing CSS custom properties, I made some changes to fix that Harbormaster completed remote builds in B12268: Diff 16830.Sep 19 2022, 6:27 AM2022-09-19 06:27:02 (UTC-7) ashoat added inline comments.
This revision now requires changes to proceed.Sep 19 2022, 10:20 AM2022-09-19 10:20:55 (UTC-7) Comment Actions Separately, how confident are you that we absolutely NEED to pass in the threadColor here? Is there no way to use CSS with opacity or something to avoid needing the threadColor as an input? My suspicion is that there is a way more simple solution here that you haven't explored... ginsu edited the test plan for this revision. (Show Details)Sep 20 2022, 3:56 AM2022-09-20 03:56:55 (UTC-7) Harbormaster completed remote builds in B12304: Diff 16892.Sep 20 2022, 4:00 AM2022-09-20 04:00:54 (UTC-7) Harbormaster completed remote builds in B12305: Diff 16893.Sep 20 2022, 4:03 AM2022-09-20 04:03:15 (UTC-7) ginsu edited the test plan for this revision. (Show Details)Sep 20 2022, 4:03 AM2022-09-20 04:03:50 (UTC-7) ginsu edited the summary of this revision. (Show Details)Sep 20 2022, 4:06 AM2022-09-20 04:06:56 (UTC-7) Harbormaster completed remote builds in B12306: Diff 16894.Sep 20 2022, 4:09 AM2022-09-20 04:09:39 (UTC-7) Comment Actions Nice! As an aside, I really liked the design with the drop shadow you shared in the Linear issue (https://linear.app/comm/issue/ENG-1712/restyle-quotes-in-messages-to-match-new-designs): I thought it provided more "contrast" between quotes when there are multiple levels of nesting, and just generally looked a lot better. CC @ashoat for thoughts. I realize the design was already determined in the Linear issue, but wanted to re-open discussion because I strongly prefer the design with drop shadows. Comment Actions Ah yeah, I got confused and thought there were only 3 options... I should've specified my fav using the title. I think "Left Border with chat theme and drop shadow" is the best in that list If it's easy to implement with CSS I think we should give it a go! ginsu edited the test plan for this revision. (Show Details)Sep 20 2022, 6:26 AM2022-09-20 06:26:11 (UTC-7) ginsu attached a referenced file: F175567: Screen Shot 2022-09-20 at 10.22.04 PM.png. (Show Details) ginsu attached a referenced file: F175569: Screen Shot 2022-09-20 at 10.24.02 PM.png. (Show Details) Comment Actions removing @abosh to unblock since A) he's out this week B) his feedback was addressed or is no longer relevant given the changes Harbormaster completed remote builds in B12316: Diff 16907.Sep 20 2022, 6:34 AM2022-09-20 06:34:36 (UTC-7) This revision is now accepted and ready to land.Sep 21 2022, 10:18 AM2022-09-21 10:18:34 (UTC-7) This revision was landed with ongoing or failed builds.Sep 26 2022, 10:06 AM2022-09-26 10:06:34 (UTC-7) Closed by commit rCOMM5448df76c019: [web] Implement darker thread color tint to blockquote container (authored by ginsu). · Explain Why This revision was automatically updated to reflect the committed changes. Harbormaster completed remote builds in B12440: Diff 17085.Sep 26 2022, 10:13 AM2022-09-26 10:13:07 (UTC-7) Harbormaster completed remote builds in B12441: Diff 17086.Sep 26 2022, 10:16 AM2022-09-26 10:16:32 (UTC-7)
Revision Contents
Diff 16392 web/chat/text-message.react.js
web/markdown/markdown.css
web/markdown/markdown.react.js
web/markdown/rules.react.js
|
This intermediate function is removed in the next diff