HomePhabricator
Diffusion Comm ed5ec298ee30

[native] Implement darker color tint to block quote container

Description

[native] Implement darker color tint to block quote container

Summary:
Linear issue: ENG-1712.

The block quote containers now match the shape and color shown in the Figma document

Unfortunately, by developing the darker tint with the opacity layer, the shadow effect we have on the web won't be possible due to some limitations with how React Native handles shadows. React Native does not have a box-shadow style property, and the React Native shadow properties requires a colored background of some sort.

For reference, this is what the blockquote looks like with the shadow effect with the opacity layer:

Screen Shot 2022-09-27 at 3.22.42 PM.png (1×1 px, 793 KB)

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.

Screen Shot 2022-09-03 at 3.22.23 PM.png (1×1 px, 92 KB)

Before:

Screen Shot 2022-09-03 at 3.23.04 PM.png (1×760 px, 565 KB)

After:

Screen Shot 2022-09-27 at 1.24.38 PM.png (1×1 px, 680 KB)

Screen Shot 2022-09-27 at 4.04.54 PM.png (1×1 px, 600 KB)

Reviewers: atul, ashoat, kamil, rohan

Reviewed By: atul, ashoat

Subscribers: kamil, ashoat, tomek, atul, abosh

Differential Revision: https://phab.comm.dev/D5048

Details

Provenance
ginsuAuthored on Sep 2 2022, 11:16 PM
Reviewer
atul
Differential Revision
D5048: [native] Implement darker color tint to block quote container
Parents
rCOMM5d16c4de4482: Revert "[native] "Flip the switch" to enable video messages"
Branches
Unknown
Tags
Unknown