Align guild gems box with other page elements (#7829)

* Align guild gems box with other page elements

Fixes #7796.

* Fix issues caused by aligning guild gems box

* Remove unnecessary comment

* Connect gem total box and plus/add gems button

When the add gems button is displayed, set border-radius on touching
corners between the two buttons to 0, so that they are displayed as a
unit rather than two separate buttons.

website/client/css/inventory.styl

@@ -1,16 +1,27 @@
 .gem-wallet
   cursor: pointer
-  padding-top: 10px;
+  &.pull-right
+    margin-right: 20px
   .tile
     background-color: darken($neutral, 10%)
-  .add-gems-btn
-    opacity: 0
+    &.add-gems-btn
+      opacity: 0
   &:hover, &:focus
-    .add-gems-btn
-      opacity: 1
-      background-color: $good
     .tile
       opacity: 1
+      &.has-add-gems
+        border-top-left-radius: 0px
+        border-bottom-left-radius: 0px
+      &.add-gems-btn
+        opacity: 1
+        background-color: $good
+        border-right: 0
+        border-radius: 0px
+        border-top-left-radius: 4px
+        border-bottom-left-radius: 4px
+    text-decoration: none
+.buy-gems .gem-wallet
+  margin-right: 0px
 
 .modal-header .gem-wallet
   padding-top: 0px

website/client/css/tasks.styl

@@ -514,8 +514,11 @@ form
   border: 1px solid rgba(0,0,0,0.2)
   outline: 0
   line-height: 2em
-  &:first-child
-    border-right: 0
+  border-radius: 4px
+  display: inline-flex
+  align-items: center // vertically align text
+  .Gems
+    margin-top: 0px
 
 .task-options
   .task-action-btn.tile

website/views/shared/mixins.jade

@@ -2,7 +2,7 @@ mixin gemButton(isGemsModal)
   a.pull-right.gem-wallet(ng-click=( isGemsModal ? '' : 'openModal("buyGems",{track:"Gems > Wallet"})'), popover-trigger='mouseenter', popover-title=env.t('gemsPopoverTitle'), popover=env.t('gemsWhatFor'), popover-placement='bottom')
     if !isGemsModal
       span.task-action-btn.tile.flush.bright.add-gems-btn ＋
-    span.task-action-btn.tile.flush.neutral
+    span.task-action-btn.tile.flush.neutral(class={"has-add-gems": !isGemsModal})
       .Pet_Currency_Gem2x.Gems
       =env.t('gemButton', {number: '{{user.balance * 4 | number:0}}'})