Details

Reviewers

atul
kamil

Commits

rCOMM1effee55d1dd: [landing] introduce competitor comparison

Summary

This diff introduces the Competitor comparison component. This is the first part of introducing the complete competitor comparison. This diff introduces the component and renders the header as well as the competitorSelector. The next diff will introduce the competitor cards to this component.

Designs:

Screenshot 2023-05-31 at 11.47.29 AM.png (1×3 px, 1 MB)

Depends on D8033

Test Plan

Please see the screenshots/demo videos below to see how everything looks/behaves:

Desktop/Responsive/Behavior

Tablet:

Screenshot 2023-05-31 at 11.36.47 AM.png (2×3 px, 935 KB)

Mobile:

Screenshot 2023-05-31 at 11.36.41 AM.png (2×3 px, 885 KB)

Diff Detail

Repository

rCOMM Comm

Lint

No Lint Coverage

Unit

No Test Coverage

Event Timeline

ginsu created this revision.May 30 2023, 11:41 AM

Herald added subscribers: atul, tomek, ashoat. · View Herald TranscriptMay 30 2023, 11:41 AM

Harbormaster completed remote builds in B19915: Diff 27277.May 30 2023, 11:59 AM

ginsu requested review of this revision.May 30 2023, 11:59 AM

Need to make one small adjustment to alignment of cards

broke this diff up into two diff so that this diff is not as large. This part introduces the competitor comparison section and the header for it. The next one will introduce the cards

ginsu edited the summary of this revision. (Show Details)May 31 2023, 8:49 AM

ginsu edited the test plan for this revision. (Show Details)

ginsu added reviewers: atul, kamil.

ginsu added a parent revision: D8033: [landing] introduce telegram competitor data.

ginsu attached a referenced file: F566178: Screenshot 2023-05-31 at 11.36.41 AM.png. (Show Details)

ginsu attached a referenced file: F566176: Screenshot 2023-05-31 at 11.36.47 AM.png. (Show Details)

ginsu attached a referenced file: F566170: Screen Recording 2023-05-31 at 11.35.49 AM.mov. (Show Details)

ginsu attached a referenced file: F566169: Screenshot 2023-05-31 at 11.47.29 AM.png. (Show Details)

ginsu added inline comments.

landing/competitor-comparison.css
48 ↗	(On Diff #27300)	In the designs the width of the full size of the logos are 50px and the width of the full size bump is 40px. 4/5 = 0.8
landing/competitor-comparison.react.js
11–16 ↗	(On Diff #27300)	This is the order shown in the designs:

ginsu attached a referenced file: F566166: Screenshot 2023-05-30 at 2.42.07 PM.png. (Show Details)May 31 2023, 8:50 AM

ginsu added a child revision: D8038: [landing] add feature cards to competitor comparison.May 31 2023, 8:59 AM

Harbormaster completed remote builds in B19925: Diff 27300.May 31 2023, 9:00 AM

EDIT: see below, "elected" should be "selected"

landing/competitor-comparison.react.js
11–16 ↗	(On Diff #27300)	This is subjective, but I think the logos that aren't elected are a little too dim? cc @ted, @ashoat for thoughts

ashoat added inline comments.May 31 2023, 1:29 PM

landing/competitor-comparison.react.js
11–16 ↗	(On Diff #27300)	Hmm... I don't disagree... Curious for @ted's take when he's back

atul accepted this revision.Jun 1 2023, 11:06 AM

This revision is now accepted and ready to land.Jun 1 2023, 11:06 AM

ginsu added inline comments.Jun 5 2023, 1:18 PM

landing/competitor-comparison.react.js
11–16 ↗	(On Diff #27300)	cc @ted

• ted added inline comments.Jun 5 2023, 2:12 PM

landing/competitor-comparison.react.js
11–16 ↗	(On Diff #27300)	I can take a look with @ginsu tomorrow in the office with his build and the designs. Not married to the brightness and it can be brightened up!