add css classes to elements to ease css customization

This commit is contained in:
Athou
2025-04-23 13:56:11 +02:00
parent d6a1f1ae15
commit d417655a86
7 changed files with 25 additions and 15 deletions

View File

@@ -29,8 +29,8 @@ export function FeedEntryHeader(props: FeedEntryHeaderProps) {
read: props.entry.read,
})
return (
<Box>
<Flex align="flex-start" justify="space-between">
<Box className="cf-header">
<Flex align="flex-start" justify="space-between" className="cf-header-title">
<Flex align="flex-start" className={classes.main}>
{props.showStarIcon && (
<Box ml={-5}>
@@ -41,7 +41,7 @@ export function FeedEntryHeader(props: FeedEntryHeaderProps) {
</Flex>
{props.showExternalLinkIcon && <OpenExternalLink entry={props.entry} />}
</Flex>
<Flex align="center">
<Flex align="center" className="cf-header-subtitle">
<FeedFavicon url={props.entry.iconUrl} />
<Space w={6} />
<Box c="dimmed">
@@ -51,7 +51,7 @@ export function FeedEntryHeader(props: FeedEntryHeaderProps) {
</Box>
</Flex>
{props.expanded && (
<Box c="dimmed">
<Box className="cf-header-details">
{props.entry.author && <span>by {props.entry.author}</span>}
{props.entry.author && props.entry.categories && <span>&nbsp;·&nbsp;</span>}
{props.entry.categories && <span>{props.entry.categories}</span>}