From c1a0f8a8d162ace682ab7e79abde39f9f6fb4c7b Mon Sep 17 00:00:00 2001
From: CuriousMagpie <eilatan@gmail.com>
Date: Tue, 28 Mar 2023 15:07:49 -0400
Subject: [PATCH] style: buyModal, sellModal, buyQuestModal, questRewards

---
 .../client/src/components/shops/buyModal.vue  | 114 ++++++------
 .../src/components/shops/market/sellModal.vue | 174 +++++++++++-------
 .../components/shops/quests/buyQuestModal.vue | 158 ++++++++++------
 .../components/shops/quests/questRewards.vue  |   3 -
 4 files changed, 267 insertions(+), 182 deletions(-)

diff --git a/website/client/src/components/shops/buyModal.vue b/website/client/src/components/shops/buyModal.vue
index 086b556a2a..8b279be27c 100644
--- a/website/client/src/components/shops/buyModal.vue
+++ b/website/client/src/components/shops/buyModal.vue
@@ -256,7 +256,7 @@
       border-bottom-right-radius: 8px;
       border-bottom-left-radius: 8px;
       display: block;
-      margin: 24px 0 0;
+      margin: 0;
       padding: 16px 24px;
       align-content: center;
 
@@ -332,6 +332,12 @@
       transform: scale(1.45, 1.45);
       top: -25.67px;
       left: 1px;
+
+      &.shop_gem {
+        transform: scale(1.45, 1.45);
+        top: -2px;
+       left: 0px;
+      }
     }
 
     .title {
@@ -347,7 +353,7 @@
        padding-left: 48.5px;
        padding-right: 48.5px;
        line-height: 1.71;
-       font-size: 0.875;
+       font-size: 0.875rem;
     }
 
     .content {
@@ -443,12 +449,19 @@
     }
 
     .attributes-group {
-      margin: 24px;
+      margin: 32px;
       border-radius: 4px;
       line-height: 1.71;
       font-size: 0.875;
     }
 
