fix: UI adjust
This commit is contained in:
NFish
parent
ffa5af1356
commit
3fcf7e88b0
@ -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>
|
||||
|
After Width: | Height: | Size: 297 B |
@ -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"
|
||||
}
|
||||
@ -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
|
||||
@ -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'
|
||||
|
||||
@ -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,
|
||||
)
|
||||
|
||||
@ -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>
|
||||
)}
|
||||
|
||||
@ -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)
|
||||
}} />
|
||||
|
||||
@ -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' />
|
||||
|
||||
Loading…
Reference in New Issue
Block a user