Financial-Times / x-dash

:x::heavy_minus_sign::newspaper: shared front-end components for FT.com and the FT Apps
https://financial-times.github.io/x-dash
38 stars 6 forks source link

ElES-1039 changes to the share modal web #768

Closed ibrahim-mamdouh-ft closed 5 months ago

ibrahim-mamdouh-ft commented 5 months ago

Description

In this PR I have made the necessary changes to update the UI/UX for x-gift component according to the ELES-1039 ,ELES-1047 and ELES-1066

according to the Figma design

Screenshots

b2c

Free article

Screenshot 2024-03-01 at 6 45 41 PM Screenshot 2024-03-01 at 6 54 42 PM

Gift article

Screenshot 2024-03-01 at 6 41 50 PM Screenshot 2024-03-01 at 6 46 21 PM

Subscribers

Screenshot 2024-03-01 at 6 42 05 PM Screenshot 2024-03-01 at 6 42 10 PM

No credit

Screenshot 2024-03-01 at 6 45 32 PM

b2b

Normal flow

Screenshot 2024-03-01 at 7 02 53 PM Screenshot 2024-03-01 at 7 02 57 PM Screenshot 2024-03-01 at 7 02 39 PM Screenshot 2024-03-01 at 7 02 45 PM

Normal flow with save highlights message

Screenshot 2024-03-01 at 7 05 23 PM Screenshot 2024-03-01 at 7 05 17 PM

Normal flow with highlights

Screenshot 2024-03-04 at 6 36 45 AM Screenshot 2024-03-04 at 6 36 48 AM Screenshot 2024-03-04 at 6 36 33 AM Screenshot 2024-03-04 at 6 36 37 AM

No credit

Screenshot 2024-03-04 at 6 40 43 AM

Free article

Screenshot 2024-03-04 at 6 41 32 AM

b2b with advanced sharing

Normal flow

Screenshot 2024-03-04 at 6 43 30 AM Screenshot 2024-03-04 at 6 43 34 AM

Screenshot 2024-03-04 at 6 43 18 AM Screenshot 2024-03-04 at 6 43 22 AM

Screenshot 2024-03-04 at 6 43 08 AM Screenshot 2024-03-04 at 6 43 12 AM

Screenshot 2024-03-04 at 6 42 49 AM Screenshot 2024-03-04 at 6 43 02 AM

Highlight message

Screenshot 2024-03-04 at 6 46 11 AM

Corner cases

Screenshot 2024-03-04 at 6 47 34 AM Screenshot 2024-03-04 at 6 48 57 AM Screenshot 2024-03-04 at 6 48 52 AM Screenshot 2024-03-04 at 6 47 38 AM Screenshot 2024-03-04 at 6 47 25 AM Screenshot 2024-03-04 at 6 47 17 AM Screenshot 2024-03-04 at 6 47 20 AM

egargan-ft commented 5 months ago

I've spotted a few design inconsistencies...

Problem(s) Stories Affected Screenshot
Missing space before "Subscribe" link, message background should be grey Share article modal (Registered)
Missing comma before link text Share article modal (AS save highlights message + B2B save highlights message)