diff options
Diffstat (limited to 'browser/components/newtab/content-src/components/CustomizeMenu')
3 files changed, 55 insertions, 0 deletions
diff --git a/browser/components/newtab/content-src/components/CustomizeMenu/ContentSection/ContentSection.jsx b/browser/components/newtab/content-src/components/CustomizeMenu/ContentSection/ContentSection.jsx index 57ed935e93..298dedcee5 100644 --- a/browser/components/newtab/content-src/components/CustomizeMenu/ContentSection/ContentSection.jsx +++ b/browser/components/newtab/content-src/components/CustomizeMenu/ContentSection/ContentSection.jsx @@ -4,6 +4,7 @@ import React from "react"; import { actionCreators as ac } from "common/Actions.sys.mjs"; +import { SafeAnchor } from "../../DiscoveryStreamComponents/SafeAnchor/SafeAnchor"; export class ContentSection extends React.PureComponent { constructor(props) { @@ -96,6 +97,7 @@ export class ContentSection extends React.PureComponent { mayHaveSponsoredStories, mayHaveRecentSaves, openPreferences, + spocMessageVariant, } = this.props; const { topSitesEnabled, @@ -254,6 +256,23 @@ export class ContentSection extends React.PureComponent { </label> </div> + {pocketRegion && + mayHaveSponsoredStories && + spocMessageVariant === "variant-c" && ( + <div className="sponsored-content-info"> + <div className="icon icon-help"></div> + <div> + Sponsored content supports our mission to build a better web.{" "} + <SafeAnchor + dispatch={this.props.dispatch} + url="https://support.mozilla.org/kb/pocket-sponsored-stories-new-tabs" + > + Find out how + </SafeAnchor> + </div> + </div> + )} + <span className="divider" role="separator"></span> <div> diff --git a/browser/components/newtab/content-src/components/CustomizeMenu/CustomizeMenu.jsx b/browser/components/newtab/content-src/components/CustomizeMenu/CustomizeMenu.jsx index 3d33f6fde7..54dcd550c4 100644 --- a/browser/components/newtab/content-src/components/CustomizeMenu/CustomizeMenu.jsx +++ b/browser/components/newtab/content-src/components/CustomizeMenu/CustomizeMenu.jsx @@ -71,6 +71,7 @@ export class _CustomizeMenu extends React.PureComponent { mayHaveSponsoredTopSites={this.props.mayHaveSponsoredTopSites} mayHaveSponsoredStories={this.props.mayHaveSponsoredStories} mayHaveRecentSaves={this.props.DiscoveryStream.recentSavesEnabled} + spocMessageVariant={this.props.spocMessageVariant} dispatch={this.props.dispatch} /> </div> diff --git a/browser/components/newtab/content-src/components/CustomizeMenu/_CustomizeMenu.scss b/browser/components/newtab/content-src/components/CustomizeMenu/_CustomizeMenu.scss index f534b8701b..579e455a3f 100644 --- a/browser/components/newtab/content-src/components/CustomizeMenu/_CustomizeMenu.scss +++ b/browser/components/newtab/content-src/components/CustomizeMenu/_CustomizeMenu.scss @@ -143,6 +143,10 @@ border-radius: 4px; appearance: none; background-color: var(--newtab-element-secondary-color); + + &:hover { + background-color: var(--newtab-element-secondary-hover-color); + } } .sponsored-checkbox:checked { @@ -151,6 +155,14 @@ background: url('chrome://global/skin/icons/check.svg') center no-repeat; background-color: var(--newtab-primary-action-background); + &:hover { + background-color: var(--newtab-primary-element-hover-color); + } + + &:active { + background-color: var(--newtab-primary-element-active-color); + } + @media (forced-colors: active) { fill: $black; } @@ -178,6 +190,10 @@ background-origin: content-box; background-color: var(--newtab-background-color-secondary); + &:hover { + background-color: var(--newtab-element-secondary-hover-color); + } + &:dir(rtl) { background-position-x: left; } @@ -201,6 +217,25 @@ } } + .sponsored-content-info { + display: flex; + gap: var(--space-small); + font-size: var(--font-size-small); + border-radius: var(--border-radius-medium); + background-color: var(--newtab-element-secondary-color); + padding: var(--space-small) var(--space-large); + + .icon-help { + flex-shrink: 0; + color: var(--color-accent-primary); + height: 20px; + } + + a { + color: var(--newtab-primary-action-background); + } + } + .divider { border-top: 1px var(--newtab-border-color) solid; margin: 0 -16px; |