fix(billing): align plan actions and pricing assets

(cherry picked from commit 6fc80a697a)

web/app/components/billing/pricing/content.tsx

@@ -16,7 +16,7 @@ import styles from './pricing.module.css'
 type BillingInterval = GetBillingSubscriptionData['query']['interval']
 
 const intervalOptionClassName =
-  'relative flex min-w-0 flex-1 cursor-pointer flex-wrap items-center justify-center gap-1 rounded-full px-3 py-1 text-lg leading-6 font-medium text-(--pricing-subdued) focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-text-accent data-checked:text-(--pricing-ink) sm:min-w-[190px] sm:flex-none sm:px-6 sm:text-2xl sm:leading-[30px]'
+  'relative flex min-w-0 flex-1 cursor-pointer flex-wrap items-center justify-center gap-1 rounded-full px-3 py-1 text-lg leading-6 font-medium text-(--pricing-subdued) outline-state-accent-solid focus-visible:outline-2 focus-visible:outline-offset-2 forced-colors:data-checked:underline data-checked:text-(--pricing-ink) sm:min-w-[190px] sm:flex-none sm:px-6 sm:text-2xl sm:leading-[30px]'
 
 export function PricingContent() {
   const { t } = useTranslation(['appApi', 'billing', 'common'])

web/app/components/billing/pricing/header.tsx

@@ -1,5 +1,8 @@
+import type { CSSProperties } from 'react'
 import { DialogDescription, DialogTitle } from '@langgenius/dify-ui/dialog'
 import { useTranslation } from 'react-i18next'
+import { basePath } from '@/utils/var'
+import styles from './pricing.module.css'
 
 export default function Header() {
   const { t } = useTranslation(['billing'])
@@ -11,7 +14,12 @@ export default function Header() {
           <span
             role="img"
             aria-label="Dify"
-            className="h-[27px] w-15 bg-[url(/logo/logo.svg)] bg-contain bg-center bg-no-repeat dark:bg-[url(/pricing/logo-dark.svg)]"
+            style={
+              {
+                '--pricing-logo-light': `url("${basePath}/logo/logo.svg")`,
+              } as CSSProperties
+            }
+            className={`${styles.logo} h-[27px] w-15 bg-contain bg-center bg-no-repeat`}
           />
           <span>Cloud</span>
         </span>

web/app/components/billing/pricing/plans/cloud-plan-item/index.tsx

@@ -47,9 +47,9 @@ export function CloudPlanItem({ plan, billingInterval, billing }: CloudPlanItemP
   const isYearly = billingInterval === 'year'
   const i18nPrefix = `plans.${plan}` as const
   const isFreePlan = plan === 'sandbox'
-  const isPromotedUpgrade =
+  const isPrimaryAction =
     (currentPlan === 'sandbox' && plan === 'professional') ||
-    (currentPlan === 'professional' && plan === 'team')
+    ((currentPlan === 'professional' || currentPlan === 'team') && plan === 'team')
   const isMostPopularPlan = plan === 'professional'
   const planInfo = ALL_PLANS[plan]
   const isCurrent = plan === currentPlan
@@ -179,7 +179,7 @@ export function CloudPlanItem({ plan, billingInterval, billing }: CloudPlanItemP
               <span>{t(($) => $['plansCommon.currentPlan'], { ns: 'billing' })}</span>
             )}
             {isMostPopularPlan && (
-              <div className="flex h-[26px] items-center rounded-sm bg-state-accent-hover-alt px-2 text-xs leading-[15px] font-semibold text-text-accent uppercase">
+              <div className="flex h-[26px] items-center rounded-sm bg-state-accent-hover-alt px-2 text-xs leading-[15px] font-semibold text-text-accent uppercase dark:bg-state-accent-hover-alt/85">
                 <span>{t(($) => $['plansCommon.mostPopular'], { ns: 'billing' })}</span>
               </div>
             )}
@@ -225,9 +225,11 @@ export function CloudPlanItem({ plan, billingInterval, billing }: CloudPlanItemP
                 disabled={isPlanDisabled}
                 className={cn(
                   'h-auto min-h-15 w-full rounded-lg border p-3 text-2xl leading-[30px] font-medium whitespace-normal shadow-none disabled:cursor-default',
-                  isPromotedUpgrade
+                  isPrimaryAction
                     ? 'border-saas-dify-blue-static bg-saas-dify-blue-static text-white enabled:hover:bg-saas-dify-blue-static-hover'
-                    : 'border-(--pricing-button-border) bg-(--pricing-button-bg) text-(--pricing-muted) enabled:hover:bg-components-button-secondary-bg-hover',
+                    : canManageBilling
+                      ? 'border-text-accent bg-transparent text-text-accent enabled:hover:bg-state-accent-hover-alt'
+                      : 'border-(--pricing-button-border) bg-(--pricing-button-bg) text-(--pricing-muted) enabled:hover:bg-components-button-secondary-bg-hover',
                 )}
                 onClick={handlePlanButtonClick}
               >

web/app/components/billing/pricing/pricing.module.css

@@ -1,27 +1,27 @@
 @font-face {
   font-family: PricingInter;
-  src: url('/pricing/inter-variable.woff2') format('woff2');
-  font-weight: 100 900;
+  src: url('./assets/inter-variable.woff2') format('woff2');
+  font-weight: 400 600;
   font-display: swap;
 }
 
 @font-face {
   font-family: PricingSohne;
-  src: url('/pricing/soehne-buch.woff2') format('woff2');
+  src: url('./assets/soehne-buch.woff2') format('woff2');
   font-weight: 400;
   font-display: swap;
 }
 
 @font-face {
   font-family: PricingSohne;
-  src: url('/pricing/soehne-kraftig.woff2') format('woff2');
+  src: url('./assets/soehne-kraftig.woff2') format('woff2');
   font-weight: 500;
   font-display: swap;
 }
 
 @font-face {
   font-family: PricingSohne;
-  src: url('/pricing/soehne-halbfett.woff2') format('woff2');
+  src: url('./assets/soehne-halbfett.woff2') format('woff2');
   font-weight: 600 700;
   font-display: swap;
 }
@@ -62,7 +62,14 @@
   position: absolute;
   inset: 0;
   z-index: -1;
-  background: url('/pricing/background.webp') -830px -806px / 3905.51px 2196.849px no-repeat;
+  background: url('./assets/background.webp') -830px -806px / 3905.51px 2196.849px no-repeat;
   content: '';
   pointer-events: none;
 }
+
+.logo {
+  background-image: var(--pricing-logo-light);
+}
+:global(html[data-theme='dark']) .logo {
+  background-image: url('./assets/logo-dark.svg');
+}