update subscription dialog (#6350)

## Summary

- Align with design and new tokens
- Change to point to comfy.org/cloud/pricing

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6350-update-subscription-dialog-29a6d73d365081fc80dbdced405f6b21)
by [Unito](https://www.unito.io)

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

@@ -1,5 +1,15 @@
 <template>
-  <div class="grid h-full grid-cols-5 px-10 pb-10">
+  <div class="relative grid h-full grid-cols-5">
+    <!-- Custom close button -->
+    <Button
+      icon="pi pi-times"
+      text
+      rounded
+      class="absolute top-2.5 right-2.5 z-10 h-8 w-8 p-0 text-white hover:bg-white/20"
+      :aria-label="$t('g.close')"
+      @click="onClose"
+    />
+
     <div
       class="relative col-span-2 flex items-center justify-center overflow-hidden rounded-sm"
     >
@@ -8,7 +18,7 @@
         loop
         muted
         playsinline
-        class="h-full min-w-[125%] object-cover"
+        class="h-full min-w-[125%] object-cover p-0"
         style="margin-left: -20%"
       >
         <source
@@ -18,17 +28,18 @@
       </video>
     </div>
 
-    <div class="col-span-3 flex flex-col justify-between pl-8">
+    <div class="col-span-3 flex flex-col justify-between p-8">
       <div>
-        <div class="flex flex-col gap-4">
+        <div class="flex flex-col gap-6">
           <div class="inline-flex items-center gap-2">
-            <div class="text-sm text-muted">
+            <div class="text-sm text-muted text-text-primary">
               {{ $t('subscription.required.title') }}
             </div>
             <CloudBadge
               reverse-order
               no-padding
               background-color="var(--p-dialog-background)"
+              use-subscription
             />
           </div>
 
@@ -41,19 +52,36 @@
         <SubscriptionBenefits class="mt-6 text-muted" />
       </div>
 
-      <div class="flex flex-col">
-        <SubscribeButton @subscribed="handleSubscribed" />
+      <div class="flex flex-col pt-8">
+        <SubscribeButton
+          class="py-2 px-4 rounded-lg"
+          :pt="{
+            root: {
+              style: 'background: var(--color-accent-blue, #0B8CE9);'
+            },
+            label: {
+              class: 'font-inter font-[700] text-sm'
+            }
+          }"
+          @subscribed="handleSubscribed"
+        />
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import Button from 'primevue/button'
+
 import CloudBadge from '@/components/topbar/CloudBadge.vue'
 import SubscribeButton from '@/platform/cloud/subscription/components/SubscribeButton.vue'
 import SubscriptionBenefits from '@/platform/cloud/subscription/components/SubscriptionBenefits.vue'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 
+defineProps<{
+  onClose: () => void
+}>()
+
 const emit = defineEmits<{
   close: [subscribed: boolean]
 }>()