[Brave News]: Tweaks round 4 (uplift to 1.62.x) (#21513)

Uplift of #21495 (squashed) to beta

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()

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'

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)`

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>
+}

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,22 +79,22 @@ 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}
     </Name>
   </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)

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">