Styled merch button to have highlight (#8273)

website/client-old/css/options.styl

@@ -16,6 +16,11 @@
     @extend $hrpg-button
     hrpg-button-color-mixin($color-options-menu)
 
+    &.highlight
+      hrpg-button-color-mixin($color-options-submenu, true)
+      border: 1px solid;
+      border-radius: 3px;
+
 .options-submenu
   margin-top: -1.618em
   background-color: $color-options-submenu
@@ -33,5 +38,3 @@
     padding: 1em 0.618em 0 0.618em
     border: 1px solid darken($color-options-menu, 12%)
     border-top: none
-
-

website/common/locales/en/merch.json

@@ -1,5 +1,6 @@
 {
   "merch" : "Merchandise",
+  "merchandiseDescription": "Looking for t-shirts, mugs, or stickers to show off your Habitica pride? Click here!",
 
   "merch-teespring-summary" : "Teespring is a platform that makes it easy for anyone to create and sell high-quality products people love, with no cost or risk.",
   "merch-teespring-goto" : "Get a Habitica T-shirt",

website/views/options/inventory/menu.jade

@@ -20,7 +20,7 @@ ul.options-menu
   li(ng-class="{ active: $state.includes('options.inventory.seasonalshop') }")
     a(ui-sref='options.inventory.seasonalshop')
       =env.t('seasonalShop')
-  li.pull-right
+  li.pull-right.highlight(tooltip=env.t('merchandiseDescription'))
     a(href='/static/merch')=env.t('merch')
 
 .tab-content