From 44860ebaa06acad099240c6b44982396600039e8 Mon Sep 17 00:00:00 2001
From: brave-builds <45370463+brave-builds@users.noreply.github.com>
Date: Wed, 10 Jan 2024 03:30:48 +0100
Subject: [PATCH] [Brave News]: Tweaks round 4 (uplift to 1.62.x) (#21513)

Uplift of #21495 (squashed) to beta
---
 .../components/default/braveNews/FeedV2.tsx   |  4 +-
 .../braveNews/customize/ChannelCard.tsx       |  4 +-
 .../braveNews/customize/FollowButton.tsx      | 38 -------------------
 .../brave_news/browser/resources/feed/Ad.tsx  |  1 +
 .../browser/resources/shared/FollowButton.tsx | 21 ++++++++++
 .../resources/shared/PublisherCard.tsx        | 16 ++++----
 components/resources/brave_news_strings.grdp  |  6 +--
 7 files changed, 37 insertions(+), 53 deletions(-)
 delete mode 100644 components/brave_new_tab_ui/components/default/braveNews/customize/FollowButton.tsx
 create mode 100644 components/brave_news/browser/resources/shared/FollowButton.tsx

diff --git a/components/brave_new_tab_ui/components/default/braveNews/FeedV2.tsx b/components/brave_new_tab_ui/components/default/braveNews/FeedV2.tsx
index 2e81c2440bc5..fc6ca4194b0d 100644
--- a/components/brave_new_tab_ui/components/default/braveNews/FeedV2.tsx
+++ b/components/brave_new_tab_ui/components/default/braveNews/FeedV2.tsx
@@ -61,7 +61,7 @@ const ButtonsContainer = styled.div`
 const SettingsButton = styled(Button)`
   --leo-button-color: var(--bn-glass-50);
   --leo-button-radius: ${radius.s};
-  --leo-button-padding: ${spacing.m};
+  --leo-button-padding: ${spacing.s};
 `
 
 const LoadNewContentButton = styled(NewsButton)`
@@ -116,7 +116,7 @@ export default function FeedV2() {
 
     <ButtonsContainer>
       <SettingsButton fab kind='outline' onClick={() => setCustomizePage('news')} title={getLocale('braveNewsCustomizeFeed')}>
-        <Icon name="settings" />
+        <Icon name="tune" />
       </SettingsButton>
       <SettingsButton fab isLoading={!feedV2} kind='outline' title={getLocale('braveNewsRefreshFeed')} onClick={() => {
         refreshFeedV2()
diff --git a/components/brave_new_tab_ui/components/default/braveNews/customize/ChannelCard.tsx b/components/brave_new_tab_ui/components/default/braveNews/customize/ChannelCard.tsx
index c9ee46b4c03d..511a3141bf04 100644
--- a/components/brave_new_tab_ui/components/default/braveNews/customize/ChannelCard.tsx
+++ b/components/brave_new_tab_ui/components/default/braveNews/customize/ChannelCard.tsx
@@ -8,7 +8,7 @@ import * as React from 'react'
 import styled from 'styled-components'
 import { useChannelSubscribed } from '../../../../../brave_news/browser/resources/shared/Context'
 import { channelIcons } from '../../../../../brave_news/browser/resources/shared/Icons'
-import FollowButton from './FollowButton'
+import FollowButton from '../../../../../brave_news/browser/resources/shared/FollowButton'
 import { getTranslatedChannelName } from '../../../../../brave_news/browser/resources/shared/channel'
 
 const SubscribeButton = styled(FollowButton)`
@@ -56,7 +56,7 @@ interface Props {
   channelName: string
 }
 
-export default function ChannelCard ({ channelName }: Props) {
+export default function ChannelCard({ channelName }: Props) {
   const { subscribed, setSubscribed } = useChannelSubscribed(channelName)
   return <Container
     direction='column'
diff --git a/components/brave_new_tab_ui/components/default/braveNews/customize/FollowButton.tsx b/components/brave_new_tab_ui/components/default/braveNews/customize/FollowButton.tsx
deleted file mode 100644
index f872309dc8e8..000000000000
--- a/components/brave_new_tab_ui/components/default/braveNews/customize/FollowButton.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-// 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 https://mozilla.org/MPL/2.0/.
-
-import Button, { ButtonProps } from '$web-components/button'
-import * as React from 'react'
-import styled, { css } from 'styled-components'
-import { getLocale } from '$web-common/locale'
-
-interface Props extends Omit<ButtonProps, 'isPrimary'> {
-  className?: string
-  following: boolean
-}
-
-const StyledButton = styled.div<{ following: boolean }>`
-  &> button {
-    --background: #FFF;
-    padding: 5px 14px;
-    ${p => p.following && css`
-      color: var(--interactive5);
-      --inner-border-color: var(--interactive5);
-      --outer-border-color: var(--interactive5);
-    `}
-  }
-`
-
-export default function FollowButton (props: Props) {
-  const { following, className, ...rest } = props
-  return <StyledButton className={className} following={following}>
-    <Button {...rest} scale='tiny' isPrimary={!following}>
-      {following
-        ? getLocale('braveNewsFollowButtonFollowing')
-        : getLocale('braveNewsFollowButtonNotFollowing')
-      }
-    </Button>
-  </StyledButton>
-}
diff --git a/components/brave_news/browser/resources/feed/Ad.tsx b/components/brave_news/browser/resources/feed/Ad.tsx
index f40a101bd154..0475b6a20a37 100644
--- a/components/brave_news/browser/resources/feed/Ad.tsx
+++ b/components/brave_news/browser/resources/feed/Ad.tsx
@@ -36,6 +36,7 @@ const BatAdLabel = styled.a`
 
   color: rgba(var(--bn-text-base, 0.7));
   font: ${font.small.regular};
+  line-height: 16px;
 `
 
 const CtaButton = styled(Button)`
diff --git a/components/brave_news/browser/resources/shared/FollowButton.tsx b/components/brave_news/browser/resources/shared/FollowButton.tsx
new file mode 100644
index 000000000000..6e5ca783adf3
--- /dev/null
+++ b/components/brave_news/browser/resources/shared/FollowButton.tsx
@@ -0,0 +1,21 @@
+// 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 https://mozilla.org/MPL/2.0/.
+
+import Button, { ButtonProps } from '@brave/leo/react/button'
+import Icon from '@brave/leo/react/icon'
+import * as React from 'react'
+import styled from 'styled-components'
+
+const StyledButton = styled(Button)`
+  --leo-button-color: rgba(150, 150, 150, 0.8);
+  backdrop-filter: blur(64px);
+`
+
+export default function FollowButton(props: ButtonProps<undefined, boolean> & { following: boolean }) {
+  const { following, ...rest } = props
+  return <StyledButton {...rest} fab size='tiny'>
+    <Icon name={following ? 'minus' : 'plus-add'} />
+  </StyledButton>
+}
diff --git a/components/brave_news/browser/resources/shared/PublisherCard.tsx b/components/brave_news/browser/resources/shared/PublisherCard.tsx
index 0ba47bfc7824..4c9490c7d404 100644
--- a/components/brave_news/browser/resources/shared/PublisherCard.tsx
+++ b/components/brave_news/browser/resources/shared/PublisherCard.tsx
@@ -7,11 +7,11 @@ import Flex from '$web-common/Flex'
 import * as React from 'react'
 import { useState } from 'react'
 import styled from 'styled-components'
+import { getCardColor } from '../../../../brave_new_tab_ui/components/default/braveNews/customize/colors'
 import { usePublisher, usePublisherFollowed } from './Context'
+import FollowButton from './FollowButton'
 import getBraveNewsController from './api'
 import { useLazyUnpaddedImageUrl } from './useUnpaddedImageUrl'
-import FollowButton from '../../../../brave_new_tab_ui/components/default/braveNews/customize/FollowButton'
-import { getCardColor } from '../../../../brave_new_tab_ui/components/default/braveNews/customize/colors'
 
 interface CardProps {
   backgroundColor?: string
@@ -27,7 +27,7 @@ const Card = styled('div').attrs<CardProps>(props => ({
   style: {
     backgroundColor: props.backgroundColor
   }
-}))<CardProps>`
+})) <CardProps>`
   position: relative;
   height: 80px;
   border-radius: 8px;
@@ -49,7 +49,7 @@ const CoverImage = styled('div').attrs<CoverImageProps>(props => ({
   style: {
     backgroundImage: `url('${props.backgroundImage}')`
   }
-}))<CoverImageProps>`
+})) <CoverImageProps>`
   position: absolute;
   top: 15%; bottom: 15%; left: 15%; right: 15%;
   border-radius: 8px;
@@ -63,7 +63,7 @@ const Name = styled.span`
   font-weight: 600;
 `
 
-export default function PublisherCard (props: {
+export default function PublisherCard(props: {
   publisherId: string
 }) {
   const publisher = usePublisher(props.publisherId)
@@ -79,7 +79,7 @@ export default function PublisherCard (props: {
   return <Flex direction="column" gap={8} ref={setElementRef}>
     <Card backgroundColor={backgroundColor} data-feed-card-is-followed={followed}>
       {coverUrl && <CoverImage backgroundImage={coverUrl} />}
-      <StyledFollowButton following={followed} onClick={() => setFollowed(!followed)} />
+      <StyledFollowButton fab size='tiny' following={followed} onClick={() => setFollowed(!followed)} />
     </Card>
     <Name>
       {publisher?.publisherName}
@@ -87,14 +87,14 @@ export default function PublisherCard (props: {
   </Flex>
 }
 
-export function DirectPublisherCard (props: {
+export function DirectPublisherCard(props: {
   feedUrl: string
   title: string
 }) {
   const [loading, setLoading] = useState(false)
   return <Flex direction="column" gap={8}>
     <Card backgroundColor={getCardColor(props.feedUrl)} data-feed-card-is-followed={true}>
-      <StyledFollowButton isDisabled={loading} following={false} onClick={async () => {
+      <StyledFollowButton following={false} isDisabled={loading} onClick={async () => {
         setLoading(true)
         await getBraveNewsController().subscribeToNewDirectFeed({ url: props.feedUrl })
         setLoading(false)
diff --git a/components/resources/brave_news_strings.grdp b/components/resources/brave_news_strings.grdp
index f1f487d32c68..5768225b4460 100644
--- a/components/resources/brave_news_strings.grdp
+++ b/components/resources/brave_news_strings.grdp
@@ -85,13 +85,13 @@
     Try again
   </message>
   <message name="IDS_BRAVE_NEWS_NO_CONTENT_HEADING" desc="Message heading for when there is no Brave News content">
-    No content
+    Your Feed is Empty
   </message>
   <message name="IDS_BRAVE_NEWS_NO_CONTENT_MESSAGE" desc="Message body for when there is no Brave News content">
-    Brave News has no content to show.
+    Follow publishers and channels to see them in your feed.
   </message>
   <message name="IDS_BRAVE_NEWS_NO_CONTENT_ACTION_LABEL" desc="Message action label for when there is no Brave News content">
-    Choose content sources
+    Add content sources
   </message>
 
   <message name="IDS_BRAVE_NEWS_CHANNEL_BRAVE" desc="Translation of the 'Brave' channel">