Commit 41613af3 authored by negin's avatar negin
Browse files

Bug 1829039 - Updates embedded migration wizard styles to match figma r=aminomancer,mconley 

This patch fixes the font size inconsistencies, extra whitespace above title, and introduces simplified animations for [Embedded Migration Wizard](https://www.figma.com/file/c83OEio9DhCQKuabx2tIEl/NUO-Experiments-2023?node-id=976-31535) screen. Other feedback from the initial bug has been broken down into other bugs:

* [Position relative feedback bug](https://bugzilla.mozilla.org/show_bug.cgi?id=1829272)
* [Checkbox spacing](https://bugzilla.mozilla.org/show_bug.cgi?id=1829733)
* Logo feedback - syncing up with Gabrielle and will file a follow-up bug depending on what we want to do (figma does not include the logo)

Differential Revision: https://phabricator.services.mozilla.com/D176352
parent e3eaa9a1

browser/components/migration/content/migration-wizard.mjs

+1 −1
Original line number Diff line number Diff line
@@ -148,7 +148,7 @@ export class MigrationWizard extends HTMLElement { 
                <span class="success-text deemphasized-text">&nbsp;</span>

              </div>

            </div>

            <moz-button-group class="buttons">

            <moz-button-group class="buttons" part="buttons">

              <button class="cancel-close" data-l10n-id="migration-cancel-button-label" disabled></button>

              <button class="primary finish-button done-button" data-l10n-id="migration-done-button-label"></button>

              <button class="primary finish-button continue-button" data-l10n-id="migration-continue-button-label"></button>

browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js

+3 −3
Original line number Diff line number Diff line
@@ -1060,11 +1060,11 @@ class ProtonScreen extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCom 
      className: "main-content-inner"

    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {

      className: `welcome-text ${content.title_style || ""}`

    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {

    }, content.title ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {

      text: content.title

    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h1", {

      id: "mainContentHeader"

    })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {

    })) : null, content.subtitle ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {

      text: content.subtitle

    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h2", {

      "data-l10n-args": JSON.stringify({
@@ -1072,7 +1072,7 @@ class ProtonScreen extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCom 
        ...((_this$props$appAndSys = this.props.appAndSystemLocaleInfo) === null || _this$props$appAndSys === void 0 ? void 0 : _this$props$appAndSys.displayNames)

      }),

      "aria-flowto": (_this$props$messageId = this.props.messageId) !== null && _this$props$messageId !== void 0 && _this$props$messageId.includes("FEATURE_TOUR") ? "steps" : ""

    })), content.cta_paragraph ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_CTAParagraph__WEBPACK_IMPORTED_MODULE_8__.CTAParagraph, {

    })) : null, content.cta_paragraph ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_CTAParagraph__WEBPACK_IMPORTED_MODULE_8__.CTAParagraph, {

      content: content.cta_paragraph,

      handleAction: this.props.handleAction

    }) : null), content.video_container ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_OnboardingVideo__WEBPACK_IMPORTED_MODULE_10__.OnboardingVideo, {

browser/components/newtab/aboutwelcome/content/aboutwelcome.css

+14 −7
Original line number Diff line number Diff line
@@ -684,6 +684,9 @@ html { 
  text-align: initial;

  align-items: initial;

}

.onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text:empty {

  display: none;

}

.onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text h1 {

  font-size: 24px;

  line-height: 1.2;
@@ -1473,7 +1476,8 @@ html { 
.onboardingContainer .dialog-initial .multi-select-container {

  transition-delay: 0.8s;

}

.onboardingContainer .dialog-initial .tiles-theme-section {

.onboardingContainer .dialog-initial .tiles-theme-section,

.onboardingContainer .dialog-initial migration-wizard {

  transition-delay: 0.9s;

}

.onboardingContainer .dialog-initial .primary,
@@ -1545,7 +1549,8 @@ html { 
.onboardingContainer.transition-in .screen .checkbox-container,

.onboardingContainer.transition-in .screen .secondary,

.onboardingContainer.transition-in .screen .secondary-cta:not(.top),

.onboardingContainer.transition-in .screen .cta-link {

.onboardingContainer.transition-in .screen .cta-link,

.onboardingContainer.transition-in .screen migration-wizard {

  opacity: 0;

  translate: 0 calc(-1 * var(--translate));

}
@@ -1568,7 +1573,8 @@ html { 
  transition-delay: 0.1s;

}

.onboardingContainer.transition-out .screen:not(.dialog-last) .tiles-theme-section,

.onboardingContainer.transition-out .screen:not(.dialog-last) .colorway-text {

.onboardingContainer.transition-out .screen:not(.dialog-last) .colorway-text,

.onboardingContainer.transition-out .screen:not(.dialog-last) migration-wizard {

  opacity: 0;

  translate: 0 var(--translate);

  transition-delay: 0.2s;
@@ -1595,11 +1601,12 @@ html { 
  translate: 0 calc(2 * var(--translate));

  transition-delay: 0.4s;

}



migration-wizard {

.onboardingContainer migration-wizard {

  width: unset;

  font-size: 0.83em;

  transition: var(--transition);

}



migration-wizard::part(buttons) {

.onboardingContainer migration-wizard::part(buttons) {

  margin-top: 32px;

  justify-content: flex-start;

}

browser/components/newtab/content-src/aboutwelcome/aboutwelcome.scss

+21 −10
Original line number Diff line number Diff line
@@ -485,6 +485,10 @@ html { 
            text-align: initial;

            align-items: initial;



            &:empty {

              display: none;

            }



            h1 {

              font-size: 24px;

              line-height: 1.2;
@@ -1465,7 +1469,8 @@ html { 
      transition-delay: 0.8s;

    }



    .tiles-theme-section {

    .tiles-theme-section,

    migration-wizard {

      transition-delay: 0.9s;

    }
@@ -1561,7 +1566,8 @@ html { 
      .checkbox-container,

      .secondary,

      .secondary-cta:not(.top),

      .cta-link {

      .cta-link,

      migration-wizard {

        opacity: 0;

        translate: 0 calc(-1 * var(--translate));

      }
@@ -1594,12 +1600,14 @@ html { 
        transition-delay: 0.1s;

      }



      //content that is nested between inner main content and navigation CTAs

      //requires an additional 0.1s transition to avoid overlap

      .tiles-theme-section,

      .colorway-text {

      .colorway-text,

      migration-wizard {

        opacity: 0;

        translate: 0 var(--translate);

        transition-delay: 0.2s;



      }



      .primary,
@@ -1631,12 +1639,15 @@ html { 
      }

    }

  }

}



  migration-wizard {

    width: unset;

}

    font-size: 0.83em;

    transition: var(--transition);



migration-wizard::part(buttons) {

    &::part(buttons) {

      margin-top: 32px;

      justify-content: flex-start;

    }

  }

}

browser/components/newtab/content-src/aboutwelcome/components/MultiStageProtonScreen.jsx

+20 −16
Original line number Diff line number Diff line
@@ -422,9 +422,12 @@ export class ProtonScreen extends React.PureComponent { 


            <div className="main-content-inner">

              <div className={`welcome-text ${content.title_style || ""}`}>

                {content.title ? (

                  <Localized text={content.title}>

                    <h1 id="mainContentHeader" />

                  </Localized>

                ) : null}

                {content.subtitle ? (

                  <Localized text={content.subtitle}>

                    <h2

                      data-l10n-args={JSON.stringify({
@@ -438,6 +441,7 @@ export class ProtonScreen extends React.PureComponent { 
                      }

                    />

                  </Localized>

                ) : null}

                {content.cta_paragraph ? (

                  <CTAParagraph

                    content={content.cta_paragraph}