How It Works Page - Mntor 2317 #4632
Conversation
| <li className={styles.step}> | ||
| <div className={styles.stepTextContainer}> | ||
| <h3 className={`${styles.brokersEmphasis} ${styles.stepTitle}`}> | ||
| {l10n.getString("section-1-step-3-title")} | ||
| </h3> | ||
| <h3 className={styles.stepSubtitle}> | ||
| {l10n.getString("section-1-step-3-subtitle")} | ||
| </h3> | ||
| <p className={styles.stepBody}> | ||
| {l10n.getString("section-1-step-3-text-1")} | ||
| </p> | ||
| <p className={styles.stepBody}> | ||
| {l10n.getString("section-1-step-3-text-2")} | ||
| </p> | ||
| </div> | ||
| <Image src={RemoveStep3} alt="" /> | ||
| </li> |
There was a problem hiding this comment.
suggestion: This may be a good example of how you can build a reusable component with props, promoting code modularity and avoiding repetition of the same li pattern. E.g. ResolutionContent.tsx.
There was a problem hiding this comment.
I like this suggestion, but the DataBreaches and DataBrokers have different styles in terms of background color and latter has an image for each step while the former has one image for three steps. I think it is doable, but am concerned that the time spent on this could delay launch. Would this be better as a tech debt item?
|
|
||
| export const Footer = ({ l10n }: { l10n: ExtendedReactLocalization }) => { | ||
| export const Footer = ({ |
There was a problem hiding this comment.
Landing Page:
How it works page (deploy preview):
Is there a reason we didn't just reuse this section from the landing page and why it looks a bit different on the HIW page? The former I feel is closer to the design spec.
There was a problem hiding this comment.
The Figma for this page has some differences from the landing page:
There was a problem hiding this comment.
Screenshot is from the Figma page
There was a problem hiding this comment.
The only difference I'm seeing is the HIBP attribution, which yes should be present for both pages.
There was a problem hiding this comment.
Really nice work! This was a significant first ticket to tackle, and you handled it very well with minimal friction. I hope the process was smooth for you, considering our coding patterns and standards. There is definitely a learning curve with factors like localization, showing/hiding elements based on geolocation, and styling libraries.
I left a few comments, but my biggest suggestion is to make the page look as close as possible to the design spec. Specifically, the first section could be improved by using the correct typefaces and sizes. Also, if you haven't already, I recommend doing a desk check with Tony and Jess using the deploy preview.
|
For the header typefaces, could you use the tokens that use |
|
Also, on mobile there seems to be a lot of extra padding around this asset: |
| .boldedText { | ||
| font-weight: 700; | ||
| } |
| placeholder={ | ||
| props.placeholder | ||
| ? props.placeholder | ||
| : l10n.getString("landing-all-hero-emailform-input-placeholder") | ||
| } |
There was a problem hiding this comment.
This could be just:
| placeholder={ | |
| props.placeholder | |
| ? props.placeholder | |
| : l10n.getString("landing-all-hero-emailform-input-placeholder") | |
| } | |
| placeholder={ | |
| props.placeholder ?? l10n.getString("landing-all-hero-emailform-input-placeholder") | |
| } |
There was a problem hiding this comment.
Nice suggestion! Updated here:
ad609a1
|
Cleanup completed - database 'blurts-server-pr-4632' destroyed, cloud run service 'blurts-server-pr-4632' destroyed |
References:
Jira: MNTOR-2317
Figma: Multiple, see below
Description
As a potential firefox monitor user i would like to learn how the service works so I can decide if i would like to use it.
Designs: (use long edit) https://www.figma.com/file/YqpVpUbSTzZMj9Jbp2po8Q/Mozilla-Monitor-Premium-LP?type=design&node-id=1173-23054&mode=design&t=uIz7n6wwuYHNOgwZ-4
Screenshot (if applicable)
How to test
Once dev server is running, navigate to How It Works in your browser to see the page. Links to the page are described in the Jira ticket, which also need to be manually reviewed.
The new page and updated links have 100% test coverage, so run tests locally. Note: A test for WelcomeToPlus.test.tsx
(checks the How-It-Works page link) is failing. The test and the code being tested are almost identical to tests in LandingView.test.tsx, so the testing failing to find the element (a link) has been unresolved. I have been advised to go ahead and do this PR in case someone else on the team is able to find a solution.
Checklist (Definition of Done)