+    .attributesGrid {
+      margin-top: 28px;
+      border-radius: 2px;
+      background-color: $gray-500;
+      // margin: 10px 0 24px;
+    }
+
     .cost {
       height: 40px;
       font-size: 1.25rem;
@@ -484,7 +497,7 @@
     .total {
       font-weight: bold;
       font-size: 0.875rem;
-      margin-top:16px;
+      margin-top: 16px;
 
       &.gems {
         color: $green-10;
@@ -528,66 +541,59 @@
       &:focus {
         border: 2px solid black;
       }
-
-
-    .notEnough {
-      pointer-events: none;
-      opacity: 0.55;
     }
 
-    .attributesGrid {
-      margin-top: 8px;
-      border-radius: 2px;
-      background-color: $gray-500;
-      margin: 10px 0 24px;
-    }
+      .notEnough {
+        pointer-events: none;
+        opacity: 0.55;
+      }
+
+
+      .gems-left {
+        margin-top: .5em;
+      }
+
+      .free-rebirth {
+        background-color: $yellow-5;
+        color: $white;
+        height: 2rem;
+        line-height: 16px;
+        margin: auto -1rem -1rem;
+      }
+
+      // .pt-015 {
+      //   padding-top: 0.15rem;
+      // }
+
 
     .gems-left {
-      margin-top: .5em;
+      height: 32px;
+      background-color: $green-100;
+      font-size: 0.75rem;
+      margin-top: 24px;
+      color: $green-1;
+      width: 100%;
     }
 
-    .free-rebirth {
-      background-color: $yellow-5;
+    .out-of-gems-banner {
+      height: 32px;
+      font-size: 0.75rem;
+      margin-top: 24px;
+      background-color: $yellow-100;
+      color: $yellow-1;
+      width: 100%;
+    }
+
+    .limitedTime {
+      height: 32px;
+      width: 446px;
+      font-size: 0.75rem;
+      margin: 24px 0 0 0;
+      background-color: $purple-300;
       color: $white;
-      height: 2rem;
-      line-height: 16px;
-      margin: auto -1rem -1rem;
     }
-
-    // .pt-015 {
-    //   padding-top: 0.15rem;
-    // }
   }
 
-  .gems-left {
-    height: 32px;
-    background-color: $green-100;
-    font-size: 0.75rem;
-    margin-top: 24px;
-    margin-bottom: -40px;
-    color: $green-1;
-    width: 100%;
-  }
-
-  .out-of-gems-banner {
-    height: 32px;
-    font-size: 0.75rem;
-    margin-top: 24px;
-    margin-bottom: -40px;
-    background-color: $yellow-100;
-    color: $yellow-1;
-    width: 100%;
-  }
-
-  .limitedTime {
-    height: 32px;
-    width: 446px;
-    font-size: 0.75rem;
-    margin: 24px 0 -40px 0;
-    background-color: $purple-300;
-    color: $white;
-  }
-}
 </style>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/shops/market/sellModal.vue b/website/client/src/components/shops/market/sellModal.vue
index 0b5be8d77d..8108bf9c2f 100644
--- a/website/client/src/components/shops/market/sellModal.vue
+++ b/website/client/src/components/shops/market/sellModal.vue
@@ -71,7 +71,7 @@
                 aria-hidden="true"
                 v-html="icons.gold"
               ></span>
-              <span class="total gold">
+              <span class="total-text gold">
                 {{ item.value * selectedAmountToSell }}
               </span>
             </div>
@@ -89,9 +89,9 @@
       slot="modal-footer"
       class="clearfix"
     >
-      <span class="balance float-left">{{ $t('yourBalance') }}</span>
+      <span class="user-balance float-left">{{ $t('yourBalance') }}</span>
       <balanceInfo
-        class="float-right"
+        class="float-right currency-totals"
       />
     </div>
   </b-modal>
@@ -112,14 +112,42 @@
       width: 448px;
     }
 
-    .content {
-      text-align: center;
+    .modal-body {
+      padding-left: 0px;
+      padding-right: 0px;
+      padding-bottom: 0px;
     }
 
-    .title {
-      color: $gray-10;
-      font-size: 1.25rem;
-      margin-top: 28px;
+    .modal-footer {
+      height: 48px;
+      background-color: $gray-700;
+      border-bottom-right-radius: 8px;
+      border-bottom-left-radius: 8px;
+      display: block;
+      margin: 24px 0 0;
+      padding: 16px 24px;
+      align-content: center;
+
+      .user-balance {
+        width: 150px;
+        height: 16px;
+        font-size: 0.75rem;
+        font-weight: bold;
+        line-height: 1.33;
+        color: $gray-100;
+        margin-bottom: 16px;
+        margin-top: -4px;
+        margin-left: -4px;
+      }
+
+      .currency-totals {
+        margin-right: -8px;
+        float: right;
+      }
+    }
+
+    .content {
+      text-align: center;
     }
 
     .inner-content {
@@ -160,12 +188,22 @@
 
     .item-content {
       transform: scale(1.45, 1.45);
-      top: -16px;
+      top: -25px;
+      left: 1px;
+    }
+
+    .title {
+      color: $gray-10;
+      font-size: 1.25rem;
+      margin-top: 26px;
+      margin-bottom: 0px;
     }
 
     .item-notes {
-     line-height: 1.71;
-     margin-bottom: 16px;
+       height: 48px;
+       margin-top: 12px;
+       line-height: 1.71;
+       font-size: 0.875rem;
     }
 
     span.svg-icon.inline.icon-32 {
@@ -208,82 +246,80 @@
   .item-cost {
     padding-bottom: 16px;
     padding-top: 8px;
+    margin-top: 12px;
     }
 
     .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-row {
-      padding-top: 4px;
-      padding-bottom: 4px;
-    }
-
-    .total {
-      font-size: 0.875rem;
-      line-height: 1.71;
-      font-weight: bold;
+      padding: 8px 20px 8px 20px;
 
       &.gold {
         color: $yellow-5;
-        margin-left: -4px;
+        background-color: rgba(255, 190, 93, 0.15);
+        line-height: 1.4;
+        margin: 0 0 0 -4px;
+        border-radius: 20px;
       }
     }
+  }
+
+  .how-many-to-sell {
+    margin-top: 12px;
+    display: block;
+    font-size: 0.875rem;
+    font-weight: bold !important;
+  }
+
+  .number-increment {
+     margin-top: 14px;
+  }
+
+  .total-row {
+    font-weight: bold;
+    font-size: 0.875rem;
+    margin-top: 16px;
+
+    &.gold {
+      color: $yellow-5;
+    }
+  }
 
     .total-text {
       color: $gray-50;
-      font-size: 0.825rem;
       font-weight: bold;
-      line-height: 1.71;
-      height: 24px;
-      width: 37px;
-      padding-right: 4px;
-      // margin-left: -4px;
-    }
-
-    button.btn.btn-primary {
-      margin-top: 16px;
-      margin-bottom: 0px;
-    }
-
-    .balance {
-      width: 74px;
-      height: 16px;
-      font-size: 12px;
-      font-weight: bold;
-      line-height: 1.33;
-      color: $gray-200;
-    }
-
-    .modal-footer {
-      height: 48px;
-      background-color: $gray-700;
-      border-bottom-right-radius: 8px;
-      border-bottom-left-radius: 8px;
-      display: block;
-    }
-
-    .how-many-to-sell {
-      margin-bottom: 16px;
-      margin-top: 8px;
-      display: block;
       font-size: 0.875rem;
-      font-weight: bold;
+      height: 24px;
+      line-height: 1.71;
+      padding-right: 4px;
+
+    &.gold {
+      color: $yellow-5;
     }
   }
+
+  button.btn.btn-primary {
+    margin-top: 14px;
+    padding: 4px 16px;
+    height: 32px;
+
+    &:focus {
+      border: 2px solid black;
+    }
+
+  .balance {
+    width: 74px;
+    height: 16px;
+    font-size: 12px;
+    font-weight: bold;
+    line-height: 1.33;
+    color: $gray-200;
+  }
+
+
+}
 </style>
 
 <script>
diff --git a/website/client/src/components/shops/quests/buyQuestModal.vue b/website/client/src/components/shops/quests/buyQuestModal.vue
index b9e97ecbd7..c422199b2d 100644
--- a/website/client/src/components/shops/quests/buyQuestModal.vue
+++ b/website/client/src/components/shops/quests/buyQuestModal.vue
@@ -63,7 +63,7 @@
               @updateQuantity="selectedAmountToBuy = $event"
             />
           </div>
-          <div>
+          <div class="total-row">
             <span class="total-text">
               {{ $t('sendTotal') }}
             </span>
@@ -129,6 +129,40 @@
       margin-top: 1rem;
     }
 
+    .modal-body {
+      padding-left: 0px;
+      padding-right: 0px;
+      padding-bottom: 0px;
+    }
+
+    .modal-footer {
+      height: 48px;
+      background-color: $gray-700;
+      border-bottom-right-radius: 8px;
+      border-bottom-left-radius: 8px;
+      display: block;
+      margin-top: 24px;
+      padding: 16px 24px;
+      align-content: center;
+
+      .user-balance {
+        width: 150px;
+        height: 16px;
+        font-size: 0.75rem;
+        font-weight: bold;
+        line-height: 1.33;
+        color: $gray-100;
+        margin-bottom: 16px;
+        margin-top: -4px;
+        margin-left: -4px;
+      }
+
+      .currency-totals {
+        margin-right: -8px;
+        float: right;
+      }
+    }
+
     .modal-dialog {
       margin-top: 8%;
       width: 448px !important;
@@ -146,8 +180,13 @@
       margin: 33px auto auto;
     }
 
-    .modal-body {
-      padding-bottom: 0px;
+    .item-notes {
+      height: 48px;
+      margin-top: 8px;
+      padding-left: 48.5px;
+      padding-right: 48.5px;
+      line-height: 1.71;
+      font-size: 0.875rem;
     }
 
     .questInfo {
@@ -170,8 +209,13 @@
     }
 
     button.btn.btn-primary {
-      margin-top: 24px;
-      margin-bottom: 24px;
+      margin-top: 14px;
+      padding: 4px 16px;
+      height: 32px;
+
+      &:focus {
+        border: 2px solid black;
+      }
     }
 
     .balance {
@@ -183,19 +227,6 @@
       color: $gray-200;
     }
 
-    .modal-footer {
-      height: 48px;
-      background-color: $gray-700;
-      border-bottom-right-radius: 8px;
-      border-bottom-left-radius: 8px;
-      display: block;
-      padding: 1rem 1.5rem;
-
-      &> * {
-        margin: 0;
-      }
-    }
-
     .notEnough {
       pointer-events: none;
       opacity: 0.55;
@@ -216,62 +247,76 @@
           height: 40px;
           font-size: 1.25rem;
           font-weight: bold;
-          line-height: 1.4;
           vertical-align: middle;
+          padding: 8px 20px 8px 20px;
 
           &.gems {
-            color: $gems-color;
-            border-radius: 20px;
-            padding: 8px 20px 8px 20px;
-            margin-top: 16px;
-            margin-bottom: 16px;
+            color: $green-10;
             background-color: rgba(36, 204, 143, 0.15);
+            line-height: 1.4;
+            margin: 0 0 0 -4px;
+            border-radius: 20px;
           }
 
           &.gold {
-            color: $gold-color;
-            border-radius: 20px;
-            padding: 8px 20px 8px 20px;
-            margin-top: 16px;
-            margin-bottom: 16px;
+            color: $yellow-5;
             background-color: rgba(255, 190, 93, 0.15);
+            line-height: 1.4;
+            margin: 0 0 0 -4px;
+            border-radius: 20px;
           }
 
           &.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);
-      }
-        }
+            line-height: 1.4;
+            margin: 0 0 0 -4px;
+            border-radius: 20px;
+            }
+          }
 
