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),