From 31468c9682c96d0c243e8e78b87fa2bcadefc4e6 Mon Sep 17 00:00:00 2001
From: Emi Matchu <emi@matchu.dev>
Date: Sun, 21 Jan 2024 05:20:08 -0800
Subject: [PATCH] Replace rarity on item page with NC/NP badge, styled after
 2020

---
 .../stylesheets/partials/_item_header.sass    | 27 ++++++++++++++++---
 app/views/items/_item_header.haml             | 10 ++++---
 2 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/partials/_item_header.sass b/app/assets/stylesheets/partials/_item_header.sass
index 31fcd9bf..bcc28af1 100644
--- a/app/assets/stylesheets/partials/_item_header.sass
+++ b/app/assets/stylesheets/partials/_item_header.sass
@@ -30,10 +30,31 @@
     .item-links
       grid-area: links
 
+      font-size: 85%
       text-align: left
-      a
-        font-size: 75%
-        margin-left: 1em
+      display: flex
+      align-items: center
+      gap: 1em
+      
+      .nc-or-np
+        padding: .25em .5em
+        border-radius: .25em
+        cursor: help
+
+        font-weight: bold
+        line-height: 1
+
+        // These colors are copied from DTI 2020, for initial consistency!
+        // They're based on the Chakra UI colors, which I think are in turn the
+        // Bootstrap colors? Or something?
+        &[data-type=nc]
+          background: #E9D8FD
+          color: #44337A
+
+        &[data-type=np]
+          background: #E2E8F0
+          color: #1A202C
+
 
   .item-description
     margin-top: .5em
diff --git a/app/views/items/_item_header.haml b/app/views/items/_item_header.haml
index b9b885c2..cbbce276 100644
--- a/app/views/items/_item_header.haml
+++ b/app/views/items/_item_header.haml
@@ -7,9 +7,13 @@
     = image_tag item.thumbnail_url, class: 'item-thumbnail'
     %h2.item-name= item.name
     %nav.item-links
-      = nc_icon_for(item)
-      - unless item.rarity.blank?
-        == #{t 'items.show.rarity'}: #{item.rarity_index} (#{item.rarity})
+      - if item.nc?
+        .nc-or-np{'data-type' => 'nc', title: 'Purchaseable with Neocash'}
+          NC
+      - else
+        .nc-or-np{'data-type' => 'np', title: 'Purchaseable with Neopoints'}
+          NP
+
       = link_to t('items.show.resources.jn_items'), jn_items_url_for(item)
       - if item.nc_trade_value
         = link_to t('items.show.resources.owls', value: item.nc_trade_value.value_text),