diff options
Diffstat (limited to 'browser/components/aboutwelcome/content-src')
4 files changed, 188 insertions, 31 deletions
diff --git a/browser/components/aboutwelcome/content-src/aboutwelcome.scss b/browser/components/aboutwelcome/content-src/aboutwelcome.scss index 9174fe2439..07bfcd2c96 100644 --- a/browser/components/aboutwelcome/content-src/aboutwelcome.scss +++ b/browser/components/aboutwelcome/content-src/aboutwelcome.scss @@ -1139,6 +1139,38 @@ html { &[no-rdm] { width: 800px; + + &[reverse-split] { + flex-direction: row-reverse; + + .section-main { + .main-content { + border-radius: inherit; + } + + 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; + } + } + + .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; + } + } + } } } @@ -1372,6 +1404,107 @@ html { outline: 2px solid var(--in-content-primary-button-background); } + // newtab wallpaper specific styles + &.wallpaper { + justify-content: center; + gap: 10px; + + &:hover, &:focus-within { + outline: none; + } + + .theme { + flex: unset; + width: unset; + transition: var(--transition); + + &:has(.input:focus) { + outline: 2px solid var(--in-content-primary-button-background); + outline-offset: 2px; + } + + .icon { + width: 116px; + height: 86px; + border-radius: 8px; + box-shadow: 0 1px 2px 0 #3A394433; + + &:hover { + filter: brightness(45%); + } + + // dark theme wallpapers + &.dark-landscape { + background-image: url('chrome://activity-stream/content/data/content/assets/wallpapers/dark-landscape.avif'); + } + + &.dark-beach { + background-image: url('chrome://activity-stream/content/data/content/assets/wallpapers/dark-beach.avif'); + } + + &.dark-color { + background-image: url('chrome://activity-stream/content/data/content/assets/wallpapers/dark-color.avif'); + } + + &.dark-mountain { + background-image: url('chrome://activity-stream/content/data/content/assets/wallpapers/dark-mountain.avif'); + } + + &.dark-panda { + background-image: url('chrome://activity-stream/content/data/content/assets/wallpapers/dark-panda.avif'); + } + + &.dark-sky { + background-image: url('chrome://activity-stream/content/data/content/assets/wallpapers/dark-sky.avif'); + } + + // light theme wallpapers + &.light-beach { + background-image: url('chrome://activity-stream/content/data/content/assets/wallpapers/light-beach.avif'); + } + + &.light-color { + background-image: url('chrome://activity-stream/content/data/content/assets/wallpapers/light-color.avif'); + } + + &.light-landscape { + background-image: url('chrome://activity-stream/content/data/content/assets/wallpapers/light-landscape.avif'); + } + + &.light-mountain { + background-image: url('chrome://activity-stream/content/data/content/assets/wallpapers/light-mountain.avif'); + } + + &.light-panda { + background-image: url('chrome://activity-stream/content/data/content/assets/wallpapers/light-panda.avif'); + } + + &.light-sky { + background-image: url('chrome://activity-stream/content/data/content/assets/wallpapers/light-sky.avif'); + } + } + } + + .dark { + display: none; + } + + .text { + display: none; + } + + @media (prefers-color-scheme: dark) { + .light { + display: none; + } + + .dark { + display: block; + } + } + + } + .theme { align-items: center; display: flex; @@ -1405,13 +1538,17 @@ html { transform: scaleX(-1); } - &:focus, + &:focus-visible, &:active, &.selected { outline: 2px solid var(--in-content-primary-button-background); outline-offset: 2px; } + &.selected { + outline-color: var(--color-accent-primary-active); + } + &.light { background-image: url('resource://builtin-themes/light/icon.svg'); } diff --git a/browser/components/aboutwelcome/content-src/components/MultiStageAboutWelcome.jsx b/browser/components/aboutwelcome/content-src/components/MultiStageAboutWelcome.jsx index 034055bf3d..3ccbd71f40 100644 --- a/browser/components/aboutwelcome/content-src/components/MultiStageAboutWelcome.jsx +++ b/browser/components/aboutwelcome/content-src/components/MultiStageAboutWelcome.jsx @@ -463,9 +463,21 @@ export class WelcomeScreen extends React.PureComponent { action.theme === "<event>" ? event.currentTarget.value : this.props.initialTheme || action.theme; - this.props.setActiveTheme(themeToUse); - window.AWSelectTheme(themeToUse); + if (props.content.tiles?.category?.type === "wallpaper") { + const theme = themeToUse.split("-")?.[1]; + let actionWallpaper = { ...props.content.tiles.category.action }; + actionWallpaper.data.actions.forEach(async wpAction => { + if (wpAction.data.pref.name?.includes("dark")) { + wpAction.data.pref.value = `dark-${theme}`; + } else { + wpAction.data.pref.value = `light-${theme}`; + } + await AboutWelcomeUtils.handleUserAction(actionWallpaper); + }); + } else { + window.AWSelectTheme(themeToUse); + } } // If the action has persistActiveTheme: true, we set the initial theme to the currently active theme diff --git a/browser/components/aboutwelcome/content-src/components/MultiStageProtonScreen.jsx b/browser/components/aboutwelcome/content-src/components/MultiStageProtonScreen.jsx index 59771e4e48..b6e1ffa6b5 100644 --- a/browser/components/aboutwelcome/content-src/components/MultiStageProtonScreen.jsx +++ b/browser/components/aboutwelcome/content-src/components/MultiStageProtonScreen.jsx @@ -570,32 +570,39 @@ export class ProtonScreen extends React.PureComponent { </div> ) : null} - <div className="main-content-inner"> - <div className={`welcome-text ${content.title_style || ""}`}> - {content.title ? this.renderTitle(content) : null} + <div + className="main-content-inner" + style={{ + justifyContent: content.split_content_justify_content, + }} + > + {content.title || content.subtitle ? ( + <div className={`welcome-text ${content.title_style || ""}`}> + {content.title ? this.renderTitle(content) : null} - {content.subtitle ? ( - <Localized text={content.subtitle}> - <h2 - data-l10n-args={JSON.stringify({ - "addon-name": this.props.addonName, - ...this.props.appAndSystemLocaleInfo?.displayNames, - })} - aria-flowto={ - this.props.messageId?.includes("FEATURE_TOUR") - ? "steps" - : "" - } + {content.subtitle ? ( + <Localized text={content.subtitle}> + <h2 + data-l10n-args={JSON.stringify({ + "addon-name": this.props.addonName, + ...this.props.appAndSystemLocaleInfo?.displayNames, + })} + aria-flowto={ + this.props.messageId?.includes("FEATURE_TOUR") + ? "steps" + : "" + } + /> + </Localized> + ) : null} + {content.cta_paragraph ? ( + <CTAParagraph + content={content.cta_paragraph} + handleAction={this.props.handleAction} /> - </Localized> - ) : null} - {content.cta_paragraph ? ( - <CTAParagraph - content={content.cta_paragraph} - handleAction={this.props.handleAction} - /> - ) : null} - </div> + ) : null} + </div> + ) : null} {content.video_container ? ( <OnboardingVideo content={content.video_container} diff --git a/browser/components/aboutwelcome/content-src/components/Themes.jsx b/browser/components/aboutwelcome/content-src/components/Themes.jsx index 0ee986f982..e430ecf3aa 100644 --- a/browser/components/aboutwelcome/content-src/components/Themes.jsx +++ b/browser/components/aboutwelcome/content-src/components/Themes.jsx @@ -6,28 +6,29 @@ import React from "react"; import { Localized } from "./MSLocalized"; export const Themes = props => { + const category = props.content.tiles?.category?.type; return ( <div className="tiles-theme-container"> <div> - <fieldset className="tiles-theme-section"> + <fieldset className={`tiles-theme-section ${category}`}> <Localized text={props.content.subtitle}> <legend className="sr-only" /> </Localized> {props.content.tiles.data.map( - ({ theme, label, tooltip, description }) => ( + ({ theme, label, tooltip, description, type }) => ( <Localized key={theme + label} text={typeof tooltip === "object" ? tooltip : {}} > {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */} - <label className="theme" title={theme + label}> + <label className={`theme ${type}`} title={theme + label}> <Localized text={typeof description === "object" ? description : {}} > <input type="radio" value={theme} - name="theme" + name={category === "wallpaper" ? theme : "theme"} checked={theme === props.activeTheme} className="sr-only input" onClick={props.handleAction} |