Because:
* We are making a few UX changes to the beginning of the desktop pairing flow
This commit:
* Adjusts the "pair" page when coming from CAD to display a new "Sync your Firefox experience" radio button question
* On selection and submission of this form, conditionally opens FF pair if they already have a mobile device, or displays the mobile QR code if they need to download and then on "continue" opens FF pair
* Adds a back button
* Adds new SVGs, ran through SVGO
* Adds 5x new front-end Glean metrics events
closes FXA-9609
closes FXA-9590
closes FXA-9591
Because:
* aria-disabled=true doesn't disable the button, allowing the submit
button to be pressed multiple times. Under the following scenario
this would result in a duplicate subscription
* Existing customer with existing PayPal payment method
* Customer subscribes to a new product
* Customer clicks the subscribe button multiple times
This commit:
* When aria-disabled=true, show the submit button that appears disabled
* Exit early when submit button is pressed when using PayPal as the
payment method
* Do not flash enabled button before navigating to success screen
Closes #FXA-8590
Because:
* There were some minor UI inconsistencies between the two versions
This commit:
* Fixes that in React, the banner link was expanding the full width
* Addresses in Backbone, extra horizontal space when tabbing, using px values instead of rem, and a reused style was referenced by ID instead of class
* There was some inconsistent margin/padding across breakpoints when comparing the two versions which this fixes, and adds a small margin-bottom on the card so the box shadow no longer cuts off
* Adds minor a11y improvements
Because:
- We want to add a bit more spacing to make things look more balanced.
This Commit:
- Sets bottom padding to p-12, 3 rem
- Sets top padding to p-9, 2.25 rem
Because:
- We want to Mozilla branding in content server
This Commit:
- Activates the l10n strings fro Mozilla branding
- Updates css to be inline with branding
- Creates 'Old L10N' strings that will be removed. These are placeholders just in case we need to roll something back.
- Moves the mozilla logo out of the footer and to the top left
Because:
* Usability of fxa-settings components can be improved in HCM mode
This commit:
* Use currentColor fill and/or stroke for icons in AlertBar, Banner, BentoMenu, BrandMessaging, HeaderLockup to ensure they are visible in Windows HCM
* Add transparent borders to AlertBar, Banner, DataBlock, FlowContainer, Modal, Tooltip component to improve usability in HCM mode
* Wrap tab fence around inner components of AlertBar and Modal to ensure focus outline in HCM is wrapped around component vs small rectangle before inner component
Closes #FXA-7552
Because:
* We want to make sure that the displayed key and downloaded key match. Also adding in a few styling tweaks to account recovery key.
This commit:
* Add a few missing unit tests for copy button and back button.
* Update Playwright test to check content of downloaded file and validate that the expected key is included
* Fix margin around copy button in DataBlock
* Fix CTA button sizing where long text overflowed
Closes #FXA-7532
Because:
* We are updating the styling of the DataBlock component as part of the redesign of the Recovery Key updates
This commit:
* Change the styling of the data block to use a gradient background
* Add an inline copy button option to the DataBlock
* Update stories for RecoveryKeyAdd and TwoStepAuthenticationReplaceCodes to display generated codes
* Update tests
* Correct l10n id mismatch
Closes #FXA-7222
Because:
* We're converting our views from Backbone to React
This commit:
* Serves the 'account_recovery_confirm_key' page to the React side if the feature flag is on
* Modifies fxa-auth-client recoveryKey.ts so we can get the recovery key ID by itself
* Adds all page functionality to AccountRecoveryConfirmKey, including adding needed methods to the account model, making the calls, and handling errors
* Refactors CompleteResetPassword and redirects if the account has a recovery key, but does not redirect if a user has clicked that they've lost their key on AccountRecoveryConfirmKey
* Creates useLinkStatus hooks to give back parameters and validates link status
* Adds AppLayout around LinkExpired, LinkDamaged, and LinkUsed to simplify return/rendering
Closes FXA-6126
Because:
* We're refactoring our legacy tech stack to our preferred stack by extending settings
This commit:
* Adds a clone-legal-docs script so we always fetch latest rather than pin to commit
* Reworks the 'react groups' into separate server and router files; router.js needs access, but cannot have any reference to route definitions since they now contain server-side logic and imports
* Moves available content-server routes into a separate file that does not import route definitions
* Uses and accounts for the existing regex for legal, legal/terms, and legal/privacy
* Adds two helper packages to render the MDs once fetched
Closes FXA-6131
Because:
* We want to include the PasswordStrengthBalloon component in CompleteResetPassword and AccountRecoveryResetPassword pages to match parity with the content-server views.
This commit:
* Add input-balloon styles for tooltips to fxa-react
* Replace FormPassword with FormResetPasswordWithBalloon in CompleteResetPassword
* Replace custom password form in AccountRecoveryResetPassword with FormResetPasswordWithBalloon
* Update l10n, tests for CompleteResetPassword, AccountRecoveryResetPassword
* Review and standardize both pages
Closes #FXA-6591
Because:
- We want to convert content-server views to React and are starting by building out the front-end in Storybook. This PR converts the reset_password view. Additional complexity will be added in (a) later ticket(s).
This commit:
- Create ResetPassword UI in React, including l10n, storybook, initial metrics, initial tests.
- Does not include units tests for success/failure methods, error handling.
- Create additional reusable components (including l10n, storybook, initial tests): CardHeader, LinkRememberPassword, WarningMessage
- Add placeholder for ResetPassword function in models/Accounts
- Update InputText and Tooltip with new properties and updated styling for reuse in ResetPassword
- Move 'cta-xl' TW class from content-server to fxa-react
- Fix spelling of "focussed" to "focused" in InputText and Checkbox
Closes #FXA-6338, FXA-6447
This commit:
* Adds AppLayout with Tailwind styles and moves Moz logo from fxa-settings into fxa-react for use in Reactified content-server routes
* Adds postcss-assets to settings for future background-images
* Moves .card styles into fxa-react
* README update on inlining SVGs vs src
Closes FXA-6275
Because:
- The focus style applied to caution CTA and GetDataTrio buttons (black dotted outline) did not match the style used for other buttons (solid blue). The discrepency may have become more obvious with the upgrade to Tailwind v3. We would like all button focus styles to be consistent.
This commit:
- Replace the focus and active styles used for fxa-settings' caution cta and GetDataTrio buttons.
Closes #FXA-5507
Because:
- We want to convert the PaymentForm to using Tailwind classes
This commit:
- Replaces all existing classes with Tailwind classes
- Updates fxa-react LoadingSpinner component to support multiple images
Closes #fxa-5633
Because:
- We want to bring button border radius inline with figma
- We want to bring card drop shadows in line with figma
- We want to bring focus states on buttons inline with figma
This Commit:
- Adds a new boxShadow extension 'card-grey-drop' to tailwind config and applies it to .cards
- Updates border radius on .cta-xl to be rounded-md. Previously this was defaulting to rounded.
- Updates :focus and :focus-visible outlines on .cta-primary and .cta-neutral and .cta-caution
Because:
- We want to improve the the behavior on links when they are hovered over and focused on.
This Commit:
Moves colors-grey:600 to colors-grey:900
Introduces new grey:600 that is in line with figma
Introduces new gray:700 that is in line with figma
Updates all occurrences of text-grey-600 to text-grey-900 so existing styling doesn't change
Applies focus and focus-visible states to link-grey and link-blue as per figma
Updates link-grey:hover state to be inline with figma
Updates link-grey:active and link-blue:active to be inline with figma
Because:
* We want users to have a more consistent design/UX with other FxA front-ends
This commit:
* Introduces an overhaul of content-server CSS including a "reskin" of the sign-in/sign-up pages and Sync flow with Tailwind
* Moves some styles from settings to fxa-react to share with content-server
* Adds postcss-nested for selector nesting and postcss-assets for inlining BG images
* Replaces some classes with IDs for JS use and tests
* Tweaks other pages for consistency where needed due to old style removal
* Adds some temp 'hacks' (called out) until we are using React, and other 'hacks' until content-server is exclusively using TW
* Creates content-server TW README + tweaks main readme
Because:
* On the subscription management page the banner is currently shown at
the bottom of the page, where it should actually be shown at the top,
which hides it from the user.
This commit:
* Reorganize css files in fxa-react.
* fxa-payments imports the missing css from fxa-react.
* Add the --postcss parameter to the fxa-payments build-css script
* The banner is now shown at the top of the page.
Closes#13567
Because:
*We want to upgrade to Tailwind v3 and update other related outdated dependencies
This commit:
*Upgrades storybook packages across the board, upgrades autoprefixer, removes postcss-7 compatibility package and postcss-cli, installs postcss per Tailwind requirement
*Upgrades fxa-admin-panel to Tailwind v3
*Upgrades fxa-react to Tailwind v3, changing Portal from SCSS to CSS to remove a build step
*Upgrades fxa-settings to Tailwind v3, first transforming our SCSS to CSS before it’s sent to PostCSS. There will be a follow up to change our SCSS files to CSS and use PostCSS plugins instead
*Upgrades fxa-payments-server to Tailwind v3, decoupling SCSS from the Tailwind out file since payments will be using Tailwind exclusively in the next few months. Makes Storybook more consistent with other packages
compile tailwind for use in fxa-react, fxa-settings, and fxa-admin-panel
add script to tailwind configs to only apply postcss output to fxa-react components being used in a given project
Lauren Zugai
Reino Muhl
dschom
Valerie Pomerleau
Valerie Pomerleau
Barry Chen
Lisa Chan
Dan Schomburg
Jody Heavener