[Brave News]: Improve FeedV2 Buttons (#21347)

brave · Dec 20, 2023 · a1a2051 · a1a2051
1 parent 5c1e050
commit a1a2051
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 12 deletions.
diff --git a/components/brave_new_tab_ui/components/default/braveNews/FeedV2.tsx b/components/brave_new_tab_ui/components/default/braveNews/FeedV2.tsx
@@ -5,7 +5,8 @@
 import Flex from '$web-common/Flex'
 import { getLocale } from '$web-common/locale'
 import Button from '@brave/leo/react/button'
-import { spacing } from '@brave/leo/tokens/css'
+import Icon from '@brave/leo/react/icon'
+import { radius, spacing } from '@brave/leo/tokens/css'
 import * as React from 'react'
 import styled from 'styled-components'
 import Feed from '../../../../brave_news/browser/resources/Feed'
@@ -38,8 +39,9 @@ const ButtonsContainer = styled.div`
   visibility: hidden;
 
   position: fixed;
-  bottom: ${spacing.xl};
-  right: ${spacing.xl};
+  bottom: ${spacing['5Xl']};
+  right: ${spacing['5Xl']};
+  border-radius: ${radius.m};
 
   opacity: calc((var(--ntp-scroll-percent) - 0.5) / 0.5);
 
@@ -48,7 +50,16 @@ const ButtonsContainer = styled.div`
   }
 
   display: flex;
-  gap: ${spacing.m};
+  gap: ${spacing.xl};
+  padding: ${spacing.xl};
+
+  background: var(--bn-glass-container);
+`
+
+const NewsButton = styled(Button)`
+  --leo-button-color: var(--bn-glass-50);
+  --leo-button-radius: ${radius.s};
+  --leo-button-padding: ${spacing.m};
 `
 
 const LoadNewContentButton = styled(Button)`
@@ -102,12 +113,12 @@ export default function FeedV2() {
     </Flex>
 
     <ButtonsContainer>
-      <Button kind='outline' onClick={() => setCustomizePage('news')}>
-        {getLocale('braveNewsCustomizeFeed')}
-      </Button>
-      <Button isLoading={!feedV2} kind='outline' onClick={() => {
+      <NewsButton fab kind='outline' onClick={() => setCustomizePage('news')} title={getLocale('braveNewsCustomizeFeed')}>
+        <Icon name="settings" />
+      </NewsButton>
+      <NewsButton fab isLoading={!feedV2} kind='outline' title={getLocale('braveNewsRefreshFeed')} onClick={() => {
         refreshFeedV2()
-      }}>{getLocale('braveNewsRefreshFeed')}</Button>
+      }}><Icon name="refresh" /></NewsButton>
     </ButtonsContainer>
   </Root>
 }
diff --git a/components/brave_news/browser/resources/FeedNavigation.tsx b/components/brave_news/browser/resources/FeedNavigation.tsx
@@ -27,6 +27,9 @@ const Container = styled(Card)`
 
   max-height: calc(100vh - ${spacing.xl} * 2);
   overflow-y: auto;
+
+  scrollbar-width: thin;
+  scrollbar-color: var(--bn-glass-10) var(--bn-glass-10);
 `
 
 const Heading = styled.h3`

diff --git a/components/brave_news/browser/resources/feed/Ad.tsx b/components/brave_news/browser/resources/feed/Ad.tsx
@@ -39,6 +39,7 @@ const BatAdLabel = styled.a`
 `
 
 const CtaButton = styled(Button)`
+  --leo-button-color: var(--bn-glass-container);
   align-self: flex-start;
 `
 
@@ -121,6 +122,6 @@ export default function Advert(props: Props) {
         {advert.title}
       </SecureLink>
     </Title>
-    <CtaButton kind='plain-faint'>{advert.ctaText}</CtaButton>
+    <CtaButton kind='filled'>{advert.ctaText}</CtaButton>
   </Container>
 }
diff --git a/components/brave_news/browser/resources/feed/Article.tsx b/components/brave_news/browser/resources/feed/Article.tsx
@@ -23,7 +23,10 @@ const Container = styled(Card)`
 `
 
 export default function Article({ info, hideChannel }: Props) {
-  const { url: imageUrl, setElementRef } = useLazyUnpaddedImageUrl(info.data.image.paddedImageUrl?.url ?? info.data.image.imageUrl?.url, { useCache: true })
+  const { url: imageUrl, setElementRef } = useLazyUnpaddedImageUrl(info.data.image.paddedImageUrl?.url ?? info.data.image.imageUrl?.url, {
+    useCache: true,
+    rootMargin: '500px 0px'
+  })
   const url = info.data.url.url;
 
   return <Container ref={setElementRef} onClick={braveNewsCardClickHandler(url)}>

diff --git a/components/brave_news/browser/resources/feed/Hero.tsx b/components/brave_news/browser/resources/feed/Hero.tsx
@@ -16,7 +16,7 @@ export default function HeroArticle({ info }: Props) {
   const { url, setElementRef } = useLazyUnpaddedImageUrl(info.data.image.paddedImageUrl?.url ?? info.data.image.imageUrl?.url, {
     useCache: true,
     rootElement: document.body,
-    rootMargin: '0px 0px 200px 0px'
+    rootMargin: '500px 0px'
   })
   return <Card onClick={braveNewsCardClickHandler(info.data.url.url)} ref={setElementRef}>
     <LargeImage src={url} />