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