diff --git a/website/client/src/components/shared/numberIncrement.vue b/website/client/src/components/shared/numberIncrement.vue index e2e00afd93..e1fa888927 100644 --- a/website/client/src/components/shared/numberIncrement.vue +++ b/website/client/src/components/shared/numberIncrement.vue @@ -48,6 +48,7 @@ .input-group { width: 94px; height: 32px; + width: 48px; margin: 0px 16px 0px 16px; padding: 0; border-radius: 2px; @@ -63,14 +64,14 @@ cursor: pointer; &:hover { - border-color: $purple-400; + border-color: $purple-300; } } .gray-circle:hover{ .icon-positive, .icon-negative { & ::v-deep svg path { - fill: $purple-400; + fill: $purple-300; } } } @@ -78,7 +79,7 @@ .icon-positive, .icon-negative { width: 10px; height: 10px; - margin: 4px auto; + margin: 3px auto; & ::v-deep svg path { fill: $gray-300; diff --git a/website/client/src/components/shops/buyModal.vue b/website/client/src/components/shops/buyModal.vue index 3ae7e6f61a..cf5357cda1 100644 --- a/website/client/src/components/shops/buyModal.vue +++ b/website/client/src/components/shops/buyModal.vue @@ -315,7 +315,7 @@ .attributes-group { margin: 24px; - border-radius: 4px;; + border-radius: 4px; } .content { @@ -405,7 +405,7 @@ vertical-align: middle; &.gems { - color: $gems-color; + color: $green-10; border-radius: 20px; padding: 8px 20px 8px 20px; margin-top: 16px; @@ -414,7 +414,7 @@ } &.gold { - color: $gold-color; + color: $yellow-5; border-radius: 20px; padding: 8px 20px 8px 20px; margin-top: 16px; diff --git a/website/client/src/components/shops/market/sellModal.vue b/website/client/src/components/shops/market/sellModal.vue index d6148e8edf..e3851ac994 100644 --- a/website/client/src/components/shops/market/sellModal.vue +++ b/website/client/src/components/shops/market/sellModal.vue @@ -22,13 +22,11 @@ :item="item" :item-content-class="itemContextToSell.itemClass" :show-popover="false" - > - - + /> + + + {{ $t('owned') }}: {{ itemContextToSell.itemCount }} +

{{ itemContextToSell.itemName }}

@@ -106,7 +104,7 @@ } .modal-dialog { - width: 330px; + width: 448px;; } .content { @@ -118,6 +116,36 @@ width: 282px; } + .owned { + font-size: 0.75rem; + font-weight: bold; + line-height: 1.33; + background-color: $gray-600; + padding: 8px 41px; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; + display: block; + width: 141px; + margin-left: 70px; + margin-top: -36px; + position: relative; + z-index: 1; + } + + .item { + width: 141px; + height: 147px; + border-top-left-radius: 4px; + border-top-right-radius: 4px; + border-bottom-right-radius: 0px; + border-bottom-left-radius: 0px; + } + + .item-content { + transform: scale(1.45, 1.45); + top: -16px; + } + span.svg-icon.inline.icon-32 { height: 32px; width: 32px; @@ -225,14 +253,12 @@ import svgNegative from '@/assets/svg/negative.svg'; import BalanceInfo from '../balanceInfo.vue'; import Item from '@/components/inventory/item'; -import CountBadge from '@/components/ui/countBadge'; import numberIncrement from '@/components/shared/numberIncrement'; export default { components: { BalanceInfo, Item, - CountBadge, numberIncrement, }, data () {