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