From eec73d245b6c40ff228c62d1ebc140488a0c1d77 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Thu, 13 May 2021 16:24:24 -0700
Subject: [PATCH] Add PB badge to items in search / homepage

Oh right, labeling PB items as NP is confusing! Here, we add a "PB" case to the lil badge on the corner of the item thumbnail, in item search page & homepage Newest Items.
---
 src/app/HomePage.js                  |  1 +
 src/app/ItemSearchPage.js            |  1 +
 src/app/components/SquareItemCard.js | 16 +++++++++-------
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/app/HomePage.js b/src/app/HomePage.js
index 7a9c13f..ef7e2d9 100644
--- a/src/app/HomePage.js
+++ b/src/app/HomePage.js
@@ -380,6 +380,7 @@ function NewItemsSectionContent() {
           name
           thumbnailUrl
           isNc
+          isPb
         }
       }
     `
diff --git a/src/app/ItemSearchPage.js b/src/app/ItemSearchPage.js
index 85b32eb..5126c6b 100644
--- a/src/app/ItemSearchPage.js
+++ b/src/app/ItemSearchPage.js
@@ -145,6 +145,7 @@ function ItemSearchPageResults({ query: latestQuery, offset }) {
             name
             thumbnailUrl
             isNc
+            isPb
           }
         }
       }
diff --git a/src/app/components/SquareItemCard.js b/src/app/components/SquareItemCard.js
index 4aa5f29..65dc368 100644
--- a/src/app/components/SquareItemCard.js
+++ b/src/app/components/SquareItemCard.js
@@ -95,17 +95,19 @@ function SquareItemCardLayout({ name, thumbnailImage, minHeightNumLines = 2 }) {
 function ItemThumbnail({ item }) {
   const mdRadiusValue = useToken("radii", "md");
 
+  const colorScheme = item.isNc ? "purple" : item.isPb ? "orange" : "gray";
+
   const badgeBackground = useColorModeValue(
-    item.isNc ? "purple.100" : "gray.100",
-    item.isNc ? "purple.500" : "gray.500"
+    `${colorScheme}.100`,
+    `${colorScheme}.500`
   );
   const badgeColor = useColorModeValue(
-    item.isNc ? "purple.500" : "gray.500",
-    item.isNc ? "purple.100" : "gray.100"
+    `${colorScheme}.500`,
+    `${colorScheme}.100`
   );
   const thumbnailShadowColor = useColorModeValue(
-    item.isNc ? "purple.200" : "gray.200",
-    item.isNc ? "purple.600" : "gray.600"
+    `${colorScheme}.200`,
+    `${colorScheme}.600`
   );
 
   const [
@@ -158,7 +160,7 @@ function ItemThumbnail({ item }) {
                 color: ${badgeColorValue};
               `}
             >
-              {item.isNc ? "NC" : "NP"}
+              {item.isNc ? "NC" : item.isPb ? "PB" : "NP"}
             </div>
           )}
         </div>