prehistoric-systems/omnivore
1
0
Fork 0
mirror of https://github.com/omnivore-app/omnivore.git synced 2026-03-11 08:54:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

style: vertically center the flair icon with the text

Browse source
This commit is contained in:
Eduardo Grajeda 2024-03-25 10:20:53 +01:00
parent 712cad9ea1
commit 1bd6f453a2
1 changed files with 26 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx
View file

@ -102,39 +102,54 @@ const flairIconForLabel = (label: Label): JSX.Element | undefined => {
switch (label.name.toLocaleLowerCase()) {
case 'favorite':
return (
<SpanBox title="Favorite">
<FlairIcon title="Favorite">
<FavoriteFlairIcon />
</SpanBox>
</FlairIcon>
)
case 'pinned':
return (
<SpanBox title="Pinned">
<FlairIcon title="Pinned">
<PinnedFlairIcon />
</SpanBox>
</FlairIcon>
)
case 'recommended':
return (
<SpanBox title="Recommended">
<FlairIcon title="Recommended">
<RecommendedFlairIcon />
</SpanBox>
</FlairIcon>
)
case 'newsletter':
return (
<SpanBox title="Newsletter">
<FlairIcon title="Newsletter">
<NewsletterFlairIcon />
</SpanBox>
</FlairIcon>
)
case 'rss':
case 'feed':
return (
<SpanBox title="Feed">
<FlairIcon title="Feed">
<FeedFlairIcon />
</SpanBox>
</FlairIcon>
)
}
return undefined
}
type FlairIconProps = {
title: string
children: React.ReactNode
}
export function FlairIcon(
props: FlairIconProps
): JSX.Element {
return (
<SpanBox title={props.title} css={{ lineHeight: '1' }}>
{props.children}
</SpanBox>
)
}
export const siteName = (
originalArticleUrl: string,
itemUrl: string,
@ -171,7 +186,7 @@ export function LibraryItemMetadata(
}, [props.item.highlights])
return (
<HStack css={{ gap: '5px' }}>
<HStack css={{ gap: '5px', alignItems: 'center' }}>
{props.item.labels?.map((label) => {
return flairIconForLabel(label)
})}