diff --git a/components/brave_news/browser/resources/FeedNavigation.tsx b/components/brave_news/browser/resources/FeedNavigation.tsx
index d585eb22548a..a55b60c0ec6a 100644
--- a/components/brave_news/browser/resources/FeedNavigation.tsx
+++ b/components/brave_news/browser/resources/FeedNavigation.tsx
@@ -33,7 +33,7 @@ const Container = styled(Card)`
scrollbar-color: var(--bn-glass-10) var(--bn-glass-10);
`
-const CustomButton = styled.button <{ selected?: boolean, faint?: boolean, large?: boolean, bold?: boolean }>`
+const CustomButton = styled.button <{ selected?: boolean, faint?: boolean, bold?: boolean }>`
padding: ${spacing.m};
padding-left: ${PAD_LEFT};
@@ -46,7 +46,7 @@ const CustomButton = styled.button <{ selected?: boolean, faint?: boolean, large
width: 100%;
color: ${p => p.faint ? `var(--bn-glass-50)` : `var(--bn-glass-100)`};
- font: ${p => font[p.large ? 'default' : 'small'][p.bold ? 'semibold' : 'regular']};
+ font: ${p => font.small[p.bold ? 'semibold' : 'regular']};
cursor: pointer;
&:hover {
@@ -72,7 +72,7 @@ const Section = styled.details`
align-items: center;
gap: ${spacing.m};
list-style: none;
- font: ${font.default.semibold};
+ font: ${font.small.semibold};
cursor: pointer;
@@ -115,7 +115,7 @@ const PlaceholderMarker =
export function Item(props: { id: FeedView, name: string }) {
const { feedView, setFeedView } = useBraveNews()
const topLevel = ['all', 'following'].includes(props.id)
- return setFeedView(props.id)} bold={topLevel}>
+ return setFeedView(props.id)} bold={topLevel}>
{props.name}
}
diff --git a/components/brave_news/browser/resources/feed/Ad.tsx b/components/brave_news/browser/resources/feed/Ad.tsx
index 2f6132bb16c7..49574e340104 100644
--- a/components/brave_news/browser/resources/feed/Ad.tsx
+++ b/components/brave_news/browser/resources/feed/Ad.tsx
@@ -15,6 +15,7 @@ import getBraveNewsController from '../shared/api';
import { useUnpaddedImageUrl } from '../shared/useUnpaddedImageUrl';
import { MetaInfoContainer } from './ArticleMetaRow';
import Card, { LargeImage, Title, braveNewsCardClickHandler } from './Card';
+import { useBraveNews } from '../shared/Context';
interface Props {
info: FeedV2Ad
@@ -71,9 +72,12 @@ export const useVisibleFor = (callback: () => void, timeout: number) => {
}
}
+const adTargetUrlAllowedSchemes = ['https:', 'chrome:', 'brave:']
+
export default function Advert(props: Props) {
const [advert, setAdvert] = React.useState(undefined)
const imageUrl = useUnpaddedImageUrl(advert?.image.paddedImageUrl?.url ?? advert?.image.imageUrl?.url)
+ const { openArticlesInNewTab } = useBraveNews()
const onDisplayAdViewed = React.useCallback(() => {
if (!advert) return
@@ -89,7 +93,7 @@ export default function Advert(props: Props) {
console.debug(`Brave News: Visited display ad: ${advert.uuid}`)
await getBraveNewsController().onDisplayAdVisit(advert.uuid, advert.creativeInstanceId)
- braveNewsCardClickHandler(advert.targetUrl.url)(e);
+ braveNewsCardClickHandler(advert.targetUrl.url, adTargetUrlAllowedSchemes)(e);
}, [advert])
const { setElementRef: setTriggerRef } = useOnVisibleCallback(async () => {
@@ -114,12 +118,12 @@ export default function Advert(props: Props) {
return
- e.stopPropagation()} href="chrome://rewards">{getLocale('braveNewsAdvertBadge')}
+ e.stopPropagation()} target={openArticlesInNewTab ? '_blank' : undefined} href="chrome://rewards">{getLocale('braveNewsAdvertBadge')}
•
{' ' + advert.description}
- {
+ {
// preventDefault, so we go through onDisplayAdVisit and record the
// result.
e.preventDefault()
diff --git a/components/brave_news/browser/resources/feed/Card.tsx b/components/brave_news/browser/resources/feed/Card.tsx
index b8557e98638a..fa2054f642fb 100644
--- a/components/brave_news/browser/resources/feed/Card.tsx
+++ b/components/brave_news/browser/resources/feed/Card.tsx
@@ -6,7 +6,7 @@
import * as React from 'react';
import { color, effect, font, radius, spacing } from '@brave/leo/tokens/css';
import styled from "styled-components";
-import SecureLink, { SecureLinkProps, validateScheme } from '$web-common/SecureLink';
+import SecureLink, { SecureLinkProps, defaultAllowedSchemes, validateScheme } from '$web-common/SecureLink';
import { configurationCache, useBraveNews } from '../shared/Context';
export const Header = styled.h2`
@@ -89,8 +89,8 @@ export default styled.div`
${p => p.onClick && 'cursor: pointer'}
`
-export const braveNewsCardClickHandler = (href: string | undefined) => (e: React.MouseEvent) => {
- validateScheme(href)
+export const braveNewsCardClickHandler = (href: string | undefined, allowedSchemes: string[] = defaultAllowedSchemes) => (e: React.MouseEvent) => {
+ validateScheme(href, allowedSchemes)
if (configurationCache.value.openArticlesInNewTab || e.ctrlKey || e.metaKey || e.buttons & 4) {
window.open(href, '_blank', 'noopener noreferrer')