fix: UI adjust

web/app/components/base/icons/assets/public/billing/asterisk.svg

@@ -0,0 +1,5 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="asterisk">
+<path id="Vector" d="M14.0033 3.20837V24.7917M4.65747 8.60421L23.3492 19.3959M4.6586 19.3959L23.3503 8.60421" stroke="#101828" stroke-width="1.5" stroke-linecap="round"/>
+</g>
+</svg>

web/app/components/base/icons/src/public/billing/Asterisk.json

@@ -0,0 +1,38 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "28",
+			"height": "28",
+			"viewBox": "0 0 28 28",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "g",
+				"attributes": {
+					"id": "asterisk"
+				},
+				"children": [
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"id": "Vector",
+							"d": "M14.0033 3.20837V24.7917M4.65747 8.60421L23.3492 19.3959M4.6586 19.3959L23.3503 8.60421",
+							"stroke": "#101828",
+							"stroke-width": "1.5",
+							"stroke-linecap": "round"
+						},
+						"children": []
+					}
+				]
+			}
+		]
+	},
+	"name": "Asterisk"
+}

web/app/components/base/icons/src/public/billing/Asterisk.tsx

@@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './Asterisk.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'Asterisk'
+
+export default Icon

web/app/components/base/icons/src/public/billing/index.ts

@@ -1,4 +1,5 @@
 export { default as ArCube1 } from './ArCube1'
+export { default as Asterisk } from './Asterisk'
 export { default as AwsMarketplace } from './AwsMarketplace'
 export { default as Azure } from './Azure'
 export { default as Buildings } from './Buildings'

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

@@ -14,6 +14,7 @@ import SelfHostedPlanItem from './self-hosted-plan-item'
 import { useProviderContext } from '@/context/provider-context'
 import GridMask from '@/app/components/base/grid-mask'
 import { useAppContext } from '@/context/app-context'
