From 1bd6f453a2498653c4ea293756119d34aa3d4dd1 Mon Sep 17 00:00:00 2001
From: Eduardo Grajeda <tatofoo@gmail.com>
Date: Mon, 25 Mar 2024 10:20:53 +0100
Subject: [PATCH] style: vertically center the flair icon with the text

---
 .../LibraryCards/LibraryCardStyles.tsx        | 37 +++++++++++++------
 1 file changed, 26 insertions(+), 11 deletions(-)

diff --git a/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx b/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx
index 4b0e171e4..cc9c18815 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx
@@ -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)
       })}