updates to snumberIncrement, buyModal, and sellModal

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;

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;

website/client/src/components/shops/market/sellModal.vue

@@ -22,13 +22,11 @@
           :item="item"
           :item-content-class="itemContextToSell.itemClass"
           :show-popover="false"
-        >
-          <countBadge
-            slot="itemBadge"
-            :show="true"
-            :count="itemContextToSell.itemCount"
-          />
-        </item>
+        />
+        <span class="owned">
+          <!-- need to calculate totalOwned()  -->
+          {{ $t('owned') }}: {{ itemContextToSell.itemCount }}
+        </span>
         <h4 class="title">
           {{ itemContextToSell.itemName }}
         </h4>
@@ -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 () {