update user profile dropdown (#6475)

## Summary

update user profile dropdown

## Screenshots

1. Subscribe to run button and Unsubscribe user panel
<img width="433" height="480" alt="image"
src="https://github.com/user-attachments/assets/bb859481-6405-44df-85ec-9935599c4be0"
/>

2. Subscribed User:
<img width="395" height="479" alt="image"
src="https://github.com/user-attachments/assets/683de2c0-8090-4e9a-ac4e-d211fcee8921"
/>

3. OSS:
<img width="392" height="480" alt="image"
src="https://github.com/user-attachments/assets/7d684c1a-8dee-48dd-8e7f-3c98bd98104d"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6475-update-user-profile-dropdown-29d6d73d365081ff9e14f9355a9a3bb7)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>

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

@@ -5,9 +5,17 @@
     :loading="isLoading"
     :disabled="isPolling"
     severity="primary"
+    :style="
+      variant === 'gradient'
+        ? {
+            background: 'var(--color-subscription-button-gradient)',
+            color: 'var(--color-white)'
+          }
+        : undefined
+    "
     :pt="{
       root: {
-        class: 'w-full font-bold'
+        class: rootClass
       }
     }"
     @click="handleSubscribe"
@@ -16,22 +24,29 @@
 
 <script setup lang="ts">
 import Button from 'primevue/button'
-import { onBeforeUnmount, ref } from 'vue'
+import { computed, onBeforeUnmount, ref } from 'vue'
 
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
+import { cn } from '@/utils/tailwindUtil'
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     label?: string
     size?: 'small' | 'large'
+    variant?: 'default' | 'gradient'
+    fluid?: boolean
   }>(),
   {
-    size: 'large'
+    size: 'large',
+    variant: 'default',
+    fluid: true
   }
 )
 
+const rootClass = computed(() => cn('font-bold', props.fluid && 'w-full'))
+
 const emit = defineEmits<{
   subscribed: []
 }>()

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

@@ -9,6 +9,10 @@
     icon="pi pi-lock"
     severity="primary"
     size="small"
+    :style="{
+      background: 'var(--color-subscription-button-gradient)',
+      color: 'var(--color-white)'
+    }"
     data-testid="subscribe-to-run-button"
     @click="handleSubscribeToRun"
   />

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

@@ -61,6 +61,7 @@
                 v-else
                 :label="$t('subscription.subscribeNow')"
                 size="small"
+                :fluid="false"
                 class="text-xs"
                 @subscribed="handleRefresh"
               />