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..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,9 +6,9 @@
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'
const SubscribeButton = styled(FollowButton)`
position: absolute;
@@ -16,15 +16,19 @@ const SubscribeButton = styled(FollowButton)`
right: 8px;
`
-const Container = styled(Flex) <{ backgroundColor: string }>`
+const Container = styled(Flex)`
height: 80px;
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} {
@@ -33,20 +37,34 @@ 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
}
export default function ChannelCard ({ channelName }: Props) {
const { subscribed, setSubscribed } = useChannelSubscribed(channelName)
+ const icon = channels[channelName] ?? channels.default
return
setSubscribed(!subscribed)} />
+ {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..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
@@ -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':
+}