chore: style fixes on on-ramp

Author: itsacoyote

views/on-ramp/QuoteFilter.vue

@@ -6,7 +6,7 @@
       :key="button"
       class="button"
       :class="{
-        selected: selectedFilters.some((filter) => groupedFilters[key].includes(filter)),
+        selected: selectedFilters.some((filter: any) => groupedFilters[key].includes(filter)),
       }"
       @click="applyFilter(key)"
     >
@@ -21,18 +21,12 @@ import type { PaymentMethod } from "zksync-easy-onramp";
 const buttons = {
   credit: "Credit",
   debit: "Debit",
-  transfer: "Transfer",
-  koywe: "Koywe",
-  sepa: "Sepa",
-  pix: "PIX",
+  transfer: "Bank Transfer",
 };
 const groupedFilters = ref<{ [k in string]: PaymentMethod[] }>({
   credit: ["apple_pay_credit", "google_pay_credit", "credit_card"],
   debit: ["apple_pay_debit", "google_pay_debit", "debit_card"],
-  transfer: ["wire", "ach"],
-  koywe: ["koywe"],
-  sepa: ["sepa"],
-  pix: ["pix"],
+  transfer: ["wire", "ach", "koywe", "sepa", "pix"],
 });
 const { quoteFilter: selectedFilters } = storeToRefs(useQuotesStore());
 const applyFilter = (filterKey: string) => {

views/on-ramp/QuotePreview.vue

@@ -28,8 +28,10 @@
           <img :src="quote.provider.iconUrl" class="h-8 w-8" />
         </div> -->
         <div class="payment-method inline-block text-right">
-          <div class="mb-1 text-xs text-gray-600 dark:text-gray-400">{{ parsePaymentMethod(quote.method) }}</div>
-          <div class="text-xs">via {{ provider.name }}</div>
+          <div class="mb-1 text-xs leading-5 text-gray-600 dark:text-gray-400">
+            {{ parsePaymentMethod(quote.method) }}
+          </div>
+          <div class="text-xs text-gray-700 dark:text-gray-300">via {{ provider.name }}</div>
           <!-- <div class="text-sm text-gray-600 dark:text-gray-300">{{ providerType }}</div> -->
         </div>
       </div>
@@ -140,7 +142,6 @@ function runQuote() {
 .provider-section {
   grid-area: provider;
   justify-self: end;
-  align-self: center;
 }
 
 .quote-grid {

views/on-ramp/QuotesList.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     id="list"
-    class="-mt-5 max-h-[380px] overflow-y-auto rounded-b-2xl bg-neutral-50 px-6 pb-10 pt-7 dark:bg-neutral-950"
+    class="-mt-5 max-h-[380px] overflow-y-auto rounded-b-2xl bg-neutral-50 px-6 pb-10 pt-7 dark:bg-transparent"
   >
     <div class="mb-2 flex flex-col">
       <div class="mb-2 text-lg font-bold">Choose on-ramp</div>