diff options
Diffstat (limited to 'browser/components/aboutwelcome/content-src')
5 files changed, 296 insertions, 118 deletions
diff --git a/browser/components/aboutwelcome/content-src/aboutwelcome.scss b/browser/components/aboutwelcome/content-src/aboutwelcome.scss index aa49a04799..9174fe2439 100644 --- a/browser/components/aboutwelcome/content-src/aboutwelcome.scss +++ b/browser/components/aboutwelcome/content-src/aboutwelcome.scss @@ -570,10 +570,12 @@ html { .section-main { flex-direction: row; display: block; - margin: auto auto auto 0; + margin: auto; + margin-inline-start: 0; &:dir(rtl) { - margin: auto 0 auto auto; + margin: auto; + margin-inline-start: 0; } &.embedded-migration { @@ -597,6 +599,21 @@ html { border-radius: 8px 0 0 8px; } + .legal-paragraph { + text-align: start; + font-size: 11px; + line-height: 16.5px; + color: #5B5B66; + + @media only screen and (width <= 800px) { + padding-inline: 30px; + } + + @media (prefers-color-scheme: dark) { + color: #CFCFD8; + } + } + .main-content-inner { min-height: 330px; @@ -764,7 +781,8 @@ html { &:dir(rtl) { border-radius: 0 8px 8px 0; - margin: auto auto auto 0; + margin: auto; + margin-inline-end: 0; } h1 { @@ -843,168 +861,285 @@ html { .tiles-theme-section { margin-inline-start: -10px; } - } - @media only screen and (width <= 800px) { - flex-direction: column; - min-height: $small-main-section-height + $small-secondary-section-height; + &[reverse-split] { + flex-direction: row-reverse; - &::before { - width: $split-section-width; - } + .section-main { + .main-content { + border-radius: inherit; + } - .section-secondary, - .section-main { - width: $split-section-width; - } + margin: auto; + margin-inline-end: 0; + border-radius: 8px 0 0 8px; - .section-secondary { - --mr-secondary-background-position-y: top; - --mr-secondary-position: center var(--mr-secondary-background-position-y) / 75%; + &:dir(rtl) { + border-radius: 0 8px 8px 0; + margin: auto; + margin-inline-end: 0; + } + } - border-radius: 8px 8px 0 0; - margin: auto auto 0; - height: $small-secondary-section-height; + .section-secondary { + margin: auto; + margin-inline-start: 0; + border-radius: 0 8px 8px 0; - .hero-image img { - margin: 6px 0; + &:dir(rtl) { + border-radius: 8px 0 0 8px; + margin: auto; + margin-inline-start: 0; + } } + } + } - .message-text { - margin-inline: auto; - } + // duplicate the above styles for no-rdm. unfortunately SASS won't allow + // us to combine these selectors. + &:where([no-rdm='true']) { + .tiles-theme-section { + margin-inline-start: -10px; + } - h1 { - font-size: 35px; - text-align: center; - white-space: normal; - margin-inline: auto; - margin-block: 14px 6px; - } + &[reverse-split] { + flex-direction: row-reverse; - &:dir(rtl) { - margin: auto auto 0; - border-radius: 8px 8px 0 0; - } + .section-main { + .main-content { + border-radius: inherit; + } - &.with-secondary-section-hidden { - display: none; + margin: auto; + margin-inline-end: 0; + border-radius: 8px 0 0 8px; + + &:dir(rtl) { + border-radius: 0 8px 8px 0; + margin: auto; + margin-inline-end: 0; + } } - } - migration-wizard { - &::part(deck){ - min-width: 330px; - margin-inline: 36px; + .section-secondary { + margin: auto; + margin-inline-start: 0; + border-radius: 0 8px 8px 0; + + &:dir(rtl) { + border-radius: 8px 0 0 8px; + margin: auto; + margin-inline-start: 0; + } } } + } - .section-main { - margin: 0 auto auto; - height: $small-main-section-height; + @media only screen and (width <= 800px) { + &:where(:not([no-rdm])) { + flex-direction: column; + min-height: $small-main-section-height + $small-secondary-section-height; + + &::before { + width: $split-section-width; + } - migration-wizard::part(buttons) { + &[reverse-split] { flex-direction: column; - margin-inline: 46px; + + .section-secondary { + border-radius: 8px 8px 0 0; + margin: auto; + margin-bottom: 0; + + &:dir(rtl) { + margin: auto; + margin-bottom: 0; + border-radius: 8px 8px 0 0; + } + } + + .section-main { + margin: auto; + margin-top: 0; + border-radius: 0 0 8px 8px; + + &:dir(rtl) { + margin: auto; + margin-top: 0; + border-radius: 0 0 8px 8px; + } + } + } + + .section-secondary, + .section-main { + width: $split-section-width; } - &[hide-secondary-section='responsive'] { - height: $split-screen-height; + .section-secondary { + --mr-secondary-background-position-y: top; + --mr-secondary-position: center var(--mr-secondary-background-position-y) / 75%; + + border-radius: 8px 8px 0 0; margin: auto; + margin-bottom: 0; + height: $small-secondary-section-height; - .main-content { - padding: 50px 0 0; - border-radius: 8px; + .hero-image img { + margin: 6px 0; + } + + .message-text { + margin-inline: auto; + } + + h1 { + font-size: 35px; + text-align: center; + white-space: normal; + margin-inline: auto; + margin-block: 14px 6px; + } + + &:dir(rtl) { + margin: auto; + margin-bottom: 0; + border-radius: 8px 8px 0 0; + } + + &.with-secondary-section-hidden { + display: none; } } - .main-content { - border-radius: 0 0 8px 8px; - padding: 30px 0 0; + migration-wizard { + &::part(deck){ + min-width: 330px; + margin-inline: 36px; + } + } + + .section-main { + margin: auto; + margin-top: 0; + height: $small-main-section-height; - .main-content-inner { - align-items: center; + migration-wizard::part(buttons) { + flex-direction: column; + margin-inline: 46px; } - .logo-container { - text-align: center; + &[hide-secondary-section='responsive'] { + height: $split-screen-height; + margin: auto; + + &:dir(rtl) { + margin: auto; + } - .brand-logo { - min-height: 25px; + .main-content { + padding: 50px 0 0; + border-radius: 8px; - &, &:dir(rtl) { - background-position: center; + border-radius: 8px; } } - - .logo-alt { - width: inherit; - height: inherit; - } } - .welcome-text { - align-items: center; - text-align: center; - margin-inline: 0; - padding-inline: 30px; + .main-content { + border-radius: 0 0 8px 8px; + padding: 30px 0 0; - .spacer-bottom, - .spacer-top { - display: none; + .main-content-inner { + align-items: center; } - } - .action-buttons { - text-align: center; + .logo-container { + text-align: center; + + .brand-logo { + min-height: 25px; - .checkbox-container { - display: none; + &, + &:dir(rtl) { + background-position: center; + } + } + + .logo-alt { + width: inherit; + height: inherit; + } } - .secondary-cta { - position: relative; - margin-block: 10px 0; - bottom: 0; + .welcome-text { + align-items: center; + text-align: center; + margin-inline: 0; + padding-inline: 30px; + + .spacer-bottom, + .spacer-top { + display: none; + } } - } - .primary, - .secondary { - min-width: 240px; - margin-inline: 0; - } + .action-buttons { + text-align: center; - .steps { - padding-block: 0; - margin: 0; + .checkbox-container { + display: none; + } - &.progress-bar { + .secondary-cta { + position: relative; + margin-block: 10px 0; + bottom: 0; + } + } + + .primary, + .secondary { + min-width: 240px; margin-inline: 0; } + + .steps { + padding-block: 0; + margin: 0; + + &.progress-bar { + margin-inline: 0; + } + } } - } - .additional-cta { - &.cta-link { - align-self: center; + .additional-cta { + &.cta-link { + align-self: center; + } } - } - .dismiss-button { - top: -$small-secondary-section-height; - } + .dismiss-button { + top: -$small-secondary-section-height; + } - &:dir(rtl) { - margin: 0 auto auto; + &:dir(rtl) { + margin: auto; + margin-top: 0; - .main-content { - border-radius: 0 0 8px 8px; + .main-content { + border-radius: 0 0 8px 8px; + } } } } + &[no-rdm] { + width: 800px; + } } @media only screen and (height <= 650px) { @@ -1610,6 +1745,10 @@ html { } } + .legal-paragraph { + transition: var(--transition) + } + .primary, .secondary, .additional-cta, @@ -1763,7 +1902,8 @@ html { .secondary, .secondary-cta, .steps, - .cta-link { + .cta-link, + .legal-paragraph { transition-delay: 1s; } } @@ -1772,14 +1912,15 @@ html { .screen:not(.dialog-initial) { .tiles-theme-section, .multi-select-container - { + { transition-delay: 0.2s; } .primary, .secondary, .secondary-cta, - .cta-link { + .cta-link, + .legal-paragraph { transition-delay: 0.4s; } } @@ -1852,6 +1993,7 @@ html { .secondary, .secondary-cta:not(.top), .cta-link, + .legal-paragraph, migration-wizard { opacity: 0; translate: 0 calc(-1 * var(--translate)); @@ -1898,7 +2040,8 @@ html { .checkbox-container:not(.multi-select-item), .secondary, .secondary-cta:not(.top), - .cta-link { + .cta-link, + .legal-paragraph { opacity: 0; translate: 0 var(--translate); transition-delay: 0.3s; diff --git a/browser/components/aboutwelcome/content-src/components/AddonsPicker.jsx b/browser/components/aboutwelcome/content-src/components/AddonsPicker.jsx index 10c88008de..1182c785b9 100644 --- a/browser/components/aboutwelcome/content-src/components/AddonsPicker.jsx +++ b/browser/components/aboutwelcome/content-src/components/AddonsPicker.jsx @@ -20,7 +20,9 @@ export const InstallButton = props => { const [installing, setInstalling] = useState(false); const [installComplete, setInstallComplete] = useState(false); - let buttonLabel = installComplete ? "Installed" : "Add to Firefox"; + let buttonLabel = installComplete + ? { string_id: "amo-picker-install-complete-label" } + : { string_id: "amo-picker-install-button-label" }; function onClick(event) { props.handleAction(event); diff --git a/browser/components/aboutwelcome/content-src/components/EmbeddedMigrationWizard.jsx b/browser/components/aboutwelcome/content-src/components/EmbeddedMigrationWizard.jsx index 2fff85abd9..60186e2694 100644 --- a/browser/components/aboutwelcome/content-src/components/EmbeddedMigrationWizard.jsx +++ b/browser/components/aboutwelcome/content-src/components/EmbeddedMigrationWizard.jsx @@ -4,8 +4,9 @@ import React, { useEffect, useRef } from "react"; -export const EmbeddedMigrationWizard = ({ handleAction }) => { +export const EmbeddedMigrationWizard = ({ handleAction, content }) => { const ref = useRef(); + const options = content.migration_wizard_options; useEffect(() => { const handleBeginMigration = () => { handleAction({ @@ -32,9 +33,29 @@ export const EmbeddedMigrationWizard = ({ handleAction }) => { }, []); // eslint-disable-line react-hooks/exhaustive-deps return ( <migration-wizard - force-show-import-all="false" + force-show-import-all={options?.force_show_import_all || "false"} auto-request-state="" ref={ref} + option-expander-title-string={options?.option_expander_title_string || ""} + hide-option-expander-subtitle={ + options?.hide_option_expander_subtitle || false + } + data-import-complete-success-string={ + options?.data_import_complete_success_string || "" + } + selection-header-string={options?.selection_header_string} + selection-subheader-string={options?.selection_subheader_string || ""} + hide-select-all={options?.hide_select_all || false} + checkbox-margin-inline={options?.checkbox_margin_inline || ""} + checkbox-margin-block={options?.checkbox_margin_block || ""} + import-button-string={options?.import_button_string || ""} + import-button-class={options?.import_button_class || ""} + header-font-size={options?.header_font_size || ""} + header-font-weight={options?.header_font_weight || ""} + header-margin-block={options?.header_margin_block || ""} + subheader-font-size={options?.subheader_font_size || ""} + subheader-font-weight={options?.subheader_font_weight || ""} + subheader-margin-block={options?.subheader_margin_block || ""} ></migration-wizard> ); }; diff --git a/browser/components/aboutwelcome/content-src/components/MSLocalized.jsx b/browser/components/aboutwelcome/content-src/components/MSLocalized.jsx index 42fb071475..61867a75a2 100644 --- a/browser/components/aboutwelcome/content-src/components/MSLocalized.jsx +++ b/browser/components/aboutwelcome/content-src/components/MSLocalized.jsx @@ -13,6 +13,7 @@ export const CONFIGURABLE_STYLES = [ "marginInline", "paddingBlock", "paddingInline", + "textAlign", "whiteSpace", ]; const ZAP_SIZE_THRESHOLD = 160; diff --git a/browser/components/aboutwelcome/content-src/components/MultiStageProtonScreen.jsx b/browser/components/aboutwelcome/content-src/components/MultiStageProtonScreen.jsx index ffe64f05f1..59771e4e48 100644 --- a/browser/components/aboutwelcome/content-src/components/MultiStageProtonScreen.jsx +++ b/browser/components/aboutwelcome/content-src/components/MultiStageProtonScreen.jsx @@ -311,7 +311,10 @@ export class ProtonScreen extends React.PureComponent { /> ) : null} {content.tiles && content.tiles.type === "migration-wizard" ? ( - <EmbeddedMigrationWizard handleAction={this.props.handleAction} /> + <EmbeddedMigrationWizard + handleAction={this.props.handleAction} + content={content} + /> ) : null} </React.Fragment> ); @@ -500,6 +503,7 @@ export class ProtonScreen extends React.PureComponent { <main className={`screen ${this.props.id || ""} ${screenClassName} ${textColorClass}`} + reverse-split={content.reverse_split ? "" : null} role={ariaRole ?? "alertdialog"} layout={content.layout} pos={content.position || "center"} @@ -508,6 +512,7 @@ export class ProtonScreen extends React.PureComponent { ref={input => { this.mainContentHeader = input; }} + no-rdm={content.no_rdm ? "" : null} > {isCenterPosition ? null : this.renderSecondarySection(content)} <div @@ -541,6 +546,12 @@ export class ProtonScreen extends React.PureComponent { content.width && content.position !== "split" ? content.width : null, + paddingBlock: content.split_content_padding_block + ? content.split_content_padding_block + : null, + paddingInline: content.split_content_padding_inline + ? content.split_content_padding_inline + : null, }} > {content.logo ? this.renderPicture(content.logo) : null} @@ -591,11 +602,11 @@ export class ProtonScreen extends React.PureComponent { handleAction={this.props.handleAction} /> ) : null} + {this.renderContentTiles()} + {this.renderLanguageSwitcher()} {content.above_button_content ? this.renderOrderedContent(content.above_button_content) : null} - {this.renderContentTiles()} - {this.renderLanguageSwitcher()} {!hideStepsIndicator && aboveButtonStepsIndicator ? this.renderStepsIndicator() : null} |