fix: credit topup

app/javascript/dashboard/i18n/locale/en/settings.json

@@ -462,7 +462,9 @@
     },
     "TOPUP_OPTIONS": {
       "TITLE": "Top-up Credits",
-      "CREDITS": "credits",
+      "DESCRIPTION": "Add more credits to your account, to ensure uninterrupted Captain usage.",
+      "CREDITS": "Credits",
+      "PRICE": "Price",
       "BUY_NOW": "Buy Now",
       "NO_OPTIONS": "No top-up options available.",
       "TOPUP_SUCCESS": "Credits added successfully! Your new balance is available now.",

app/javascript/dashboard/routes/dashboard/settings/billing-v2/components/CreditsBalance.vue

@@ -48,7 +48,7 @@ const formatAmount = amount => {
 <template>
   <div class="rounded-xl mx-5 mt-5">
     <div
-      class="flex gap-6 mb-4 items-center justify-evenly rounded-xl bg-n-slate-2 px-4 py-3"
+      class="flex gap-6 mb-4 items-center justify-evenly rounded-xl dark:bg-n-solid-1 bg-n-slate-2 px-4 py-3"
     >
       <div>
         <p class="text-xs text-n-slate-11 mb-1">

app/javascript/dashboard/routes/dashboard/settings/billing-v2/components/TopupOptions.vue

@@ -67,55 +67,69 @@ const handleTopup = async data => {
 </script>
 
 <template>
-  <div class="mt-4">
-    <h6 class="text-base font-semibold mb-2">
-      {{ t('BILLING_SETTINGS_V2.TOPUP_OPTIONS.TITLE') }}
-    </h6>
-    <div class="grid gap-3 grid-cols-1 xs:grid-cols-2 xl:grid-cols-4">
+  <div
+    class="mt-4 grid grid-cols-3 gap-5 p-4 dark:bg-n-solid-1 bg-n-slate-2 rounded-lg"
+  >
+    <div class="col-span-1">
+      <h6 class="text-base font-semibold mb-2">
+        {{ t('BILLING_SETTINGS_V2.TOPUP_OPTIONS.TITLE') }}
+      </h6>
+      <p class="col-span-2 text-n-slate-11">
+        {{ t('BILLING_SETTINGS_V2.TOPUP_OPTIONS.DESCRIPTION') }}
+      </p>
+      <p class="col-span-2 text-n-slate-11">
+        {{ t('BILLING_SETTINGS_V2.TOPUP_MODAL.INFO') }}
+      </p>
+    </div>
+    <div class="grid grid-cols-2 col-span-2 gap-3 group">
       <div
         v-for="option in options"
         :key="option.id"
-        class="p-4 -outline-offset-1 outline outline-1 outline-n-weak rounded-lg hover:outline-n-strong hover:shadow-sm transition-all cursor-pointer"
+        class="p-4 bg-n-background group-hover:opacity-50 hover:!opacity-100 shadow-sm outline outline-1 outline-n-weak rounded-lg transition-all cursor-pointer"
         @click="openTopupDialog(option)"
       >
-        <div class="text-center">
-          <div class="text-3xl font-bold text-b-800">
-            {{ formatNumber(option.credits) }}
+        <div class="flex gap-8">
+          <div>
+            <div class="text-xs tracking-wide">
+              {{ $t('BILLING_SETTINGS_V2.TOPUP_OPTIONS.CREDITS') }}
+            </div>
+            <div class="text-lg font-semibold">
+              {{ formatNumber(option.credits) }}
+            </div>
           </div>
-          <div class="mt-1 text-xs text-n-600 uppercase tracking-wide">
-            {{ $t('BILLING_SETTINGS_V2.TOPUP_OPTIONS.CREDITS') }}
+          <div>
+            <div class="text-xs tracking-wide">
+              {{ $t('BILLING_SETTINGS_V2.TOPUP_OPTIONS.PRICE') }}
+            </div>
+            <div class="text-lg font-semibold">
+              {{ formatPrice(option.price) }}
+            </div>
           </div>
-          <div class="mt-3 text-2xl font-bold text-n-800">
-            {{ formatPrice(option.price) }}
-          </div>
-          <p v-if="option.description" class="mt-2 text-xs text-n-600">
-            {{ option.description }}
-          </p>
-          <Button
-            class="w-full mt-4"
-            sm
-            solid
-            blue
-            @click.stop="openTopupDialog(option)"
-          >
-            {{ $t('BILLING_SETTINGS_V2.TOPUP_OPTIONS.BUY_NOW') }}
-          </Button>
         </div>
+        <Button
+          class="w-full mt-4"
+          sm
+          slate
+          faded
+          @click.stop="openTopupDialog(option)"
+        >
+          {{ $t('BILLING_SETTINGS_V2.TOPUP_OPTIONS.BUY_NOW') }}
+        </Button>
+      </div>
+
+      <div v-if="options.length === 0 && !isLoading" class="py-8 text-center">
+        <p class="text-sm">
+          {{ $t('BILLING_SETTINGS_V2.TOPUP_OPTIONS.NO_OPTIONS') }}
+        </p>
       </div>
     </div>
 
-    <div v-if="options.length === 0 && !isLoading" class="py-8 text-center">
-      <p class="text-sm text-n-600">
-        {{ $t('BILLING_SETTINGS_V2.TOPUP_OPTIONS.NO_OPTIONS') }}
-      </p>
-    </div>
+    <TopupDialog
+      v-if="selectedOption"
+      ref="topupDialogRef"
+      :option="selectedOption"
+      :is-processing="isProcessing"
+      @topup="handleTopup"
+    />
   </div>
-
-  <TopupDialog
-    v-if="selectedOption"
-    ref="topupDialogRef"
-    :option="selectedOption"
-    :is-processing="isProcessing"
-    @topup="handleTopup"
-  />
 </template>