Details

Reviewers

atul
kamil

Commits

rCOMMe5d01e4ec0f9: [landing] change text content on HeroContent component

Summary

As part of the landing redesign we are completely redesigning our Hero section. This diff updates the header and subheader of the hero section. Subsequent diffs will handle the Hero image, the email form, and the layout of the hero

Here is the Figma design for reference:

Screenshot 2023-05-22 at 4.45.54 PM.png (2×3 px, 2 MB)

Depends on D7898

Test Plan

Please see the screenshots below:

Desktop:

Screenshot 2023-05-22 at 4.31.35 PM.png (2×3 px, 1 MB)

Tablet:

Screenshot 2023-05-22 at 4.32.05 PM.png (2×3 px, 923 KB)

Phone:

Screenshot 2023-05-22 at 4.31.58 PM.png (2×3 px, 907 KB)

Diff Detail

Repository

rCOMM Comm

Lint

No Lint Coverage

Unit

No Test Coverage

Event Timeline

ginsu created this revision.May 22 2023, 6:39 AM

Herald added subscribers: atul, tomek, ashoat. · View Herald TranscriptMay 22 2023, 6:40 AM

ginsu edited the summary of this revision. (Show Details)May 22 2023, 6:47 AM

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

ginsu added reviewers: atul, kamil.

ginsu attached a referenced file: F551208: Screenshot 2023-05-22 at 4.31.58 PM.png. (Show Details)

ginsu attached a referenced file: F551207: Screenshot 2023-05-22 at 4.32.05 PM.png. (Show Details)

ginsu attached a referenced file: F551206: Screenshot 2023-05-22 at 4.31.35 PM.png. (Show Details)

ginsu attached a referenced file: F551181: Screenshot 2023-05-22 at 4.45.54 PM.png. (Show Details)

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

ginsu added inline comments.

landing/hero-content.css
8–9	This style is supported by all modern browsers (browsers from the last 10 years) https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
10	This style is supported by all browsers https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-fill-color
landing/hero-content.react.js
4	The next diff will remove this dependency from our package.json

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

ginsu added a parent revision: D7898: [landing] minor improvements to mobile nav ui.

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

ginsu mentioned this in D7914: [landing] remove react-text-loop dependency.May 22 2023, 6:52 AM

ginsu added a child revision: D7914: [landing] remove react-text-loop dependency.May 22 2023, 6:55 AM

Harbormaster completed remote builds in B19593: Diff 26778.May 22 2023, 6:57 AM

ginsu requested review of this revision.May 22 2023, 6:57 AM

atul accepted this revision.May 22 2023, 9:10 AM

atul added inline comments.

landing/hero-content.css
9	Annoying that so many browsers still have this "Implemented with the vendor prefix: -webkit-" so we can't just go w/ `background-clip` Oh well
landing/hero-content.react.js
16–17	We aren't "separating" `subheading2` into `subHeading2` w/ camelCase, should we just do `css.subheader` for consistency

This revision is now accepted and ready to land.May 22 2023, 9:10 AM

tomek added inline comments.May 23 2023, 1:39 AM

landing/hero-content.css
9	We should probably try to avoid having explicit vendor prefixes. Is there a tool in our environment that can do it for us? Maybe something around our css-loader? Or we can introduce something from e.g. postcss. Still, probably not worth exploring at this point.

ginsu added inline comments.May 23 2023, 2:26 AM

landing/hero-content.css
9	I agree having explicit vendor prefixes is not the most ideal; however, since every modern browser (from the last 10 years) supports these styles I think there is no risk to include this right now. If I have time at the end I will do some digging into an implementation w/o these vendor prefixes.