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

Merge pull request #3741 from egrajeda/flair-icon-alignment

Browse source 
Vertically align the flair icon with the text
This commit is contained in:
Jackson Harper 2024-03-28 10:52:23 +08:00 committed by GitHub
commit c02bb73925
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
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)
})}