From cc81629f09d0d2bfb453bd105ecf1e2219fd09f2 Mon Sep 17 00:00:00 2001
From: CuriousMagpie <eilatan@gmail.com>
Date: Sat, 18 Mar 2023 17:18:41 -0400
Subject: [PATCH] updates to buyModal styling

---
 .../src/components/shared/numberIncrement.vue |  2 +-
 .../client/src/components/shops/buyModal.vue  | 21 ++++++--
 .../src/components/shops/market/sellModal.vue | 48 ++++++++++++++-----
 website/common/locales/en/npc.json            |  1 +
 4 files changed, 56 insertions(+), 16 deletions(-)

diff --git a/website/client/src/components/shared/numberIncrement.vue b/website/client/src/components/shared/numberIncrement.vue
index e1fa888927..b2fd5f989c 100644
--- a/website/client/src/components/shared/numberIncrement.vue
+++ b/website/client/src/components/shared/numberIncrement.vue
@@ -79,7 +79,7 @@
   .icon-positive, .icon-negative {
     width: 10px;
     height: 10px;
-    margin: 3px auto;
+    margin: 4px 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 cf5357cda1..15cd56e0d8 100644
--- a/website/client/src/components/shops/buyModal.vue
+++ b/website/client/src/components/shops/buyModal.vue
@@ -269,7 +269,7 @@
     }
 
     .modal-dialog {
-      width: 448px;;
+      width: 448px;
       box-sizing: border-box;
     }
 
@@ -301,6 +301,12 @@
       border-top-right-radius: 4px;
       border-bottom-right-radius: 0px;
       border-bottom-left-radius: 0px;
+      cursor: default;
+    }
+
+    .title {
+      color: $gray-10;
+      font-size: 1.25rem;
     }
 
     .item-content {
@@ -386,11 +392,18 @@
       vertical-align: middle;
     }
 
-    span.svg-icon.inline.icon-16 {
+    span.svg-icon.icon-16 {
       height: 16px;
       width: 16px;
-      margin-right: 8px;
-      vertical-align: middle;
+    }
+
+    .close-icon {
+      fill: $gray-200;
+      stroke-width: 0px;
+
+      &:hover {
+        fill: $gray-100;
+      }
     }
 
     .item-cost {
diff --git a/website/client/src/components/shops/market/sellModal.vue b/website/client/src/components/shops/market/sellModal.vue
index e3851ac994..3cca50d365 100644
--- a/website/client/src/components/shops/market/sellModal.vue
+++ b/website/client/src/components/shops/market/sellModal.vue
@@ -31,14 +31,14 @@
           {{ itemContextToSell.itemName }}
         </h4>
         <div v-if="item.key === 'Saddle'">
-          <div class="text">
+          <div class="item-notes">
             {{ item.sellWarningNote() }}
           </div>
           <br>
         </div>
         <div v-else>
           <div>
-            <div class="text">
+            <div class="item-notes">
               {{ item.notes() }}
             </div>
             <div class="item-cost">
@@ -52,7 +52,11 @@
               </span>
             </div>
             <div>
-              <b class="how-many-to-sell">{{ $t('howManyToSell') }}</b>
+              <span
+                class="how-many-to-sell"
+              >
+                {{ $t('howManyToSell') }}
+              </span>
             </div>
             <div>
               <number-increment
@@ -76,7 +80,7 @@
               class="btn btn-primary"
               @click="sellItems()"
             >
-              {{ $t('sell') }}
+              {{ $t('sellItems') }}
             </button>
           </div>
         </div>
@@ -104,13 +108,19 @@
     }
 
     .modal-dialog {
-      width: 448px;;
+      width: 448px;
     }
 
     .content {
       text-align: center;
 
     }
+
+    .title {
+      color: $gray-10;
+      font-size: 1.25rem;
+    }
+
     .inner-content {
       margin: 33px auto auto;
       width: 282px;
@@ -126,8 +136,8 @@
       border-bottom-left-radius: 4px;
       display: block;
       width: 141px;
-      margin-left: 70px;
-      margin-top: -36px;
+      margin-left: 71px;
+      margin-top: -48px;
       position: relative;
       z-index: 1;
     }
@@ -139,11 +149,18 @@
       border-top-right-radius: 4px;
       border-bottom-right-radius: 0px;
       border-bottom-left-radius: 0px;
+      cursor: default;
+      margin-top: 8px;
     }
 
     .item-content {
       transform: scale(1.45, 1.45);
-      top: -16px;
+      top: -16pp;
+    }
+
+    .item-notes {
+     line-height: 1.71;
+     margin-bottom: 16px;
     }
 
     span.svg-icon.inline.icon-32 {
@@ -168,11 +185,18 @@
       vertical-align: middle;
     }
 
-    span.svg-icon.inline.icon-16 {
+    span.svg-icon.icon-16 {
       height: 16px;
       width: 16px;
-      margin-right: 8px;
-      vertical-align: middle;
+    }
+
+    .close {
+      fill: $gray-200;
+      stroke-width: 0px;
+
+      &:hover {
+        fill: $gray-100;
+      }
     }
 
   .item-cost {
@@ -240,6 +264,8 @@
     .how-many-to-sell {
       margin-bottom: 16px;
       display: block;
+      font-size: 0.875rem;
+      font-weight: bold;
     }
   }
 </style>
diff --git a/website/common/locales/en/npc.json b/website/common/locales/en/npc.json
index 0ebe1a9b7f..8688c0f12c 100644
--- a/website/common/locales/en/npc.json
+++ b/website/common/locales/en/npc.json
@@ -31,6 +31,7 @@
   "howManyToSell": "How many would you like to sell?",
   "yourBalance": "Your balance:",
   "sell": "Sell",
+  "sellItems": "Sell Items",
   "buyNow": "Buy Now",
   "sortByNumber": "Number",
   "featuredItems": "Featured Items!",