update to sellModal, buyModal, and questDialogContent.vue

website/client/src/components/shops/buyModal.vue

@@ -113,7 +113,7 @@
             class="how-many-to-buy"
             :hidden="attemptingToPurchaseMoreGemsThanAreLeft"
           >
-            <strong>{{ $t('howManyToBuy') }}</strong>
+            {{ $t('howManyToBuy') }}
           </div>
           <div
             v-if="showAmountToBuy(item)"
@@ -376,10 +376,9 @@
     .purchase-amount {
       margin-top: 0px;
 
-      // .how-many-to-buy {
+      .how-many-to-buy {
-      //   margin-top: 24px;
+        font-weight: bold !important;
-      //   height: 24px;
+      }
-      // }
 
       .number-increment {
         margin-top: 16px;
@@ -458,7 +457,6 @@
       margin-top: 28px;
       border-radius: 2px;
       background-color: $gray-500;
-      // margin: 10px 0 24px;
     }
 
     .item-cost {

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

@@ -67,7 +67,7 @@
                 {{ $t('sendTotal') }}
               </span>
               <span
-                class="svg-icon inline icon-24"
+                class="svg-icon total icon-24"
                 aria-hidden="true"
                 v-html="icons.gold"
               ></span>
@@ -209,26 +209,22 @@
        font-size: 0.875rem;
     }
 
-    span.svg-icon.inline.icon-32 {
+// for cost icon of a single item
-      height: 32px;
-      width: 32px;
-      margin-left: 24px;
-      margin-right: 8px;
-      vertical-align: middle;
-    }
-
     span.svg-icon.inline.icon-24 {
+      display: inline-block;
       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;
+      padding-top: 4px;
+    }
+// for the total user cost
+    span.svg-icon.total.icon-24 {
+      display: inline-block;
+      height: 24px;
+      width: 24px;
+      margin-left: 6px;
+      margin-right: 8px;
+      padding-top: 6px;
     }
 
     span.svg-icon.icon-16 {
@@ -247,38 +243,35 @@
     }
 
   .item-cost {
-     display: inner-flex;
+      display: inline-flex;
-     margin-top: 20px;
+      margin: 16px 0;
+      align-items: center;
+      height: 40px;
     }
 
     .cost {
-      height: 40px;
+      display: inline-block;
+      font-family: sans-serif;
       font-size: 1.25rem;
       font-weight: bold;
-      vertical-align: middle;
       padding: 6px 20px;
-      display: inline-flex;
+      line-height: 1.4;
+      border-radius: 20px;
 
       &.gold {
         color: $yellow-5;
         background-color: rgba(255, 190, 93, 0.15);
-        line-height: 1.4;
+        align-items: center;
-        margin-left: -4px;
-        border-radius: 20px;
-        display: inline-block;
       }
     }
   }
 
   .how-many-to-sell {
-    margin-top: 24px;
-    display: block;
-    font-size: 0.875rem;
     font-weight: bold !important;
   }
 
   .number-increment {
-     margin-top: 14px;
+     margin-top: 16px;
   }
 
   .total-row {
@@ -295,10 +288,7 @@
       color: $gray-50;
       font-weight: bold;
       font-size: 0.875rem;
-      height: 24px;
       line-height: 1.71;
-      margin-right: 4px;
-      margin-left: -4px;
 
     &.gold {
       color: $yellow-5;

website/client/src/components/shops/quests/questDialogContent.vue

@@ -33,17 +33,17 @@
 
   h3 {
     color: $gray-10;
-    margin-bottom: 0.25rem;
+    margin-bottom: 4pxrem;
   }
 
   .quest-image {
     margin: 0 auto;
-    margin-bottom: 1em;
+    margin-bottom: 16px;
-    margin-top: 1.5em;
+    margin-top: 24px;
   }
 
   .text {
-    margin-bottom: 1rem;
+    margin: 16px 16px;
     overflow-y: auto;
     text-overflow: ellipsis;
   }
@@ -54,10 +54,10 @@
     line-height: 1.71;
     color: $gray-50;
     text-align: center;
-    margin-bottom: 0.5rem;
+    margin-bottom: 8px;
 
     ::v-deep .user-label {
-      font-size: 14px;
+      font-size: 0.875rem;
     }
   }