-      .total {
-        font-size: 0.825rem;
-        line-height: 1.71;
-        font-weight: bold;
+    .total-row {
+      font-weight: bold;
+      font-size: 0.875rem;
+      margin-top: 16px;
+    }
 
-        &.gold {
-          color: $gold-color;
-        }
+    .total {
+      font-weight: bold;
+      font-size: 0.875rem;
+      margin-top: 16px;
 
-        &.gems {
-          color: $gems-color;
-        }
-
-        & .hourglasses {
-          color: $hourglass-color;
-        }
+      &.gems {
+        color: $green-10;
       }
 
-      .total-text {
-        font-size: 0.825rem;
-        line-height: 1.71;
-        font-weight: bold;
-        height: 24px;
-        width: 37px;
-        padding-right: 4px;
+      &.gold {
+        color: $yellow-5;
+      }
+
+      &.hourglasses {
+        color: $hourglass-color;
+      }
+    }
+
+    .total-text {
+      color: $gray-50;
+      font-weight: bold;
+      font-size: 0.875rem;
+      height: 24px;
+      line-height: 1.71;
+      padding-right: 4px;
+
+      &.gems {
+        color: $green-10;
+      }
+
+      &.gold {
+        color: $yellow-5;
+      }
+
+      &.hourglasses {
+        color: $hourglass-color;
       }
     }
 
@@ -308,6 +353,7 @@
       }
     }
   }
+}
 </style>
 
 <!-- <style lang="scss" scoped>
diff --git a/website/client/src/components/shops/quests/questRewards.vue b/website/client/src/components/shops/quests/questRewards.vue
index abba5bcc6a..21568f3bfa 100644
--- a/website/client/src/components/shops/quests/questRewards.vue
+++ b/website/client/src/components/shops/quests/questRewards.vue
@@ -177,9 +177,6 @@ export default {
   @import '~@/assets/scss/colors.scss';
 
   .quest-rewards {
-    margin-left: -1rem;
-    margin-right: -1rem;
-
     background-color: $gray-700;
   }