data-sync-user
commented
3 years ago ➤ Lauren Zugai commented:
Just a quick fly-by comment here in case this is helpful: we already have this footer built out in fxa-react as well as a header in fxa-react, and a Bento menu etc. in fxa-settings.
The fxa-payments-server doesn't use Tailwind, however, which makes reusing these components slightly more complicated. I feel like there's 3 options then; there's a chance setting it up ( https://github.com/mozilla/fxa/issues/5933 ) could be worth it at this point since we have it set up in fxa-settings, fxa-react, and fxa-admin-panel so hopefully just adding it wouldn't be too complex? Though I know payments also has other SCSS styles too to account for.
Another option for sharing if possible is (after scooting everything needed into fxa-shared) by setting default class names to the Tailwind styles they currently are, then passing in the needed class(es) when using the components in payments. This might work better for some components than others, see the docs we have in fxa-settings: https://github.com/mozilla/fxa/tree/main/packages/fxa-settings#fxa-react
If that makes shared components too messy, it might be best to just copy and paste those components as new ones into fxa-payments and change the Tailwind styles to styles set in those SCSS files. If you do that, it does leave some cleanup for later - the new copied components should probably be listed in #5933 as additional components that can be shared after that ticket is complete.
To drive consistency across the VPN experience and increase brand trust. Aligning the navigation and footer elements within subplat to adopt a glocal (global/local) navigation treatment that is used across other Mozilla/FX entities.
This structure in the nav adds additional elements to support the user: A link to help (support.mozilla.org), the bento menu that links to our other products, and the fxa avatar/profile link.
Note: as for the branding on the navigation for now it is Firefox to align with FxA but annicipate this could change given brand strategy going forward. (Could be mozilla or mozilla vpn) but this should not block the update of adding to component to subplat. If we need to swap logos that should be a minimal change in the future.
The footer aligns with Mozilla and pulls the privacy policy and terms out of the body of the page and anchors is in this footer.
This means the individual paypal and stripe privacy policies can be listed with out being clutter together with mozilla's in the body of the page.
https://www.figma.com/file/ejDMYaKpm5bsYL5YvhItur/Payment-Integration?node-id=683%3A4290
┆Issue is synchronized with this Jira Task ┆Attachments: 342.png ┆Issue Number: FXA-3129