style: redesign TopUpCredits dialog (#7305)

Redesigned the TopUpCredits dialog to match Figma design specifications
with proper layout, typography, colors and selection states. Updated
dialog to use workflow-aware messaging, removed header, applied design
system tokens, and integrated subscription renewal dates. Modified
credit packages to use clean USD amounts with realistic video estimates
and fixed button disabled states to show blue with 30% opacity per Figma
design.

| Before | After |
|
---------------------------------------------------------------------------------------------------------------------------------------------
|
---------------------------------------------------------------------------------------------------------------------------------------------
|
| <img width="675" height="863" alt="Screenshot from 2025-12-09
18-08-21"
src="https://github.com/user-attachments/assets/331c7a48-74ae-4a58-b70f-aa476c3fc87c"
/> | <img width="675" height="863" alt="Screenshot from 2025-12-09
18-06-23"
src="https://github.com/user-attachments/assets/dcb7b358-6045-4c89-82ed-3283a20eea89"
/>
 |

src/components/dialog/content/TopUpCreditsDialogContent.vue

@@ -1,35 +1,43 @@
 <template>
   <!-- New Credits Design (default) -->
-  <div
-    v-if="useNewDesign"
-    class="flex w-96 flex-col gap-8 p-8 bg-node-component-surface rounded-2xl border border-border-primary"
-  >
+  <div v-if="useNewDesign" class="flex w-112 flex-col gap-8 p-8">
     <!-- Header -->
     <div class="flex flex-col gap-4">
-      <h1 class="text-2xl font-semibold text-foreground-primary m-0">
-        {{ $t('credits.topUp.addMoreCredits') }}
+      <h1 class="text-2xl font-semibold text-white m-0">
+        {{
+          isInsufficientCredits
+            ? $t('credits.topUp.addMoreCreditsToRun')
+            : $t('credits.topUp.addMoreCredits')
+        }}
       </h1>
-      <p class="text-sm text-foreground-secondary m-0">
-        {{ $t('credits.topUp.creditsDescription') }}
-      </p>
+      <div v-if="isInsufficientCredits" class="flex flex-col gap-2">
+        <p class="text-sm text-muted-foreground m-0 w-96">
+          {{ $t('credits.topUp.insufficientWorkflowMessage') }}
+        </p>
+      </div>
+      <div v-else class="flex flex-col gap-2">
+        <p class="text-sm text-muted-foreground m-0">
+          {{ $t('credits.topUp.creditsDescription') }}
+        </p>
+      </div>
     </div>
 
     <!-- Current Balance Section -->
     <div class="flex flex-col gap-4">
       <div class="flex items-baseline gap-2">
-        <UserCredit text-class="text-3xl font-bold" />
-        <span class="text-sm text-foreground-secondary">{{
+        <UserCredit text-class="text-3xl font-bold" show-credits-only />
+        <span class="text-sm text-muted-foreground">{{
           $t('credits.creditsAvailable')
         }}</span>
       </div>
-      <div v-if="refreshDate" class="text-sm text-foreground-secondary">
-        {{ $t('credits.refreshes', { date: refreshDate }) }}
+      <div v-if="formattedRenewalDate" class="text-sm text-muted-foreground">
+        {{ $t('credits.refreshes', { date: formattedRenewalDate }) }}
       </div>
     </div>
 
     <!-- Credit Options Section -->
     <div class="flex flex-col gap-4">
-      <span class="text-sm text-foreground-secondary">
+      <span class="text-sm text-muted-foreground">
         {{ $t('credits.topUp.howManyCredits') }}
       </span>
       <div class="flex flex-col gap-2">
@@ -42,7 +50,7 @@
           @select="selectedCredits = option.credits"
         />
       </div>
-      <div class="text-xs text-foreground-secondary">
+      <div class="text-xs text-muted-foreground w-96">
         {{ $t('credits.topUp.templateNote') }}
       </div>
     </div>
@@ -53,7 +61,8 @@
       :loading="loading"
       severity="primary"
       :label="$t('credits.topUp.buy')"
-      class="w-full"
+      :class="['w-full', { 'opacity-30': !selectedCredits || loading }]"
+      :pt="{ label: { class: 'text-white' } }"
       @click="handleBuy"
     />
   </div>
@@ -121,6 +130,7 @@ import {
 import UserCredit from '@/components/common/UserCredit.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { useFeatureFlags } from '@/composables/useFeatureFlags'
+import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { useTelemetry } from '@/platform/telemetry'
 
 import CreditTopUpOption from './credit/CreditTopUpOption.vue'
@@ -132,18 +142,17 @@ interface CreditOption {
 }
 
 const {
-  refreshDate,
   isInsufficientCredits = false,
   amountOptions = [5, 10, 20, 50],
   preselectedAmountOption = 10
 } = defineProps<{
-  refreshDate?: string
   isInsufficientCredits?: boolean
   amountOptions?: number[]
   preselectedAmountOption?: number
 }>()
 
 const { flags } = useFeatureFlags()
+const { formattedRenewalDate } = useSubscription()
 // Use feature flag to determine design - defaults to true (new design)
 const useNewDesign = computed(() => flags.subscriptionTiersEnabled)
 
@@ -157,20 +166,20 @@ const loading = ref(false)
 
 const creditOptions: CreditOption[] = [
   {
-    credits: 1000,
-    description: t('credits.topUp.videosEstimate', { count: 100 })
+    credits: 1055, // $5.00
+    description: t('credits.topUp.videosEstimate', { count: 41 })
   },
   {
-    credits: 5000,
-    description: t('credits.topUp.videosEstimate', { count: 500 })
+    credits: 2110, // $10.00
+    description: t('credits.topUp.videosEstimate', { count: 82 })
   },
   {
-    credits: 10000,
-    description: t('credits.topUp.videosEstimate', { count: 1000 })
+    credits: 4220, // $20.00
+    description: t('credits.topUp.videosEstimate', { count: 184 })
   },
   {
-    credits: 20000,
-    description: t('credits.topUp.videosEstimate', { count: 2000 })
+    credits: 10550, // $50.00
+    description: t('credits.topUp.videosEstimate', { count: 412 })
   }
 ]
 

src/components/dialog/content/credit/CreditTopUpOption.vue

@@ -3,19 +3,17 @@
     class="flex items-center justify-between p-2 rounded-lg cursor-pointer transition-all duration-200"
     :class="[
       selected
-        ? 'bg-surface-secondary border-2 border-primary'
-        : 'bg-surface-tertiary border border-border-primary hover:bg-surface-secondary'
+        ? 'bg-secondary-background border-2 border-border-default'
+        : 'bg-component-node-disabled hover:bg-secondary-background border-2 border-transparent'
     ]"
     @click="$emit('select')"
   >
-    <div class="flex flex-col">
-      <span class="text-base font-medium text-foreground-primary">
-        {{ formattedCredits }}
-      </span>
-      <span class="text-sm text-foreground-secondary">
-        {{ description }}
-      </span>
-    </div>
+    <span class="text-base font-bold text-white">
+      {{ formattedCredits }}
+    </span>
+    <span class="text-sm font-normal text-white">
+      {{ description }}
+    </span>
   </div>
 </template>
 
@@ -38,6 +36,10 @@ defineEmits<{
 const { locale } = useI18n()
 
 const formattedCredits = computed(() => {
-  return formatCredits({ value: credits, locale: locale.value })
+  return formatCredits({
+    value: credits,
+    locale: locale.value,
+    numberOptions: { minimumFractionDigits: 0, maximumFractionDigits: 0 }
+  })
 })
 </script>