code improve

Author: jtydhr88

src/components/topbar/TopbarBadge.vue

@@ -1,20 +1,39 @@
 <template>
-  <div class="flex items-center gap-2 bg-comfy-menu-secondary px-3">
+  <div
+    class="flex items-center gap-2 bg-comfy-menu-secondary"
+    :class="[{ 'flex-row-reverse': reverseOrder }, noPadding ? '' : 'px-3']"
+  >
     <div
       v-if="badge.label"
       class="rounded-full bg-white px-1.5 py-0.5 text-xxxs font-semibold text-black"
+      :class="labelClass"
     >
       {{ badge.label }}
     </div>
-    <div class="font-inter text-sm font-extrabold text-slate-100">
+    <div
+      class="font-inter text-sm font-extrabold text-slate-100"
+      :class="textClass"
+    >
       {{ badge.text }}
     </div>
   </div>
 </template>
 <script setup lang="ts">
 import type { TopbarBadge } from '@/types/comfy'
 
-defineProps<{
-  badge: TopbarBadge
-}>()
+withDefaults(
+  defineProps<{
+    badge: TopbarBadge
+    reverseOrder?: boolean
+    noPadding?: boolean
+    labelClass?: string
+    textClass?: string
+  }>(),
+  {
+    reverseOrder: false,
+    noPadding: false,
+    labelClass: '',
+    textClass: ''
+  }
+)
 </script>

src/components/topbar/TopbarBadges.vue

@@ -4,6 +4,10 @@
       v-for="badge in topbarBadgeStore.badges"
       :key="badge.text"
       :badge
+      :reverse-order="reverseOrder"
+      :no-padding="noPadding"
+      :label-class="labelClass"
+      :text-class="textClass"
     />
   </div>
 </template>
@@ -13,5 +17,20 @@ import { useTopbarBadgeStore } from '@/stores/topbarBadgeStore'
 
 import TopbarBadge from './TopbarBadge.vue'
 
+withDefaults(
+  defineProps<{
+    reverseOrder?: boolean
+    noPadding?: boolean
+    labelClass?: string
+    textClass?: string
+  }>(),
+  {
+    reverseOrder: false,
+    noPadding: false,
+    labelClass: '',
+    textClass: ''
+  }
+)
+
 const topbarBadgeStore = useTopbarBadgeStore()
 </script>

src/locales/en/main.json

@@ -1914,7 +1914,7 @@
     "title": "Subscription",
     "comfyCloud": "Comfy Cloud",
     "beta": "BETA",
-    "perMonth": "/ month",
+    "perMonth": "USD / month",
     "renewsDate": "Renews {date}",
     "manageSubscription": "Manage subscription",
     "apiNodesBalance": "\"API Nodes\" Credit Balance",

src/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="grid h-full grid-cols-5">
+  <div class="grid h-full grid-cols-5 px-10 pb-10">
     <div
       class="relative col-span-2 flex items-center justify-center overflow-hidden"
     >
@@ -18,28 +18,34 @@
       </video>
     </div>
 
-    <div class="col-span-3 flex flex-col p-8">
-      <div class="flex flex-col gap-4">
-        <div class="inline-flex items-center gap-2">
-          <div class="text-sm">
-            {{ $t('subscription.required.title') }}
+    <div class="col-span-3 flex flex-col justify-between pl-8">
+      <div>
+        <div class="flex flex-col gap-4">
+          <div class="inline-flex items-center gap-2">
+            <div class="text-sm text-muted">
+              {{ $t('subscription.required.title') }}
+            </div>
+            <TopbarBadges
+              reverse-order
+              no-padding
+              text-class="!text-sm !font-normal"
+            />
           </div>
-          <TopbarBadges />
-        </div>
 
-        <div class="mt-4 mb-10 flex items-baseline gap-2">
-          <span class="text-3xl font-bold">{{ formattedMonthlyPrice }}</span>
-          <span class="text-xl">{{ $t('subscription.perMonth') }}</span>
+          <div class="flex items-baseline gap-2">
+            <span class="text-4xl font-bold">{{ formattedMonthlyPrice }}</span>
+            <span class="text-xl">{{ $t('subscription.perMonth') }}</span>
+          </div>
         </div>
-      </div>
 
-      <SubscriptionBenefits class="text-muted" />
+        <SubscriptionBenefits class="mt-6 text-muted" />
+      </div>
 
-      <div class="mt-10 mb-4 flex flex-col">
+      <div class="flex flex-col">
         <Button
           :label="$t('subscription.required.subscribe')"
           size="large"
-          class="w-full"
+          class="w-full font-bold"
           :loading="isLoading"
           :disabled="isPolling"
           @click="handleSubscribe"

src/platform/cloud/subscription/composables/useSubscription.ts

@@ -56,7 +56,7 @@ export function useSubscription() {
   })
 
   const formattedMonthlyPrice = computed(
-    () => `$${MONTHLY_SUBSCRIPTION_PRICE.toFixed(2)}`
+    () => `$${MONTHLY_SUBSCRIPTION_PRICE.toFixed(0)}`
   )
 
   const fetchStatus = wrapWithErrorHandlingAsync(async () => {

src/services/dialogService.ts

@@ -502,10 +502,11 @@ export const useDialogService = () => {
       ),
       dialogComponentProps: {
         closable: true,
-        style: 'width: 720px; height: 434px;',
+        style: 'width: 700px;',
         pt: {
+          header: { class: '!p-0 !m-0' },
           content: {
-            class: 'overflow-hidden p-0!'
+            class: 'overflow-hidden !p-0 !m-0'
           }
         }
       }