Skip to content

Commit a5c2181

Browse files
JzoNgKVOjsincorporated
JzoNgKVO
authored and
jsincorporated
committed
Feat: settings dark mode (langgenius#15184)
1 parent c77d637 commit a5c2181

File tree

34 files changed

+447
-424
lines changed

34 files changed

+447
-424
lines changed

‎web/app/components/billing/billing-page/index.tsx

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ import React from 'react'
44
import { useTranslation } from 'react-i18next'
55
import useSWR from 'swr'
66
import {
7-
RiExternalLinkLine,
7+
RiArrowRightUpLine,
88
} from '@remixicon/react'
99
import PlanComp from '../plan'
10-
import { ReceiptList } from '../../base/icons/src/vender/line/financeAndECommerce'
10+
import Divider from '@/app/components/base/divider'
1111
import { fetchBillingUrl } from '@/service/billing'
1212
import { useAppContext } from '@/context/app-context'
1313
import { useProviderContext } from '@/context/provider-context'
@@ -25,13 +25,13 @@ const Billing: FC = () => {
2525
<div>
2626
<PlanComp loc={'billing-page'} />
2727
{enableBilling && isCurrentWorkspaceManager && billingUrl && (
28-
<a className='mt-5 flex px-6 justify-between h-12 items-center bg-gray-50 rounded-xl cursor-pointer' href={billingUrl} target='_blank' rel='noopener noreferrer'>
29-
<div className='flex items-center'>
30-
<ReceiptList className='w-4 h-4 text-gray-700' />
31-
<div className='ml-2 text-sm font-normal text-gray-700'>{t('billing.viewBilling')}</div>
32-
</div>
33-
<RiExternalLinkLine className='w-3 h-3' />
34-
</a>
28+
<>
29+
<Divider className='my-4' />
30+
<a className='flex items-center text-text-accent-light-mode-only system-xs-medium cursor-pointer' href={billingUrl} target='_blank' rel='noopener noreferrer'>
31+
<span className='pr-0.5'>{t('billing.viewBilling')}</span>
32+
<RiArrowRightUpLine className='w-4 h-4' />
33+
</a>
34+
</>
3535
)}
3636
</div>
3737
)

‎web/app/components/billing/plan/index.tsx

Lines changed: 49 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -2,36 +2,21 @@
22
import type { FC } from 'react'
33
import React from 'react'
44
import { useTranslation } from 'react-i18next'
5+
import {
6+
RiBook2Line,
7+
RiBox3Line,
8+
RiFileEditLine,
9+
RiGroup3Line,
10+
RiGroupLine,
11+
RiSquareLine,
12+
} from '@remixicon/react'
513
import { Plan, SelfHostedPlan } from '../type'
614
import VectorSpaceInfo from '../usage-info/vector-space-info'
715
import AppsInfo from '../usage-info/apps-info'
816
import UpgradeBtn from '../upgrade-btn'
9-
import { User01 } from '../../base/icons/src/vender/line/users'
10-
import { MessageFastPlus } from '../../base/icons/src/vender/line/communication'
11-
import { FileUpload } from '../../base/icons/src/vender/line/files'
12-
import cn from '@/utils/classnames'
1317
import { useProviderContext } from '@/context/provider-context'
1418
import UsageInfo from '@/app/components/billing/usage-info'
1519

16-
const typeStyle = {
17-
[Plan.sandbox]: {
18-
textClassNames: 'text-gray-900',
19-
bg: 'linear-gradient(113deg, rgba(255, 255, 255, 0.51) 3.51%, rgba(255, 255, 255, 0.00) 111.71%), #EAECF0',
20-
},
21-
[Plan.professional]: {
22-
textClassNames: 'text-[#026AA2]',
23-
bg: 'linear-gradient(113deg, rgba(255, 255, 255, 0.51) 3.51%, rgba(255, 255, 255, 0.00) 111.71%), #E0F2FE',
24-
},
25-
[Plan.team]: {
26-
textClassNames: 'text-[#3538CD]',
27-
bg: 'linear-gradient(113deg, rgba(255, 255, 255, 0.51) 3.51%, rgba(255, 255, 255, 0.00) 111.71%), #E0EAFF',
28-
},
29-
[SelfHostedPlan.enterprise]: {
30-
textClassNames: 'text-[#DC6803]',
31-
bg: 'linear-gradient(113deg, rgba(255, 255, 255, 0.51) 3.51%, rgba(255, 255, 255, 0.00) 111.71%), #FFEED3',
32-
},
33-
}
34-
3520
type Props = {
3621
loc: string
3722
}
@@ -50,74 +35,62 @@ const PlanComp: FC<Props> = ({
5035
total,
5136
} = plan
5237

53-
const isInHeader = loc === 'header'
54-
5538
return (
56-
<div
57-
className='rounded-xl border border-white select-none'
58-
style={{
59-
background: typeStyle[type].bg,
60-
boxShadow: '5px 7px 12px 0px rgba(0, 0, 0, 0.06)',
61-
}}
62-
>
63-
<div className='flex justify-between px-6 py-5 items-center'>
64-
<div>
65-
<div
66-
className='leading-[18px] text-xs font-normal opacity-70'
67-
style={{
68-
color: 'rgba(0, 0, 0, 0.64)',
69-
}}
70-
>
71-
{t('billing.currentPlan')}
72-
</div>
73-
<div className={cn(typeStyle[type].textClassNames, 'leading-[125%] text-lg font-semibold uppercase')}>
74-
{t(`billing.plans.${type}.name`)}
39+
<div className='bg-background-section-burn rounded-2xl border-[0.5px] border-effects-highlight-lightmode-off'>
40+
<div className='p-6 pb-2'>
41+
{plan.type === Plan.sandbox && (
42+
<RiBox3Line className='w-7 h-7 text-text-primary'/>
43+
)}
44+
{plan.type === Plan.professional && (
45+
<RiSquareLine className='w-7 h-7 rotate-90 text-util-colors-blue-brand-blue-brand-600'/>
46+
)}
47+
{plan.type === Plan.team && (
48+
<RiGroup3Line className='w-7 h-7 text-util-colors-indigo-indigo-600'/>
49+
)}
50+
{(plan.type as any) === SelfHostedPlan.enterprise && (
51+
<RiGroup3Line className='w-7 h-7 text-util-colors-indigo-indigo-600'/>
52+
)}
53+
<div className='mt-1 flex items-center'>
54+
<div className='grow'>
55+
<div className='mb-1 flex items-center gap-1'>
56+
<div className='text-text-primary system-md-semibold-uppercase'>{t(`billing.plans.${type}.name`)}</div>
57+
<div className='px-1 py-0.5 border border-divider-deep rounded-[5px] text-text-tertiary system-2xs-medium-uppercase'>{t('billing.currentPlan')}</div>
58+
</div>
59+
<div className='system-xs-regular text-util-colors-gray-gray-600'>{t(`billing.plans.${type}.for`)}</div>
7560
</div>
61+
{(plan.type as any) !== SelfHostedPlan.enterprise && (
62+
<UpgradeBtn
63+
className='shrink-0'
64+
isPlain={type === Plan.team}
65+
isShort
66+
loc={loc}
67+
/>
68+
)}
7669
</div>
77-
{(!isInHeader || (isInHeader && type !== Plan.sandbox)) && (
78-
<UpgradeBtn
79-
className='flex-shrink-0'
80-
isPlain={type !== Plan.sandbox}
81-
loc={loc}
82-
/>
83-
)}
8470
</div>
85-
8671
{/* Plan detail */}
87-
<div className='rounded-xl bg-white px-6 py-3'>
88-
72+
<div className='p-2 grid content-start grid-cols-3 gap-1'>
73+
<AppsInfo />
8974
<UsageInfo
90-
className='py-3'
91-
Icon={User01}
75+
Icon={RiGroupLine}
9276
name={t('billing.usagePage.teamMembers')}
9377
usage={usage.teamMembers}
9478
total={total.teamMembers}
9579
/>
96-
<AppsInfo className='py-3' />
97-
<VectorSpaceInfo className='py-3' />
9880
<UsageInfo
99-
className='py-3'
100-
Icon={MessageFastPlus}
101-
name={t('billing.usagePage.annotationQuota')}
102-
usage={usage.annotatedResponse}
103-
total={total.annotatedResponse}
104-
/>
105-
<UsageInfo
106-
className='py-3'
107-
Icon={FileUpload}
81+
Icon={RiBook2Line}
10882
name={t('billing.usagePage.documentsUploadQuota')}
10983
usage={usage.documentsUploadQuota}
11084
total={total.documentsUploadQuota}
11185
/>
112-
{isInHeader && type === Plan.sandbox && (
113-
<UpgradeBtn
114-
className='flex-shrink-0 my-3'
115-
isFull
116-
size='lg'
117-
isPlain={type !== Plan.sandbox}
118-
loc={loc}
119-
/>
120-
)}
86+
<VectorSpaceInfo />
87+
<UsageInfo
88+
Icon={RiFileEditLine}
89+
name={t('billing.usagePage.annotationQuota')}
90+
usage={usage.annotatedResponse}
91+
total={total.annotatedResponse}
92+
/>
93+
12194
</div>
12295
</div>
12396
)

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,6 @@ const Pricing: FC<Props> = ({
6060
<div className='py-2 flex items-center justify-between h-[64px]'>
6161
<TabSlider
6262
value={currentPlan}
63-
itemWidth={170}
6463
className='inline-flex'
6564
options={[
6665
{

‎web/app/components/billing/progress-bar/index.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
1+
import cn from '@/utils/classnames'
2+
13
type ProgressBarProps = {
24
percent: number
35
color: string
46
}
7+
58
const ProgressBar = ({
69
percent = 0,
710
color = '#2970FF',
811
}: ProgressBarProps) => {
912
return (
10-
<div className='bg-[#F2F4F7] rounded-[4px] overflow-hidden'>
13+
<div className='bg-components-progress-bar-bg rounded-[6px] overflow-hidden'>
1114
<div
12-
className='h-2 rounded-[4px]'
15+
className={cn('h-1 rounded-[6px]', color)}
1316
style={{
1417
width: `${Math.min(percent, 100)}%`,
15-
backgroundColor: color,
1618
}}
1719
/>
1820
</div>

‎web/app/components/billing/upgrade-btn/index.tsx

Lines changed: 8 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import type { FC } from 'react'
33
import React from 'react'
44
import { useTranslation } from 'react-i18next'
55
import PremiumBadge from '../../base/premium-badge'
6+
import Button from '@/app/components/base/button'
67
import { SparklesSoft } from '@/app/components/base/icons/src/public/common'
7-
import cn from '@/utils/classnames'
88
import { useModalContext } from '@/context/modal-context'
99

1010
type Props = {
@@ -17,23 +17,7 @@ type Props = {
1717
loc?: string
1818
}
1919

20-
const PlainBtn = ({ className, onClick }: { className?: string; onClick: () => void }) => {
21-
const { t } = useTranslation()
22-
23-
return (
24-
<div
25-
className={cn(className, 'flex items-center h-8 px-3 rounded-lg border border-gray-200 bg-white shadow-sm cursor-pointer')}
26-
onClick={onClick}
27-
>
28-
<div className='leading-[18px] text-[13px] font-medium text-gray-700'>
29-
{t('billing.upgradeBtn.plain')}
30-
</div>
31-
</div>
32-
)
33-
}
34-
3520
const UpgradeBtn: FC<Props> = ({
36-
className,
3721
isPlain = false,
3822
isShort = false,
3923
onClick: _onClick,
@@ -56,8 +40,13 @@ const UpgradeBtn: FC<Props> = ({
5640
}
5741
}
5842

59-
if (isPlain)
60-
return <PlainBtn onClick={onClick} className={className} />
43+
if (isPlain) {
44+
return (
45+
<Button onClick={onClick}>
46+
{t('billing.upgradeBtn.plain')}
47+
</Button>
48+
)
49+
}
6150

6251
return (
6352
<PremiumBadge

‎web/app/components/billing/usage-info/apps-info.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22
import type { FC } from 'react'
33
import React from 'react'
44
import { useTranslation } from 'react-i18next'
5-
import { ChatBot } from '../../base/icons/src/vender/line/communication'
5+
import {
6+
RiApps2Line,
7+
} from '@remixicon/react'
68
import UsageInfo from '../usage-info'
79
import { useProviderContext } from '@/context/provider-context'
810

@@ -22,7 +24,7 @@ const AppsInfo: FC<Props> = ({
2224
return (
2325
<UsageInfo
2426
className={className}
25-
Icon={ChatBot}
27+
Icon={RiApps2Line}
2628
name={t('billing.usagePage.buildApps')}
2729
usage={usage.buildApps}
2830
total={total.buildApps}

‎web/app/components/billing/usage-info/index.tsx

Lines changed: 25 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next'
55
import ProgressBar from '../progress-bar'
66
import { NUM_INFINITE } from '../config'
77
import Tooltip from '@/app/components/base/tooltip'
8+
import cn from '@/utils/classnames'
89

910
type Props = {
1011
className?: string
@@ -33,43 +34,37 @@ const UsageInfo: FC<Props> = ({
3334
const percent = usage / total * 100
3435
const color = (() => {
3536
if (percent < LOW)
36-
return '#155EEF'
37+
return 'bg-components-progress-bar-progress-solid'
3738

3839
if (percent < MIDDLE)
39-
return '#F79009'
40+
return 'bg-components-progress-warning-progress'
4041

41-
return '#F04438'
42+
return 'bg-components-progress-error-progress'
4243
})()
4344
return (
44-
<div className={className}>
45-
<div className='flex justify-between h-5 items-center'>
46-
<div className='flex items-center'>
47-
<Icon className='w-4 h-4 text-gray-700' />
48-
<div className='mx-1 leading-5 text-sm font-medium text-gray-700'>{name}</div>
49-
{tooltip && (
50-
<Tooltip
51-
popupContent={
52-
<div className='w-[180px]'>
53-
{tooltip}
54-
</div>
55-
}
56-
/>
57-
)}
58-
</div>
59-
<div className='flex items-center leading-[18px] text-[13px] font-normal'>
60-
<div style={{
61-
color: percent < LOW ? '#344054' : color,
62-
}}>{usage}{unit}</div>
63-
<div className='mx-1 text-gray-300'>/</div>
64-
<div className='text-gray-500'>{total === NUM_INFINITE ? t('billing.plansCommon.unlimited') : `${total}${unit}`}</div>
65-
</div>
45+
<div className={cn('p-4 flex flex-col gap-2 rounded-xl bg-components-panel-bg', className)}>
46+
<Icon className='w-4 h-4 text-text-tertiary' />
47+
<div className='flex items-center gap-1'>
48+
<div className='system-xs-medium text-text-tertiary'>{name}</div>
49+
{tooltip && (
50+
<Tooltip
51+
popupContent={
52+
<div className='w-[180px]'>
53+
{tooltip}
54+
</div>
55+
}
56+
/>
57+
)}
6658
</div>
67-
<div className='mt-2'>
68-
<ProgressBar
69-
percent={percent}
70-
color={color}
71-
/>
59+
<div className='flex items-center gap-1 system-md-semibold text-text-primary'>
60+
{usage}
61+
<div className='system-md-regular text-text-quaternary'>/</div>
62+
<div>{total === NUM_INFINITE ? t('billing.plansCommon.unlimited') : `${total}${unit}`}</div>
7263
</div>
64+
<ProgressBar
65+
percent={percent}
66+
color={color}
67+
/>
7368
</div>
7469
)
7570
}

‎web/app/components/billing/usage-info/vector-space-info.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
'use client'
22
import type { FC } from 'react'
33
import React from 'react'
4+
import {
5+
RiHardDrive3Line,
6+
} from '@remixicon/react'
47
import { useTranslation } from 'react-i18next'
5-
import { ArtificialBrain } from '../../base/icons/src/vender/line/development'
68
import UsageInfo from '../usage-info'
79
import { useProviderContext } from '@/context/provider-context'
810

@@ -22,7 +24,7 @@ const VectorSpaceInfo: FC<Props> = ({
2224
return (
2325
<UsageInfo
2426
className={className}
25-
Icon={ArtificialBrain}
27+
Icon={RiHardDrive3Line}
2628
name={t('billing.usagePage.vectorSpace')}
2729
tooltip={t('billing.usagePage.vectorSpaceTooltip') as string}
2830
usage={usage.vectorSpace}

0 commit comments

Comments
 (0)