diff --git a/browser/ui/webui/brave_webui_source.cc b/browser/ui/webui/brave_webui_source.cc index 0fce0ec294cd..7398e5594ca8 100644 --- a/browser/ui/webui/brave_webui_source.cc +++ b/browser/ui/webui/brave_webui_source.cc @@ -166,6 +166,10 @@ void CustomizeWebUIHTMLSource(const std::string &name, { "showBinance", IDS_BRAVE_NEW_TAB_SHOW_BINANCE }, { "cards", IDS_BRAVE_NEW_TAB_SHOW_CARDS }, { "brandedWallpaperOptIn", IDS_BRAVE_NEW_TAB_BRANDED_WALLPAPER_OPT_IN }, + { "sponsoredImageOn", IDS_BRAVE_NEW_TAB_SPONSORED_IMAGE_ON}, + { "sponsoredImageOff", IDS_BRAVE_NEW_TAB_SPONSORED_IMAGE_OFF}, + { "sponsoredImageOnDescription", IDS_BRAVE_NEW_TAB_SPONSORED_IMAGE_ON_DESCRIPTION}, // NOLINT + { "sponsoredImageOffDescription", IDS_BRAVE_NEW_TAB_SPONSORED_IMAGE_OFF_DESCRIPTION}, // NOLINT { "topSitesTitle", IDS_BRAVE_NEW_TAB_TOP_SITES }, { "statsTitle", IDS_BRAVE_NEW_TAB_STATS }, { "clockTitle", IDS_BRAVE_NEW_TAB_CLOCK }, diff --git a/components/brave_new_tab_ui/components/default/settings/assets/info-icon.svg b/components/brave_new_tab_ui/components/default/settings/assets/info-icon.svg new file mode 100644 index 000000000000..4e1d0a306ed5 --- /dev/null +++ b/components/brave_new_tab_ui/components/default/settings/assets/info-icon.svg @@ -0,0 +1,10 @@ + + + + + diff --git a/components/brave_new_tab_ui/containers/app.tsx b/components/brave_new_tab_ui/containers/app.tsx index d82f7701373e..371c53316242 100644 --- a/components/brave_new_tab_ui/containers/app.tsx +++ b/components/brave_new_tab_ui/containers/app.tsx @@ -7,6 +7,8 @@ import * as React from 'react' import { Dispatch } from 'redux' import { connect } from 'react-redux' +import '$web-components/app.global.scss' + // Components import NewTabPage from './newTab' diff --git a/components/brave_new_tab_ui/containers/newTab/index.tsx b/components/brave_new_tab_ui/containers/newTab/index.tsx index ad43f3284cf0..c214b7df756e 100644 --- a/components/brave_new_tab_ui/containers/newTab/index.tsx +++ b/components/brave_new_tab_ui/containers/newTab/index.tsx @@ -1362,6 +1362,7 @@ class NewTabPage extends React.Component { cardsHidden={this.allWidgetsHidden()} toggleCards={this.props.saveSetAllStackWidgets} newTabData={this.props.newTabData} + onEnableRewards={this.startRewards} /> { showEditTopSite diff --git a/components/brave_new_tab_ui/containers/newTab/settings.tsx b/components/brave_new_tab_ui/containers/newTab/settings.tsx index 40a59d236338..a3531258f1ee 100644 --- a/components/brave_new_tab_ui/containers/newTab/settings.tsx +++ b/components/brave_new_tab_ui/containers/newTab/settings.tsx @@ -70,6 +70,7 @@ export interface Props { useCustomBackgroundImage: () => void setBraveBackground: (selectedBackground: string) => void setColorBackground: (color: string, useRandomColor: boolean) => void + onEnableRewards: () => void showBackgroundImage: boolean showToday: boolean showBraveNewsButton: boolean @@ -296,7 +297,8 @@ export default class Settings extends React.PureComponent { ftxSupported, showFTX, toggleCards, - cardsHidden + cardsHidden, + onEnableRewards } = this.props const { activeTab } = this.state @@ -362,6 +364,7 @@ export default class Settings extends React.PureComponent { brandedWallpaperOptIn={brandedWallpaperOptIn} showBackgroundImage={showBackgroundImage} featureCustomBackgroundEnabled={featureCustomBackgroundEnabled} + onEnableRewards={onEnableRewards} /> ) : null } diff --git a/components/brave_new_tab_ui/containers/newTab/settings/backgroundImage.tsx b/components/brave_new_tab_ui/containers/newTab/settings/backgroundImage.tsx index 05ed2eace8a0..45a105b862c2 100644 --- a/components/brave_new_tab_ui/containers/newTab/settings/backgroundImage.tsx +++ b/components/brave_new_tab_ui/containers/newTab/settings/backgroundImage.tsx @@ -25,6 +25,7 @@ import { getLocale } from '../../../../common/locale' import BackgroundChooser from './backgroundChooser' import { images, defaultSolidBackgroundColor, solidColorsForBackground, gradientColorsForBackground, defaultGradientColor } from '../../../data/backgrounds' +import SponsoredImageToggle from './sponsoredImagesToggle' interface Props { newTabData: NewTab.State @@ -36,6 +37,7 @@ interface Props { brandedWallpaperOptIn: boolean showBackgroundImage: boolean featureCustomBackgroundEnabled: boolean + onEnableRewards: () => void } enum Location { @@ -84,7 +86,8 @@ class BackgroundImageSettings extends React.PureComponent { toggleBrandedWallpaperOptIn, brandedWallpaperOptIn, showBackgroundImage, - featureCustomBackgroundEnabled + featureCustomBackgroundEnabled, + onEnableRewards } = this.props const usingCustomImageBackground = newTabData.backgroundWallpaper?.type === 'image' @@ -109,17 +112,6 @@ class BackgroundImageSettings extends React.PureComponent { size='large' /> - - {getLocale('brandedWallpaperOptIn')} - - {showBackgroundImage && featureCustomBackgroundEnabled && ( { )} +
+ + +
)} {this.state.location === Location.BRAVE_BACKGROUNDS && diff --git a/components/brave_new_tab_ui/containers/newTab/settings/sponsoredImagesToggle.tsx b/components/brave_new_tab_ui/containers/newTab/settings/sponsoredImagesToggle.tsx new file mode 100644 index 000000000000..0bcaf0d96d82 --- /dev/null +++ b/components/brave_new_tab_ui/containers/newTab/settings/sponsoredImagesToggle.tsx @@ -0,0 +1,114 @@ +// Copyright (c) 2022 The Brave Authors. All rights reserved. +// This Source Code Form is subject to the terms of the Mozilla Public +// License, v. 2.0. If a copy of the MPL was not distributed with this file, +// you can obtain one at http://mozilla.org/MPL/2.0/. + +import * as React from 'react' +import styled from 'styled-components' + +// Common components +import { SettingsText } from '../../../components/default' +import { Toggle } from '../../../components/toggle' + +// Assets +import InfoIcon from '../../../components/default/settings/assets/info-icon.svg' + +// Utilities +import { getLocale } from '../../../../common/locale' + +interface Props { + onChange: () => void + onEnableRewards: () => void + + checked: boolean + disabled: boolean + rewardsEnabled: boolean + adsEnabled: boolean + canSupportAds: boolean +} + +const Container = styled.div` + background-color: var(--info-background); + border-radius: 8px; + padding: 8px; + align-items: center; + display: flex; + flex-direction: column; + gap: 10px; +` + +const ToggleRow = styled.div` + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + padding: 12px 14px; + border-radius: 10px; + background-color: var(--background1); +` + +const DescriptionRow = styled.div` + width: 100%; + display: grid; + grid-template-rows: 16px 1fr; + grid-template-columns: 16px 1fr; + padding: 0 8px; + gap: 8px; + color: #339AF0; + font-family: var(--brave-font-family-non-serif); + letter-spacing: 0.01em; + margin-bottom: 7px; +` + +const DescriptionIcon = styled.div` + background: url(${InfoIcon}) no-repeat; +` + +const DescriptionTitle = styled.div` + font-weight: 600; + font-size: 12px; + line-height: 18px; +` + +const DescriptionBody = styled.div` + grid-column: 2; + font-weight: 500; + font-size: 11px; + line-height: 17px; +` + +const EnableRewardsButton = styled.button` + width: 236px; + height: 40px; + background: var(--interactive5); + border-radius: 48px; + border-width: 0; + color: white; + cursor: pointer; + margin-bottom: 8px; +` + +export default function SponsoredImageToggle ({ onChange, onEnableRewards, checked, disabled, rewardsEnabled: rewardEnabled, adsEnabled, canSupportAds }: Props) { + const showRewardButton = checked && !disabled && (!rewardEnabled || (!adsEnabled && canSupportAds)) + return ( + + + {getLocale('brandedWallpaperOptIn')} + + + + + + {!checked || showRewardButton ? getLocale('sponsoredImageOn') : getLocale('sponsoredImageOff')} + + + {!checked || showRewardButton ? getLocale('sponsoredImageOnDescription') : getLocale('sponsoredImageOffDescription')} + + + {showRewardButton && + + {getLocale('rewardsStartUsingRewards')} + } + + ) +} diff --git a/components/brave_new_tab_ui/stories/default/data/backgroundWallpaper.ts b/components/brave_new_tab_ui/stories/default/data/backgroundWallpaper.ts index 42f2d5717b4e..b9cec5a3e1d5 100644 --- a/components/brave_new_tab_ui/stories/default/data/backgroundWallpaper.ts +++ b/components/brave_new_tab_ui/stories/default/data/backgroundWallpaper.ts @@ -71,3 +71,10 @@ export const onUseBraveBackground = (selectedBackground: string) => { value: backgroundWallpapers.defaultImage }) } + +export const onShowBrandedImageChanged = (show: boolean) => { + addonsChannel.emit(CHANGE, { + name: 'Show branded background image?', + value: show + }) +} diff --git a/components/brave_new_tab_ui/stories/default/data/storybookState.ts b/components/brave_new_tab_ui/stories/default/data/storybookState.ts index c2ec3ac4b7b9..7b9fadc40ed5 100644 --- a/components/brave_new_tab_ui/stories/default/data/storybookState.ts +++ b/components/brave_new_tab_ui/stories/default/data/storybookState.ts @@ -67,6 +67,7 @@ export const useNewTabData = (state: NewTab.State = defaultState) => { brandedWallpaper: shouldShowBrandedWallpaperData( boolean('Show branded background image?', true) ), + brandedWallpaperOptIn: boolean('Show branded background image?', true), backgroundWallpaper: select( 'Background', backgroundWallpapers, diff --git a/components/brave_new_tab_ui/stories/regular.tsx b/components/brave_new_tab_ui/stories/regular.tsx index 5a3f935955e3..32446dfb767a 100644 --- a/components/brave_new_tab_ui/stories/regular.tsx +++ b/components/brave_new_tab_ui/stories/regular.tsx @@ -10,7 +10,7 @@ import NewTabPage from '../containers/newTab' import { getActionsForDispatch } from '../api/getActions' import store from '../store' import { useNewTabData, getGridSitesData } from './default/data/storybookState' -import { onChangeColoredBackground, onUseBraveBackground } from './default/data/backgroundWallpaper' +import { onChangeColoredBackground, onUseBraveBackground, onShowBrandedImageChanged } from './default/data/backgroundWallpaper' import getTodayState from './default/data/todayStorybookState' import getBraveNewsDisplayAd from './default/data/getBraveNewsDisplayAd' import { getDataUrl, getUnpaddedAsDataUrl } from '../../common/privateCDN' @@ -80,7 +80,7 @@ export const Regular = () => { saveShowGemini={doNothing} saveShowCryptoDotCom={doNothing} saveShowFTX={doNothing} - saveBrandedWallpaperOptIn={doNothing} + saveBrandedWallpaperOptIn={onShowBrandedImageChanged} saveSetAllStackWidgets={doNothing} getBraveNewsDisplayAd={getBraveNewsDisplayAd} setBraveBackground={onUseBraveBackground} diff --git a/components/resources/brave_components_strings.grd b/components/resources/brave_components_strings.grd index 02d18d2d5134..c2ffcf85b15b 100644 --- a/components/resources/brave_components_strings.grd +++ b/components/resources/brave_components_strings.grd @@ -254,6 +254,10 @@ Show Binance Cards Show Sponsored Images + You can earn for seeing sponsored sites. + You're earning for seeing sponsored images. + Sponsored images support Brave. With Brave Rewards, you can earn part of the revenue from sponsored images and support content creators too! + Turning off sponsored sites will decrease how many tokens you earn and the support given to content creators each month. top sites Brave Stats clock diff --git a/components/web-components/app.global.scss b/components/web-components/app.global.scss index 4c4cb993bc79..c006d2e1ae64 100644 --- a/components/web-components/app.global.scss +++ b/components/web-components/app.global.scss @@ -1,7 +1,9 @@ :root { --brave-font-family-default: Poppins, sans-serif; + --brave-font-family-non-serif: Poppins, normal; --background1: white; --background2: #F8F9FA; + --info-background: rgba(93, 181, 252, 0.2); --divider1: #E9E9F4; --text1: #212529; --text2: #495057;