Component: The Rest of the PrimeVue buttons (#7649)

## Summary

Automated initial change, cleaned up manually.

Please check the screenshot changes.

Includes a11y updates to icon buttons.

Doesn't hit the buttons in Desktop.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7649-WIP-Component-The-Rest-of-the-PrimeVue-buttons-2ce6d73d365081d68e06f200f1321267)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

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

@@ -4,16 +4,14 @@
     class="relative flex flex-col p-4 pt-8 md:p-16 !overflow-y-auto h-full gap-8"
   >
     <Button
-      :pt="{
-        icon: { class: 'text-xl' }
-      }"
-      icon="pi pi-times"
-      text
-      rounded
-      class="shrink-0 text-text-secondary hover:bg-white/10 absolute right-2.5 top-2.5"
+      size="icon"
+      variant="muted-textonly"
+      class="rounded-full shrink-0 text-text-secondary hover:bg-white/10 absolute right-2.5 top-2.5"
       :aria-label="$t('g.close')"
       @click="handleClose"
-    />
+    >
+      <i class="pi pi-times text-xl" />
+    </Button>
     <div class="text-center">
       <h2 class="text-xl lg:text-2xl text-muted-foreground m-0">
         {{ $t('subscription.description') }}
@@ -29,37 +27,36 @@
       </p>
       <div class="flex items-center gap-1.5">
         <Button
-          :label="$t('subscription.contactUs')"
-          text
-          severity="secondary"
-          icon="pi pi-comments"
-          icon-pos="right"
+          variant="muted-textonly"
           class="h-6 p-1 text-sm text-text-secondary hover:text-base-foreground"
           @click="handleContactUs"
-        />
+        >
+          {{ $t('subscription.contactUs') }}
+          <i class="pi pi-comments" />
+        </Button>
         <span class="text-sm text-text-secondary">{{ $t('g.or') }}</span>
         <Button
-          :label="$t('subscription.viewEnterprise')"
-          text
-          severity="secondary"
-          icon="pi pi-external-link"
-          icon-pos="right"
+          variant="muted-textonly"
           class="h-6 p-1 text-sm text-text-secondary hover:text-base-foreground"
           @click="handleViewEnterprise"
-        />
+        >
+          {{ $t('subscription.viewEnterprise') }}
+          <i class="pi pi-external-link" />
+        </Button>
       </div>
     </div>
   </div>
   <div v-else class="legacy-dialog 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"
+      size="icon"
+      variant="muted-textonly"
+      class="rounded-full 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="handleClose"
-    />
+    >
+      <i class="pi pi-times" />
+    </Button>
 
     <div
       class="relative col-span-2 flex items-center justify-center overflow-hidden rounded-sm"
@@ -122,10 +119,10 @@
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import { computed, onBeforeUnmount, watch } from 'vue'
 
 import CloudBadge from '@/components/topbar/CloudBadge.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { MONTHLY_SUBSCRIPTION_PRICE } from '@/config/subscriptionPricesConfig'
 import PricingTable from '@/platform/cloud/subscription/components/PricingTable.vue'
 import SubscribeButton from '@/platform/cloud/subscription/components/SubscribeButton.vue'