From 13465ad0faeae2bc7c6a870af40b155553fdd3d1 Mon Sep 17 00:00:00 2001 From: Jay Harris Date: Wed, 19 Oct 2022 13:14:11 +1300 Subject: [PATCH 1/3] Add icons --- .../braveToday/customize/ChannelCard.tsx | 4 +- .../default/braveToday/customize/Icons.tsx | 157 ++++++++++++++++++ 2 files changed, 160 insertions(+), 1 deletion(-) diff --git a/components/brave_new_tab_ui/components/default/braveToday/customize/ChannelCard.tsx b/components/brave_new_tab_ui/components/default/braveToday/customize/ChannelCard.tsx index 44389fee622c..feb1f624a600 100644 --- a/components/brave_new_tab_ui/components/default/braveToday/customize/ChannelCard.tsx +++ b/components/brave_new_tab_ui/components/default/braveToday/customize/ChannelCard.tsx @@ -9,6 +9,7 @@ import Flex from '../../../Flex' import { getCardColor } from './colors' import FollowButton from './FollowButton' import { useChannelSubscribed } from './Context' +import { channels } from './Icons' const SubscribeButton = styled(FollowButton)` position: absolute; @@ -39,6 +40,7 @@ interface Props { export default function ChannelCard ({ channelName }: Props) { const { subscribed, setSubscribed } = useChannelSubscribed(channelName) + const icon = channels[channelName] ?? channels.default return setSubscribed(!subscribed)} /> - {channelName} + {icon} {channelName} } diff --git a/components/brave_new_tab_ui/components/default/braveToday/customize/Icons.tsx b/components/brave_new_tab_ui/components/default/braveToday/customize/Icons.tsx index 6b488ce85ff6..32bdf70e3783 100644 --- a/components/brave_new_tab_ui/components/default/braveToday/customize/Icons.tsx +++ b/components/brave_new_tab_ui/components/default/braveToday/customize/Icons.tsx @@ -20,3 +20,160 @@ export const BackArrow = + +export const channels = { + 'default': + + , + 'Brave': + + + , + 'Business': + + , + 'Cars': + + , + 'Culture': + + + + + + + + + , + 'Entertainment': + + + + + + + + + + + , + 'Fashion': + + + + + + + + + , + 'Food': + + + + + + + + + , + 'Fun': + + + + + + + + + , + 'Gaming': + + + + + + + , + 'Health': + + + + + + + + + , + 'Home': + + , + 'Politics': + + , + 'Science': + + , + 'Sports': + + + + + + + + + , + 'Travel': + + + + + + + + + + , + 'Technology': + + + + + + + + + , + 'Top News': + + + + + + + + + , + 'Weather': + + + + + + + + + + , + 'World News': + + + + + + + + + +} From 0ba507ea4647952e2b6b4d0085e90ce6f61cac9f Mon Sep 17 00:00:00 2001 From: Jay Harris Date: Wed, 19 Oct 2022 13:32:30 +1300 Subject: [PATCH 2/3] Update tiles --- .../braveToday/customize/ChannelCard.tsx | 26 ++++++++++++++++--- .../default/braveToday/customize/Icons.tsx | 2 +- 2 files changed, 23 insertions(+), 5 deletions(-) diff --git a/components/brave_new_tab_ui/components/default/braveToday/customize/ChannelCard.tsx b/components/brave_new_tab_ui/components/default/braveToday/customize/ChannelCard.tsx index feb1f624a600..5f5744a44411 100644 --- a/components/brave_new_tab_ui/components/default/braveToday/customize/ChannelCard.tsx +++ b/components/brave_new_tab_ui/components/default/braveToday/customize/ChannelCard.tsx @@ -22,10 +22,14 @@ const Container = styled(Flex) <{ backgroundColor: string }>` font-weight: 600; font-size: 14px; border-radius: 8px; - background: ${p => p.backgroundColor}; padding: 16px 20px; - color: white; position: relative; + box-shadow: 0px 2px 8px -1px rgba(0, 0, 0, 0.08), 0px 0.4px 1.5px rgba(0, 0, 0, 0.02); + border: 1px solid rgba(0, 0, 0, 0.08); + + @media (prefers-color-scheme: dark) { + border: 1px solid rgba(255, 255, 255, 0.08); + } &[data-channel-card-is-followed=true] { &:not(:hover, :has(:focus-visible)) ${SubscribeButton} { @@ -34,6 +38,18 @@ const Container = styled(Flex) <{ backgroundColor: string }>` } ` +const IconContainer = styled.div` + width: 32px; + height: 32px; + padding: 8px; + border-radius: 100px; + background: rgba(0,0,0,0.2); + color: #6B7084; + display: flex; + align-items: center; + justify-content: center; +` + interface Props { channelName: string } @@ -44,11 +60,13 @@ export default function ChannelCard ({ channelName }: Props) { return setSubscribed(!subscribed)} /> - {icon} {channelName} + {icon} + {channelName} } diff --git a/components/brave_new_tab_ui/components/default/braveToday/customize/Icons.tsx b/components/brave_new_tab_ui/components/default/braveToday/customize/Icons.tsx index 32bdf70e3783..84a023521360 100644 --- a/components/brave_new_tab_ui/components/default/braveToday/customize/Icons.tsx +++ b/components/brave_new_tab_ui/components/default/braveToday/customize/Icons.tsx @@ -158,7 +158,7 @@ export const channels = { 'Weather': - + From 977ed3105cd3d4408327969233aadc2d72b8bdfe Mon Sep 17 00:00:00 2001 From: Jay Harris Date: Wed, 19 Oct 2022 13:41:03 +1300 Subject: [PATCH 3/3] Minor cleanup --- .../components/default/braveToday/customize/ChannelCard.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/components/brave_new_tab_ui/components/default/braveToday/customize/ChannelCard.tsx b/components/brave_new_tab_ui/components/default/braveToday/customize/ChannelCard.tsx index 5f5744a44411..a0156b98f457 100644 --- a/components/brave_new_tab_ui/components/default/braveToday/customize/ChannelCard.tsx +++ b/components/brave_new_tab_ui/components/default/braveToday/customize/ChannelCard.tsx @@ -6,7 +6,6 @@ import styled from 'styled-components' import * as React from 'react' import Flex from '../../../Flex' -import { getCardColor } from './colors' import FollowButton from './FollowButton' import { useChannelSubscribed } from './Context' import { channels } from './Icons' @@ -17,7 +16,7 @@ const SubscribeButton = styled(FollowButton)` right: 8px; ` -const Container = styled(Flex) <{ backgroundColor: string }>` +const Container = styled(Flex)` height: 80px; font-weight: 600; font-size: 14px; @@ -62,7 +61,6 @@ export default function ChannelCard ({ channelName }: Props) { justify='center' align='start' gap={4} - backgroundColor={getCardColor(channelName)} data-channel-card-is-followed={subscribed} > setSubscribed(!subscribed)} />