fix: UX nits and styles (#7933)

## Summary

- Fix UX nits

## Screenshots


https://github.com/user-attachments/assets/f224a710-5cfd-4aad-a617-20ec56a37370

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7933-fix-UX-nits-and-styles-2e36d73d365081379a48e1030b7d4340)
by [Unito](https://www.unito.io)

src/components/dialog/content/TopUpCreditsDialogContent.vue

@@ -95,22 +95,23 @@
 
     <p
       v-if="isBelowMin"
-      class="text-sm text-gold-500 m-0 px-8 pt-4 text-center"
+      class="text-sm text-red-500 m-0 px-8 pt-4 text-center flex items-center justify-center gap-1"
     >
+      <i class="icon-[lucide--component] size-4" />
       {{
-        $t('credits.topUp.minimumPurchase', {
-          amount: MIN_AMOUNT,
-          credits: usdToCredits(MIN_AMOUNT)
+        $t('credits.topUp.minRequired', {
+          credits: formatNumber(usdToCredits(MIN_AMOUNT))
         })
       }}
     </p>
     <p
       v-if="showCeilingWarning"
-      class="text-sm text-gold-500 m-0 px-8 pt-4 text-center"
+      class="text-sm text-gold-500 m-0 px-8 pt-4 text-center flex items-center justify-center gap-1"
     >
+      <i class="icon-[lucide--component] size-4" />
       {{
-        $t('credits.topUp.maximumAmount', {
-          amount: formatNumber(MAX_AMOUNT)
+        $t('credits.topUp.maxAllowed', {
+          credits: formatNumber(usdToCredits(MAX_AMOUNT))
         })
       }}
       <span>{{ $t('credits.topUp.needMore') }}</span>