+import classNames from '@/utils/classnames'
 
 type Props = {
   onCancel: () => void
@@ -51,7 +52,7 @@ const Pricing: FC<Props> = ({
             </div>
             <div className='system-sm-regular text-text-secondary'>
               <span>{t('billing.plansCommon.freeTrialTipPrefix')}</span>
-              <span className='text-gradient'>{t('billing.plansCommon.freeTrialTip')}</span>
+              <span className='text-gradient font-semibold'>{t('billing.plansCommon.freeTrialTip')}</span>
               <span>{t('billing.plansCommon.freeTrialTipSuffix')}</span>
             </div>
           </div>
@@ -62,8 +63,20 @@ const Pricing: FC<Props> = ({
                 itemWidth={170}
                 className='inline-flex'
                 options={[
-                  { value: 'cloud', text: <div className='inline-flex items-center system-md-semibold-uppercase text-text-secondary'><RiCloudFill className='size-4 mr-2' />{t('billing.plansCommon.cloud')}</div> },
+                  {
-                  { value: 'self', text: <div className='inline-flex items-center system-md-semibold-uppercase text-text-secondary'><RiTerminalBoxFill className='size-4 mr-2' />{t('billing.plansCommon.self')}</div> }]}
+                    value: 'cloud',
+                    text: <div className={
+                      classNames('inline-flex items-center system-md-semibold-uppercase text-text-secondary',
+                        currentPlan === 'cloud' && 'text-text-accent-light-mode-only')} >
+                      <RiCloudFill className='size-4 mr-2' />{t('billing.plansCommon.cloud')}</div>,
+                  },
+                  {
+                    value: 'self',
+                    text: <div className={
+                      classNames('inline-flex items-center system-md-semibold-uppercase text-text-secondary',
+                        currentPlan === 'self' && 'text-text-accent-light-mode-only')}>
+                      <RiTerminalBoxFill className='size-4 mr-2' />{t('billing.plansCommon.self')}</div>,
+                  }]}
                 onChange={v => setCurrentPlan(v)} />
 
               {currentPlan === 'cloud' && <SelectPlanRange
@@ -114,13 +127,13 @@ const Pricing: FC<Props> = ({
             </div>
           </div>
           <div className='py-4 flex items-center justify-center'>
-            <div className='px-3 py-2 flex items-center justify-center gap-x-0.5 text-components-button-secondary-accent-text'>
+            <div className='px-3 py-2 flex items-center justify-center gap-x-0.5 text-components-button-secondary-accent-text rounded-lg hover:bg-state-accent-hover hover:cursor-pointer'>
               <Link href='https://dify.ai/pricing#plans-and-features' className='system-sm-medium'>{t('billing.plansCommon.comparePlanAndFeatures')}</Link>
               <RiArrowRightUpLine className='size-4' />
             </div>
           </div>
         </GridMask>
-      </div>
+      </div >
     </div >,
     document.body,
   )

web/app/components/billing/pricing/plan-item.tsx

@@ -36,7 +36,7 @@ const KeyValue = ({ icon, label, tooltip }: { icon: ReactNode; label: string; to
           popupClassName='w-[200px]'
         >
           <div className='size-4 flex items-center justify-center'>
-            <RiQuestionLine className='text-text-secondary' />
+            <RiQuestionLine className='text-text-quaternary' />
           </div>
         </Tooltip>
       )}

web/app/components/billing/pricing/select-plan-range.tsx

@@ -40,7 +40,7 @@ const SelectPlanRange: FC<Props> = ({
     <div className='relative flex flex-col items-end pr-6'>
       <div className='text-sm italic bg-clip-text bg-premium-yearly-tip-text-background text-transparent'>{t('billing.plansCommon.yearlyTip')}</div>
       <div className='flex items-center py-1'>
-        <span className='mr-2'>{t('billing.plansCommon.annualBilling')}</span>
+        <span className='mr-2 text-[13px]'>{t('billing.plansCommon.annualBilling')}</span>
         <Switch size='l' defaultValue={value === PlanRange.yearly} onChange={(v) => {
           onChange(v ? PlanRange.yearly : PlanRange.monthly)
         }} />

web/app/components/billing/pricing/self-hosted-plan-item.tsx

@@ -2,12 +2,12 @@
 import type { FC, ReactNode } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { RiArrowRightUpLine, RiAsterisk, RiBrain2Line, RiCheckLine, RiQuestionLine } from '@remixicon/react'
+import { RiArrowRightUpLine, RiBrain2Line, RiCheckLine, RiQuestionLine } from '@remixicon/react'
 import { SelfHostedPlan } from '../type'
 import { contactSalesUrl, getStartedWithCommunityUrl, getWithPremiumUrl } from '../config'
 import Toast from '../../base/toast'
 import Tooltip from '../../base/tooltip'
-import { AwsMarketplace, Azure, Buildings, Diamond, GoogleCloud } from '../../base/icons/src/public/billing'
+import { Asterisk, AwsMarketplace, Azure, Buildings, Diamond, GoogleCloud } from '../../base/icons/src/public/billing'
 import type { PlanRange } from './select-plan-range'
 import cn from '@/utils/classnames'
 import { useAppContext } from '@/context/app-context'
@@ -42,7 +42,7 @@ const KeyValue = ({ label, tooltip, textColor, tooltipIconColor }: { icon: React
 
 const style = {
   [SelfHostedPlan.community]: {
-    icon: <RiAsterisk className='text-text-primary size-7' />,
+    icon: <Asterisk className='text-text-primary size-7' />,
     title: 'text-text-primary',
     price: 'text-text-primary',
     priceTip: 'text-text-tertiary',
@@ -142,7 +142,7 @@ const SelfHostedPlanItem: FC<Props> = ({
           {t(`${i18nPrefix}.btnText`)}
           {isPremiumPlan
             && <>
-              <div className='pt-[6px]'>
+              <div className='pt-[6px] mx-1'>
                 <AwsMarketplace className='h-6' />
               </div>
               <RiArrowRightUpLine className='size-4' />