Replace rarity on item page with NC/NP badge, styled after 2020

app/assets/stylesheets/partials/_item_header.sass

@@ -30,10 +30,31 @@
     .item-links
       grid-area: links
 
+      font-size: 85%
       text-align: left
-      a
+      display: flex
-        font-size: 75%
+      align-items: center
-        margin-left: 1em
+      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

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)
+      - if item.nc?
-      - unless item.rarity.blank?
+        .nc-or-np{'data-type' => 'nc', title: 'Purchaseable with Neocash'}
-        == #{t 'items.show.rarity'}: #{item.rarity_index} (#{item.rarity})
+          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),