Fix: label for downgrade buttons (#4494)

2025-04-18 11:02:34 +02:00
parent 0a93715415
commit 90641d20de
4 changed files with 7 additions and 4 deletions
@@ -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) {
@@ -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',
@@ -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">
@@ -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'