From cdeb498c0bc055e9dcb49a9ad7eec71f952031e0 Mon Sep 17 00:00:00 2001
From: Josh Holland <anowlcalledjosh@gmail.com>
Date: Thu, 11 Aug 2016 13:45:21 +0100
Subject: [PATCH] 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 | 23 +++++++++++++++++------
 website/client/css/tasks.styl     |  7 +++++--
 website/views/shared/mixins.jade  |  2 +-
 3 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/website/client/css/inventory.styl b/website/client/css/inventory.styl
index 1740daa407..39db3d7ee1 100644
--- a/website/client/css/inventory.styl
+++ b/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
diff --git a/website/client/css/tasks.styl b/website/client/css/tasks.styl
index 7e2eaa09f0..202f0691b6 100644
--- a/website/client/css/tasks.styl
+++ b/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
diff --git a/website/views/shared/mixins.jade b/website/views/shared/mixins.jade
index 442e1ab5e9..9af18d869e 100644
--- a/website/views/shared/mixins.jade
+++ b/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}}'})