Merge pull request #15814 from brave/bn-customize-styling

[Brave News] Desktop - some list styles for Customize
brave · Nov 8, 2022 · 552de92 · 552de92
2 parents be99a5c + 334aafb
commit 552de92
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 23 deletions.
diff --git a/components/brave_new_tab_ui/components/default/braveToday/customize/Configure.tsx b/components/brave_new_tab_ui/components/default/braveToday/customize/Configure.tsx
@@ -21,13 +21,14 @@ import { PopularPage } from './Popular'
 
 const Grid = styled.div`
   width: 100%;
+  min-width: 730px;
   height: 100%;
 
   overflow: auto;
   overscroll-behavior: none;
 
   display: grid;
-  grid-template-columns: 250px auto;
+  grid-template-columns: 307px auto;
   grid-template-rows: 64px 2px auto;
 
   grid-template-areas:
@@ -86,7 +87,7 @@ const Sidebar = styled.div`
   position: relative;
   overflow: auto;
   grid-area: sidebar;
-  padding: 28px 32px;
+  padding: 28px 22px 28px 32px;
   background: var(--background2);
 `
 

diff --git a/components/brave_new_tab_ui/components/default/braveToday/customize/Modal.tsx b/components/brave_new_tab_ui/components/default/braveToday/customize/Modal.tsx
@@ -11,6 +11,7 @@ import { useBraveNews } from './Context'
 const Configure = React.lazy(() => import('./Configure'))
 
 const Dialog = styled.dialog`
+  font-family: ${p => p.theme.fontFamily.body};
   border-radius: 8px;
   border: none;
   width: min(100vw, 1049px);

diff --git a/components/brave_new_tab_ui/components/default/braveToday/customize/SourcesList.tsx b/components/brave_new_tab_ui/components/default/braveToday/customize/SourcesList.tsx
@@ -14,7 +14,7 @@ import usePromise from '../../../../hooks/usePromise'
 
 const Title = styled.span`
   font-size: 18px;
-  font-weight: 800;
+  font-weight: 600;
   line-height: 36px;
 `
 

diff --git a/components/brave_new_tab_ui/components/default/braveToday/customize/SourcesListEntry.tsx b/components/brave_new_tab_ui/components/default/braveToday/customize/SourcesListEntry.tsx
@@ -7,16 +7,18 @@ import * as React from 'react'
 import styled from 'styled-components'
 import { getLocale } from '$web-common/locale'
 import Flex from '../../../Flex'
-import { useChannelSubscribed, usePublisher, usePublisherFollowed } from './Context'
 import { useLazyFavicon } from '../useUnpaddedImageUrl'
+import { useChannelSubscribed, usePublisher, usePublisherFollowed } from './Context'
 import { getTranslatedChannelName } from './ChannelCard'
+import { channels as ChannelIcons } from './Icons'
 
 interface Props {
   publisherId: string
 }
 
 const ToggleButton = styled.button`
   all: unset;
+  flex: 0 0 auto;
   cursor: pointer;
   color: var(--brave-color-text02);
   &:hover {
@@ -40,7 +42,7 @@ const Container = styled(Flex)`
 `
 
 const FavIconContainer = styled.div`
-  width: 24px;
+  flex: 0 0 24px;
   height: 24px;
   flex-shrink: 0;
   border-radius: 100px;
@@ -52,12 +54,13 @@ const FavIconContainer = styled.div`
 `
 
 const Text = styled.span`
+  flex: 1 1 0;
+  word-break: break-word;
   font-size: 14px;
   font-weight: 500;
 `
 
-const ChannelNameText = styled.span`
-  font-size: 14px;
+const ChannelNameText = styled(Text)`
   font-weight: 600;
 `
 
@@ -67,33 +70,40 @@ function FavIcon (props: { publisherId: string }) {
     rootMargin: '200px 0px 200px 0px'
   })
   const [error, setError] = React.useState(false)
-  return <FavIconContainer ref={setElementRef}>
-    {url && !error && <img src={url} onError={() => setError(true)} />}
-  </FavIconContainer>
+  return (
+    <FavIconContainer ref={setElementRef}>
+      {url && !error && <img src={url} onError={() => setError(true)} />}
+    </FavIconContainer>
+  )
 }
 
 export function FeedListEntry (props: Props) {
   const publisher = usePublisher(props.publisherId)
   const { setFollowed } = usePublisherFollowed(props.publisherId)
 
-  return <Container direction="row" justify="space-between" align='center'>
-    <Flex align='center' gap={8}>
+  return (
+    <Container direction="row" justify="space-between" align='center' gap={8}>
       <FavIcon publisherId={props.publisherId} />
       <Text>{publisher.publisherName}</Text>
-    </Flex>
-    <ToggleButton onClick={() => setFollowed(false)}>
-      {getLocale('braveNewsFollowButtonFollowing')}
-    </ToggleButton>
-  </Container>
+      <ToggleButton onClick={() => setFollowed(false)}>
+        {getLocale('braveNewsFollowButtonFollowing')}
+      </ToggleButton>
+    </Container>
+  )
 }
 
 export function ChannelListEntry (props: { channelName: string }) {
   const { setSubscribed } = useChannelSubscribed(props.channelName)
 
-  return <Container direction="row" justify='space-between' align='center'>
-    <ChannelNameText>{getTranslatedChannelName(props.channelName)}</ChannelNameText>
-    <ToggleButton onClick={() => setSubscribed(false)}>
-      {getLocale('braveNewsFollowButtonFollowing')}
-    </ToggleButton>
-  </Container>
+  return (
+    <Container direction="row" justify='space-between' align='center' gap={8}>
+      <FavIconContainer>
+        {ChannelIcons[props.channelName] ?? ChannelIcons.default}
+      </FavIconContainer>
+      <ChannelNameText>{getTranslatedChannelName(props.channelName)}</ChannelNameText>
+      <ToggleButton onClick={() => setSubscribed(false)}>
+        {getLocale('braveNewsFollowButtonFollowing')}
+      </ToggleButton>
+    </Container>
+  )
 }