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} - <SecureLink href={advert.targetUrl.url} onClick={e => { + <SecureLink allowedSchemes={adTargetUrlAllowedSchemes} href={advert.targetUrl.url} onClick={e => { // 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')