Details

Reviewers

atul
• abosh
rohan
ashoat

Commits

rCOMM72421b12d303: [landing] implemented investor profile card component boilerplate

Summary

Will not land until all diffs in the stack are accepted

Implemented boilerplate for investor profile card component. All investor profile cards will have a maximum of 2 lines for the description. If a card has more than two lines, then ellipses will be used.

Currently, the investor profile cards are not mobile-friendly, but will make separate diffs to address this.

Next diffs:

Make investor profile cards mobile friendly
Create Modal component for investor profile cards
Populate investor cards with data

Linear Task: ENG-1953
Figma: Investor Page

Depends on D5302

Test Plan

Please see attached screenshots to view how investor cards look visually:

Laptop View:

Screen Shot 2022-10-07 at 10.35.36 PM.png (1×3 px, 2 MB)

iPad View:

Screen Shot 2022-10-10 at 9.39.58 AM.png (1×3 px, 1 MB)

Screenshot to show that the ellipses are being generated whenever the description is too long (CoinFund Investor card component):

Screen Shot 2022-10-07 at 10.38.16 PM.png (2×3 px, 1 MB)

Diff Detail

Repository

rCOMM Comm

Lint

Lint Not Applicable

Unit

Tests Not Applicable

Event Timeline

ginsu created this revision.Oct 10 2022, 7:09 AM

Herald added subscribers: • abosh, atul, tomek, ashoat. · View Herald TranscriptOct 10 2022, 7:09 AM

Harbormaster completed remote builds in B12696: Diff 17448.Oct 10 2022, 7:19 AM

ginsu requested review of this revision.Oct 10 2022, 7:19 AM

ginsu retitled this revision from [landing] implemented investor profile card component to [landing] implemented investor profile card component boilerplate.Oct 10 2022, 7:22 AM

ginsu edited the summary of this revision. (Show Details)

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

ginsu attached a referenced file: F194811: Screen Shot 2022-10-07 at 10.38.16 PM.png. (Show Details)

ginsu attached a referenced file: F194810: Screen Shot 2022-10-10 at 9.39.58 AM.png. (Show Details)

ginsu attached a referenced file: F194809: Screen Shot 2022-10-07 at 10.35.36 PM.png. (Show Details)

changed color from rgba to hex

ginsu added reviewers: atul, • abosh, rohan, ashoat.Oct 10 2022, 7:29 AM

Harbormaster completed remote builds in B12700: Diff 17452.Oct 10 2022, 7:36 AM

ginsu edited the summary of this revision. (Show Details)Oct 10 2022, 8:08 AM

ginsu added a parent revision: D5302: [landing] implemented investor page boilerplate.

ginsu added a child revision: D5333: [landing] made investor profile cards mobile friendly.Oct 10 2022, 8:13 AM

Generally looks good to me!! Defer to @atul for the final accept

Visually looks great! However, can we see if we can avoid using webkit-specific CSS properties?

Let's also make sure that things look consistent across Chrome/Firefox/Safari

landing/investor-profile.css
34–36 ↗	(On Diff #17452)	Can you explain why we need these webkit-specific properties? Have you tested this in Chrome/Firefox as well to make sure that things look consistent across the board? I have a hunch we can achieve the same design without webkit-specific CSS properties, would appreciate some additional context on possible challenges
landing/investor-profile.react.js
19 ↗	(On Diff #17452)	Good call including this alt text

This revision now requires changes to proceed.Oct 10 2022, 10:57 AM

ginsu added a child revision: D5334: [landing] introduced modal boilerplate.Oct 10 2022, 11:34 AM

Spoke to @atul irl about this, but -webkit-line-clamp is fully supported by all browsers and is now considered the "standardized" method to truncate multiple-line text. Additionally, the normal line-clamp property is deprecated now and has been replaced by webkit. I will list some sources I found that support this.