This diff introduces the CompetitorFeatureCard that will be used in the competitor comparison section of the landing page.
Here are what the cards look like in the Figma:
Depends on D8016
Details
Details
Please see the following screenshots/demos below:
Please not the focus on this diff is just the cards itself, the container for the cards will be cleaned up in a subsequent diff
Desktop/Bigger device view:
Hover effect:
Mobile view:
Diff Detail
Diff Detail
- Repository
- rCOMM Comm
- Lint
Lint Not Applicable - Unit
Tests Not Applicable
Event Timeline
Comment Actions
Let's definitely fix the typos and try to color icon via CSS.
| landing/competitor-feature-card.css | ||
|---|---|---|
| 35 ↗ | (On Diff #26772) | typo here |
| landing/competitor-feature-card.react.js | ||
| 14 ↗ | (On Diff #26772) | Would it make sense to include vectors of competitor logos in repo similar to background-illustration.react.js so they're included in bundle instead of having to fetch asset from network? Based on super quick google search SVGs of logos are pretty accessible:   etc |
| 33 ↗ | (On Diff #26772) | typo here |
| 51 ↗ | (On Diff #26772) | Can we color via CSS instead so we can use color names from design system instead of hardcoding color prop? You can look at expand-buttons.react.js as an example. |
| 73 ↗ | (On Diff #26772) | Should we have a separate name here since this isn't a "competitor logo"? Alternatively, we could rename from competitor logo, to service logo or something along those lines? |
Comment Actions
address comments
| landing/global.css | ||
|---|---|---|
| 43–44 ↗ | (On Diff #26981) | This was a color used in the Figma but was missing in the design system. I did update the design system in the Figma so everything is still in sync |
| landing/competitor-feature-card.css | ||
|---|---|---|
| 2 ↗ | (On Diff #26981) | Personal preference would be if outermost container defined the max-width for each breakpoint and everything within was laid out w/ flexbox to fill the space as intended. |
| 25 ↗ | (On Diff #26981) | Should this be defined in "the design system"? |
| landing/competitor-feature-card.react.js | ||
| 65–78 ↗ | (On Diff #26981) | Maybe not necessary if we're only using these here. But what would you think about a lightweight <CompetititorLogo name="telegram" size={30} /> sort of wrapper component to handle this branching? |
| 83 ↗ | (On Diff #26981) | So this is an h1 with typography.heading3 and css.headingText... |
| landing/competitor-feature-card.css | ||
|---|---|---|
| 2 ↗ | (On Diff #26981) | A subsequent diff will improve on this |
| 25 ↗ | (On Diff #26981) | Saw you do this in D7764 with the hr border-top style, so I thought having it this way fine, it's also a color hex with an opacity attached with it; however, I guess it wouldn't hurt so I will update the diff accordingly |
Comment Actions
address comments
| landing/global.css | ||
|---|---|---|
| 43–45 ↗ | (On Diff #27232) | These were colors used in the Figma but was missing in the design system. I did update the design system in the Figma so everything is still in sync |