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>

src/components/ui/stepper/FormattedNumberStepper.vue

@@ -1,8 +1,9 @@
 <template>
-  <div
+  <label
+    :for="inputId"
     :class="
       cn(
-        'flex h-10 items-center rounded-lg bg-secondary-background text-secondary-foreground hover:bg-secondary-background-hover',
+        'flex h-10 cursor-text items-center rounded-lg bg-secondary-background text-secondary-foreground hover:bg-secondary-background-hover focus-within:ring-1 focus-within:ring-secondary-foreground',
         disabled && 'opacity-50 pointer-events-none'
       )
     "
@@ -21,12 +22,13 @@
     >
       <slot name="prefix" />
       <input
+        :id="inputId"
         ref="inputRef"
         v-model="inputValue"
         type="text"
         inputmode="numeric"
         :style="{ width: `${inputWidth}ch` }"
-        class="min-w-0 rounded border-none bg-transparent text-center text-base-foreground font-medium text-lg focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        class="min-w-0 rounded border-none bg-transparent text-center text-base-foreground font-medium text-lg focus-visible:outline-none"
         :disabled="disabled"
         @input="handleInputChange"
         @blur="handleInputBlur"
@@ -43,11 +45,11 @@
     >
       <i class="icon-[lucide--plus] size-4" />
     </button>
-  </div>
+  </label>
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, ref, useId, watch } from 'vue'
 
 import { cn } from '@/utils/tailwindUtil'
 
@@ -71,6 +73,7 @@ const emit = defineEmits<{
 
 const modelValue = defineModel<number>({ required: true })
 
+const inputId = useId()
 const inputRef = ref<HTMLInputElement | null>(null)
 const inputValue = ref(formatNumber(modelValue.value))
 
@@ -164,7 +167,9 @@ function handleInputBlur() {
 }
 
 function handleInputFocus(e: FocusEvent) {
-  ;(e.target as HTMLInputElement).select()
+  const input = e.target as HTMLInputElement
+  const len = input.value.length
+  input.setSelectionRange(len, len)
 }
 
 function handleStep(direction: 1 | -1) {

src/locales/en/main.json

@@ -1933,6 +1933,8 @@
       "buyCredits": "Continue to payment",
       "minimumPurchase": "${amount} minimum ({credits} credits)",
       "maximumAmount": "${amount} max.",
+      "minRequired": "{credits} credits minimum",
+      "maxAllowed": "{credits} credits maximum.",
       "creditsPerDollar": "credits per dollar",
       "amountToPayLabel": "Amount to pay in dollars",
       "creditsToReceiveLabel": "Credits to receive",