From fd7f3a646e48345878adc700d6d1958116c1eb23 Mon Sep 17 00:00:00 2001
From: CuriousMagpie <eilatan@gmail.com>
Date: Tue, 14 Feb 2023 17:22:05 -0500
Subject: [PATCH] add functionality and styling to sellModal and questModal

---
 .../client/src/components/shops/buyModal.vue  |  14 +-
 .../src/components/shops/market/sellModal.vue |  95 +++++++--
 .../components/shops/quests/buyQuestModal.vue | 185 +++++++++++++-----
 3 files changed, 230 insertions(+), 64 deletions(-)

diff --git a/website/client/src/components/shops/buyModal.vue b/website/client/src/components/shops/buyModal.vue
index 99110f71c8..08384510ed 100644
--- a/website/client/src/components/shops/buyModal.vue
+++ b/website/client/src/components/shops/buyModal.vue
@@ -17,7 +17,7 @@
     </span>
     <div>
       <span
-        class="svg-icon icon-12 close-icon"
+        class="svg-icon icon-16 close-icon"
         aria-hidden="true"
         tabindex="0"
         @click="hideDialog()"
@@ -320,7 +320,6 @@
     .content {
       text-align: center;
       width: 448px;
-      // box-sizing: border-box
     }
 
     .item-wrapper {
@@ -382,6 +381,13 @@
     span.svg-icon.inline.icon-20 {
       height: 20px;
       width: 20px;
+      margin-right: 4px;
+      vertical-align: middle;
+    }
+
+    span.svg-icon.inline.icon-16 {
+      height: 16px;
+      width: 16px;
       margin-right: 8px;
       vertical-align: middle;
     }
@@ -395,7 +401,6 @@
       font-size: 1.25rem;
       font-weight: bold;
       line-height: 1.4;
-
       vertical-align: middle;
 
       &.gems {
@@ -450,7 +455,7 @@
       font-weight: bold;
       height: 24px;
       width: 37px;
-      padding-right: 8px;
+      padding-right: 4px;
 
     button.btn.btn-primary {
       margin-top: 24px;
@@ -471,7 +476,6 @@
       margin-top: 8px;
       border-radius: 2px;
       background-color: $gray-500;
-
       margin: 10px 0 24px;
     }
 
diff --git a/website/client/src/components/shops/market/sellModal.vue b/website/client/src/components/shops/market/sellModal.vue
index 8b6329592f..d6148e8edf 100644
--- a/website/client/src/components/shops/market/sellModal.vue
+++ b/website/client/src/components/shops/market/sellModal.vue
@@ -6,7 +6,7 @@
   >
     <div class="close">
       <span
-        class="svg-icon inline icon-10"
+        class="svg-icon inline icon-16"
         aria-hidden="true"
         @click="hideDialog()"
         v-html="icons.close"
@@ -14,7 +14,7 @@
     </div>
     <div
       v-if="item"
-      class="content"
+      class="content bordered-item"
     >
       <div class="inner-content">
         <item
@@ -43,19 +43,36 @@
             <div class="text">
               {{ item.notes() }}
             </div>
+            <div class="item-cost">
+              <span class="cost gold">
+                <span
+                  class="svg-icon inline icon-24"
+                  aria-hidden="true"
+                  v-html="icons.gold"
+                ></span>
+                <span>{{ item.value }}</span>
+              </span>
+            </div>
             <div>
               <b class="how-many-to-sell">{{ $t('howManyToSell') }}</b>
             </div>
             <div>
-              <number-increment />
+              <number-increment
+                @updateQuantity="selectedAmountToSell = $event"
+              />
             </div>
             <div>
+              <span class="total-text">
+                {{ $t('sendTotal') }}
+              </span>
               <span
-                class="svg-icon inline icon-32"
+                class="svg-icon inline icon-20"
                 aria-hidden="true"
                 v-html="icons.gold"
               ></span>
-              <span class="value">{{ item.value }}</span>
+              <span class="total gold">
+                {{ item.value * selectedAmountToSell }}
+              </span>
             </div>
             <button
               class="btn btn-primary"
@@ -104,24 +121,72 @@
     span.svg-icon.inline.icon-32 {
       height: 32px;
       width: 32px;
-
       margin-left: 24px;
       margin-right: 8px;
-
       vertical-align: middle;
     }
 
-    .value {
-      width: 28px;
-      height: 32px;
-      font-size: 24px;
-      font-weight: bold;
-      line-height: 1.33;
-      color: #df911e;
-
+    span.svg-icon.inline.icon-24 {
+      height: 24px;
+      width: 24px;
+      margin-right: 8px;
       vertical-align: middle;
     }
 
+    span.svg-icon.inline.icon-20 {
+      height: 20px;
+      width: 20px;
+      margin-right: 4px;
+      vertical-align: middle;
+    }
+
+    span.svg-icon.inline.icon-16 {
+      height: 16px;
+      width: 16px;
+      margin-right: 8px;
+      vertical-align: middle;
+    }
+
+  .item-cost {
+    padding-bottom: 16px;
+    }
+
+    .cost {
+      height: 40px;
+      font-size: 1.25rem;
+      font-weight: bold;
+      line-height: 1.4;
+      vertical-align: middle;
+
+      &.gold {
+        color: $gold-color;
+        border-radius: 20px;
+        padding: 8px 20px 8px 20px;
+        margin-top: 16px;
+        margin-bottom: 16px;
+        background-color: rgba(255, 190, 93, 0.15);
+      }
+    }
+
+    .total {
+      font-size: 0.825rem;
+      line-height: 1.71;
+      font-weight: bold;
+
+      &.gold {
+        color: $gold-color;
+      }
+    }
+
+    .total-text {
+      font-size: 0.825rem;
+      line-height: 1.71;
+      font-weight: bold;
+      height: 24px;
+      width: 37px;
+      padding-right: 4px;
+    }
+
     button.btn.btn-primary {
       margin-top: 24px;
       margin-bottom: 24px;
diff --git a/website/client/src/components/shops/quests/buyQuestModal.vue b/website/client/src/components/shops/quests/buyQuestModal.vue
index 7f0971e349..0ba035164c 100644
--- a/website/client/src/components/shops/quests/buyQuestModal.vue
+++ b/website/client/src/components/shops/quests/buyQuestModal.vue
@@ -33,6 +33,22 @@
           v-if="!item.locked"
           class="purchase-amount"
         >
+          <div class="item-cost">
+            <span
+              class="cost"
+              :class="priceType"
+            >
+              <span
+                class="svg-icon inline icon-24"
+                aria-hidden="true"
+                v-html="icons[priceType]"
+              >
+              </span>
+              <span
+                :class="priceType"
+              >{{ item.value }}</span>
+            </span>
+          </div>
           <div class="how-many-to-buy">
             <strong>{{ $t('howManyToBuy') }}</strong>
           </div>
@@ -42,24 +58,25 @@
           >
             {{ item.addlNotes }}
           </div>
-          <div class="box">
-            <input
-              v-model.number="selectedAmountToBuy"
-              class="form-control"
-              type="number"
-              min="0"
-              step="1"
-            >
+          <div>
+            <number-increment
+              @updateQuantity="selectedAmountToBuy = $event"
+            />
+          </div>
+          <div>
+            <span class="total-text">
+              {{ $t('sendTotal') }}
+            </span>
+            <span
+              class="svg-icon inline icon-20"
+              aria-hidden="true"
+              v-html="currencyIcon"
+            ></span>
+            <span
+              class="total"
+              :class="priceType"
+            >{{ item.value * selectedAmountToBuy }}</span>
           </div>
-          <span
-            class="svg-icon inline icon-32"
-            aria-hidden="true"
-            v-html="currencyIcon"
-          ></span>
-          <span
-            class="value"
-            :class="priceType"
-          >{{ item.value }}</span>
         </div>
         <button
           v-if="priceType === 'gems'
@@ -152,13 +169,6 @@
       height: 100%;
     }
 
-    span.svg-icon.inline.icon-32 {
-      height: 32px;
-      width: 32px;
-      margin-right: 8px;
-      vertical-align: middle;
-    }
-
     button.btn.btn-primary {
       margin-top: 24px;
       margin-bottom: 24px;
@@ -198,28 +208,115 @@
         margin-bottom: 16px;
       }
 
-      .box {
-        display: inline-block;
-        width: 74px;
-        height: 40px;
-        border-radius: 2px;
-        background-color: #ffffff;
-        box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
-        margin-right: 24px;
-
-        input {
-          width: 100%;
-          border: none;
+      .item-cost {
+        padding-bottom: 16px;
         }
 
-        input::-webkit-contacts-auto-fill-button {
-          visibility: hidden;
-          display: none !important;
-          pointer-events: none;
-          position: absolute;
-          right: 0;
+        .cost {
+          height: 40px;
+          font-size: 1.25rem;
+          font-weight: bold;
+          line-height: 1.4;
+          vertical-align: middle;
+
+          &.gems {
+            color: $gems-color;
+            border-radius: 20px;
+            padding: 8px 20px 8px 20px;
+            margin-top: 16px;
+            margin-bottom: 16px;
+            background-color: rgba(36, 204, 143, 0.15);
+          }
+
+          &.gold {
+            color: $gold-color;
+            border-radius: 20px;
+            padding: 8px 20px 8px 20px;
+            margin-top: 16px;
+            margin-bottom: 16px;
+            background-color: rgba(255, 190, 93, 0.15);
+          }
+
+          &.hourglasses {
+            color: $hourglass-color;
+            border-radius: 20px;
+            padding: 8px 20px 8px 20px;
+            margin-top: 16px;
+            margin-bottom: 16px;
+            background-color: rgba(41, 149, 205, 0.15);
+      }
+        }
+
+      .total {
+        font-size: 0.825rem;
+        line-height: 1.71;
+        font-weight: bold;
+
+        &.gold {
+          color: $gold-color;
+        }
+
+        &.gems {
+          color: $gems-color;
+        }
+
+        & .hourglasses {
+          color: $hourglass-color;
         }
       }
+
+      .total-text {
+        font-size: 0.825rem;
+        line-height: 1.71;
+        font-weight: bold;
+        height: 24px;
+        width: 37px;
+        padding-right: 4px;
+      }
+
+  span.svg-icon.inline.icon-20 {
+      height: 20px;
+      width: 20px;
+      margin-right: 4px;
+      vertical-align: middle;
+    }
+
+  span.svg-icon.inline.icon-24 {
+    height: 24px;
+    width: 24px;
+    margin-right: 8px;
+    vertical-align: middle;
+  }
+
+  span.svg-icon.inline.icon-32 {
+    height: 32px;
+    width: 32px;
+    margin-right: 8px;
+    vertical-align: middle;
+  }
+
+      // .box {
+      //   display: inline-block;
+      //   width: 74px;
+      //   height: 40px;
+      //   border-radius: 2px;
+      //   background-color: #ffffff;
+      //   box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
+      //   margin-right: 24px;
+
+      //   input {
+      //     width: 100%;
+      //     border: none;
+      //   }
+
+      //   input::-webkit-contacts-auto-fill-button {
+      //     visibility: hidden;
+      //     display: none !important;
+      //     pointer-events: none;
+      //     position: absolute;
+      //     right: 0;
+      //   }
+      // }
     }
 
     @media only screen and (max-width: 1000px) {
@@ -282,7 +379,7 @@ import buyMixin from '@/mixins/buy';
 import numberInvalid from '@/mixins/numberInvalid';
 import PinBadge from '@/components/ui/pinBadge';
 import CountdownBanner from '../countdownBanner';
-// import numberIncrement from '@/components/shared/numberIncrement';
+import numberIncrement from '@/components/shared/numberIncrement';
 
 import questDialogContent from './questDialogContent';
 import QuestRewards from './questRewards';
@@ -296,7 +393,7 @@ export default {
     PinBadge,
     questDialogContent,
     CountdownBanner,
-    // numberIncrement,
+    numberIncrement,
   },
   mixins: [buyMixin, currencyMixin, notifications, numberInvalid],
   props: {