From b57fd742b34a5b6216dee3b1ae2c8cf3ca325529 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Tue, 24 Oct 2023 18:05:06 +0800
Subject: [PATCH 1/2] Add titles to the flair icons

---
 .../elements/icons/FavoriteFlairIcon.tsx      |  1 +
 .../LibraryCards/LibraryCardStyles.tsx        | 30 +++++++++++++++----
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/packages/web/components/elements/icons/FavoriteFlairIcon.tsx b/packages/web/components/elements/icons/FavoriteFlairIcon.tsx
index ab7ab8386..9f2ec3b87 100644
--- a/packages/web/components/elements/icons/FavoriteFlairIcon.tsx
+++ b/packages/web/components/elements/icons/FavoriteFlairIcon.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable functional/no-class */
 /* eslint-disable functional/no-this-expression */
+import { SpanBox } from '../LayoutPrimitives'
 import { IconProps } from './IconProps'
 
 import React from 'react'
diff --git a/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx b/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx
index e7fd81c5a..a27570122 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx
@@ -101,16 +101,36 @@ export const FLAIR_ICON_NAMES = [
 const flairIconForLabel = (label: Label): JSX.Element | undefined => {
   switch (label.name.toLocaleLowerCase()) {
     case 'favorite':
-      return <FavoriteFlairIcon />
+      return (
+        <SpanBox title="Favorite">
+          <FavoriteFlairIcon />
+        </SpanBox>
+      )
     case 'pinned':
-      return <PinnedFlairIcon />
+      return (
+        <SpanBox title="Pinned">
+          <PinnedFlairIcon />
+        </SpanBox>
+      )
     case 'recommended':
-      return <RecommendedFlairIcon />
+      return (
+        <SpanBox title="Recommended">
+          <RecommendedFlairIcon />
+        </SpanBox>
+      )
     case 'newsletter':
-      return <NewsletterFlairIcon />
+      return (
+        <SpanBox title="Newsletter">
+          <NewsletterFlairIcon />
+        </SpanBox>
+      )
     case 'rss':
     case 'feed':
-      return <FeedFlairIcon />
+      return (
+        <SpanBox title="Feed">
+          <FeedFlairIcon />
+        </SpanBox>
+      )
   }
   return undefined
 }

From 65b20fcb866f41c4c360b168a7d3d684595fe093 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Tue, 24 Oct 2023 18:13:32 +0800
Subject: [PATCH 2/2] Revert unneeded import

---
 packages/web/components/elements/icons/FavoriteFlairIcon.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/web/components/elements/icons/FavoriteFlairIcon.tsx b/packages/web/components/elements/icons/FavoriteFlairIcon.tsx
index 9f2ec3b87..ab7ab8386 100644
--- a/packages/web/components/elements/icons/FavoriteFlairIcon.tsx
+++ b/packages/web/components/elements/icons/FavoriteFlairIcon.tsx
@@ -1,6 +1,5 @@
 /* eslint-disable functional/no-class */
 /* eslint-disable functional/no-this-expression */
-import { SpanBox } from '../LayoutPrimitives'
 import { IconProps } from './IconProps'
 
 import React from 'react'