summaryrefslogtreecommitdiffstats
path: root/browser/components/aboutwelcome/content-src
diff options
context:
space:
mode:
Diffstat (limited to 'browser/components/aboutwelcome/content-src')
-rw-r--r--browser/components/aboutwelcome/content-src/aboutwelcome.scss139
-rw-r--r--browser/components/aboutwelcome/content-src/components/MultiStageAboutWelcome.jsx16
-rw-r--r--browser/components/aboutwelcome/content-src/components/MultiStageProtonScreen.jsx55
-rw-r--r--browser/components/aboutwelcome/content-src/components/Themes.jsx9
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}