From 90641d20de067b5ae9e75d40059cd5ff2c43721a Mon Sep 17 00:00:00 2001
From: Mike <mike.tasset@gmail.com>
Date: Fri, 18 Apr 2025 11:02:34 +0200
Subject: [PATCH] Fix: label for downgrade buttons (#4494)

---
 packages/frontend-2/components/pricingTable/Plan.vue        | 2 +-
 .../workspaces/members/actions/UpdateSeatTypeDialog.vue     | 2 +-
 .../components/workspace/plan/LimitReachedDialog.vue        | 1 +
 packages/ui-components/src/components/layout/Dialog.vue     | 6 ++++--
 4 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/frontend-2/components/pricingTable/Plan.vue b/packages/frontend-2/components/pricingTable/Plan.vue
index 7b2d93719..b784f82a3 100644
--- a/packages/frontend-2/components/pricingTable/Plan.vue
+++ b/packages/frontend-2/components/pricingTable/Plan.vue
@@ -298,7 +298,7 @@ const buttonText = computed(() => {
   }
   // Billing interval and lower plan case
   if (isDowngrade.value) {
-    return `Downgrade to ${props.plan}`
+    return `Downgrade to ${formatName(props.plan)}`
   }
   // Billing interval change and current plan
   if (isAnnualToMonthly.value) {
diff --git a/packages/frontend-2/components/settings/workspaces/members/actions/UpdateSeatTypeDialog.vue b/packages/frontend-2/components/settings/workspaces/members/actions/UpdateSeatTypeDialog.vue
index 0733cca16..4f7381c3f 100644
--- a/packages/frontend-2/components/settings/workspaces/members/actions/UpdateSeatTypeDialog.vue
+++ b/packages/frontend-2/components/settings/workspaces/members/actions/UpdateSeatTypeDialog.vue
@@ -111,7 +111,7 @@ const dialogButtons = computed((): LayoutDialogButton[] => [
   },
   {
     text: isUpgrading.value
-      ? isFreePlan.value || hasAvailableEditorSeats.value || isUnlimitedPlan.value
+      ? hasAvailableEditorSeats.value || !isPaidPlan.value
         ? 'Upgrade seat'
         : 'Confirm and pay'
       : 'Downgrade seat',
diff --git a/packages/frontend-2/components/workspace/plan/LimitReachedDialog.vue b/packages/frontend-2/components/workspace/plan/LimitReachedDialog.vue
index a6a5cae27..4225cd6b7 100644
--- a/packages/frontend-2/components/workspace/plan/LimitReachedDialog.vue
+++ b/packages/frontend-2/components/workspace/plan/LimitReachedDialog.vue
@@ -8,6 +8,7 @@
     :hide-closer="preventClose"
     :prevent-close-on-click-outside="preventClose"
     :title="condensed ? 'Plan limit reached' : undefined"
+    closer-classes="hover:!bg-transparent !text-white hover:opacity-65"
   >
     <div class="flex flex-col">
       <div v-if="!condensed" class="relative bg-primary h-32 md:h-48 select-none">
diff --git a/packages/ui-components/src/components/layout/Dialog.vue b/packages/ui-components/src/components/layout/Dialog.vue
index 94580dd30..13d27ddb0 100644
--- a/packages/ui-components/src/components/layout/Dialog.vue
+++ b/packages/ui-components/src/components/layout/Dialog.vue
@@ -80,10 +80,11 @@
                 v-if="!hideCloser"
                 color="subtle"
                 size="sm"
-                class="absolute z-20 top-4 right-5 shrink-0 !w-6 !h-6 !p-0"
+                class="absolute z-20 top-4 right-5 shrink-0 !w-6 !h-6 !p-0 text-foreground-2"
+                :class="closerClasses"
                 @click="open = false"
               >
-                <XMarkIcon class="h-6 w-6 text-foreground-2" />
+                <XMarkIcon class="h-6 w-6" />
               </FormButton>
               <div ref="slotContainer" :class="slotContainerClasses" @scroll="onScroll">
                 <slot>Put your content here!</slot>
@@ -167,6 +168,7 @@ const props = withDefaults(
      */
     onSubmit?: (e: SubmitEvent) => void
     isTransparent?: boolean
+    closerClasses?: string
   }>(),
   {
     fullscreen: 'mobile'