Feat: settings dark mode

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

@@ -4,10 +4,10 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import useSWR from 'swr'
 import {
-  RiExternalLinkLine,
+  RiArrowRightUpLine,
 } from '@remixicon/react'
 import PlanComp from '../plan'
-import { ReceiptList } from '../../base/icons/src/vender/line/financeAndECommerce'
+import Divider from '@/app/components/base/divider'
 import { fetchBillingUrl } from '@/service/billing'
 import { useAppContext } from '@/context/app-context'
 import { useProviderContext } from '@/context/provider-context'
@@ -25,13 +25,13 @@ const Billing: FC = () => {
     <div>
       <PlanComp loc={'billing-page'} />
       {enableBilling && isCurrentWorkspaceManager && billingUrl && (
-        <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'>
-          <div className='flex items-center'>
-            <ReceiptList className='w-4 h-4 text-gray-700' />
-            <div className='ml-2 text-sm font-normal text-gray-700'>{t('billing.viewBilling')}</div>
-          </div>
-          <RiExternalLinkLine className='w-3 h-3' />
-        </a>
+        <>
+          <Divider className='my-4' />
+          <a className='flex items-center text-text-accent-light-mode-only system-xs-medium cursor-pointer' href={billingUrl} target='_blank' rel='noopener noreferrer'>
+            <span className='pr-0.5'>{t('billing.viewBilling')}</span>
+            <RiArrowRightUpLine className='w-4 h-4' />
+          </a>
+        </>
       )}
     </div>
   )

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

@@ -2,36 +2,21 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
+import {
+  RiBook2Line,
+  RiBox3Line,
+  RiFileEditLine,
+  RiGroup3Line,
+  RiGroupLine,
+  RiSquareLine,
+} from '@remixicon/react'
 import { Plan, SelfHostedPlan } from '../type'
 import VectorSpaceInfo from '../usage-info/vector-space-info'
 import AppsInfo from '../usage-info/apps-info'
 import UpgradeBtn from '../upgrade-btn'
-import { User01 } from '../../base/icons/src/vender/line/users'
-import { MessageFastPlus } from '../../base/icons/src/vender/line/communication'
-import { FileUpload } from '../../base/icons/src/vender/line/files'
-import cn from '@/utils/classnames'
 import { useProviderContext } from '@/context/provider-context'
 import UsageInfo from '@/app/components/billing/usage-info'
 
-const typeStyle = {
-  [Plan.sandbox]: {
-    textClassNames: 'text-gray-900',
-    bg: 'linear-gradient(113deg, rgba(255, 255, 255, 0.51) 3.51%, rgba(255, 255, 255, 0.00) 111.71%), #EAECF0',
-  },
-  [Plan.professional]: {
-    textClassNames: 'text-[#026AA2]',
-    bg: 'linear-gradient(113deg, rgba(255, 255, 255, 0.51) 3.51%, rgba(255, 255, 255, 0.00) 111.71%), #E0F2FE',
-  },
-  [Plan.team]: {
-    textClassNames: 'text-[#3538CD]',
-    bg: 'linear-gradient(113deg, rgba(255, 255, 255, 0.51) 3.51%, rgba(255, 255, 255, 0.00) 111.71%), #E0EAFF',
-  },
-  [SelfHostedPlan.enterprise]: {
-    textClassNames: 'text-[#DC6803]',
-    bg: 'linear-gradient(113deg, rgba(255, 255, 255, 0.51) 3.51%, rgba(255, 255, 255, 0.00) 111.71%), #FFEED3',
-  },
-}
-
 type Props = {
   loc: string
 }
@@ -50,74 +35,62 @@ const PlanComp: FC<Props> = ({
     total,
   } = plan
 
-  const isInHeader = loc === 'header'
-
   return (
-    <div
-      className='rounded-xl border border-white select-none'
-      style={{
-        background: typeStyle[type].bg,
-        boxShadow: '5px 7px 12px 0px rgba(0, 0, 0, 0.06)',
-      }}
-    >
-      <div className='flex justify-between px-6 py-5 items-center'>
-        <div>
-          <div
-            className='leading-[18px] text-xs font-normal opacity-70'
-            style={{
-              color: 'rgba(0, 0, 0, 0.64)',
-            }}
-          >
-            {t('billing.currentPlan')}
-          </div>
-          <div className={cn(typeStyle[type].textClassNames, 'leading-[125%] text-lg font-semibold uppercase')}>
-            {t(`billing.plans.${type}.name`)}
+    <div className='bg-background-section-burn rounded-2xl border-[0.5px] border-effects-highlight-lightmode-off'>
+      <div className='p-6 pb-2'>
+        {plan.type === Plan.sandbox && (
+          <RiBox3Line className='w-7 h-7 text-text-primary'/>
+        )}
+        {plan.type === Plan.professional && (
+          <RiSquareLine className='w-7 h-7 rotate-90 text-util-colors-blue-brand-blue-brand-600'/>
+        )}
+        {plan.type === Plan.team && (
+          <RiGroup3Line className='w-7 h-7 text-util-colors-indigo-indigo-600'/>
+        )}
+        {(plan.type as any) === SelfHostedPlan.enterprise && (
+          <RiGroup3Line className='w-7 h-7 text-util-colors-indigo-indigo-600'/>
+        )}
+        <div className='mt-1 flex items-center'>
+          <div className='grow'>
+            <div className='mb-1 flex items-center gap-1'>
+              <div className='text-text-primary system-md-semibold-uppercase'>{t(`billing.plans.${type}.name`)}</div>
+              <div className='px-1 py-0.5 border border-divider-deep rounded-[5px] text-text-tertiary system-2xs-medium-uppercase'>{t('billing.currentPlan')}</div>
+            </div>
+            <div className='system-xs-regular text-util-colors-gray-gray-600'>{t(`billing.plans.${type}.for`)}</div>
           </div>
+          {(plan.type as any) !== SelfHostedPlan.enterprise && (
+            <UpgradeBtn
+              className='shrink-0'
+              isPlain={type === Plan.team}
+              isShort
+              loc={loc}
+            />
+          )}
         </div>
-        {(!isInHeader || (isInHeader && type !== Plan.sandbox)) && (
-          <UpgradeBtn
-            className='flex-shrink-0'
-            isPlain={type !== Plan.sandbox}
-            loc={loc}
-          />
-        )}
       </div>
-
       {/* Plan detail */}
-      <div className='rounded-xl bg-white px-6 py-3'>
-
+      <div className='p-2 grid content-start grid-cols-3 gap-1'>
+        <AppsInfo />
         <UsageInfo
-          className='py-3'
-          Icon={User01}
+          Icon={RiGroupLine}
           name={t('billing.usagePage.teamMembers')}
           usage={usage.teamMembers}
           total={total.teamMembers}
         />
-        <AppsInfo className='py-3' />
-        <VectorSpaceInfo className='py-3' />
         <UsageInfo
-          className='py-3'
-          Icon={MessageFastPlus}
-          name={t('billing.usagePage.annotationQuota')}
-          usage={usage.annotatedResponse}
-          total={total.annotatedResponse}
-        />
-        <UsageInfo
-          className='py-3'
-          Icon={FileUpload}
+          Icon={RiBook2Line}
           name={t('billing.usagePage.documentsUploadQuota')}
           usage={usage.documentsUploadQuota}
           total={total.documentsUploadQuota}
         />
-        {isInHeader && type === Plan.sandbox && (
-          <UpgradeBtn
-            className='flex-shrink-0 my-3'
-            isFull
-            size='lg'
-            isPlain={type !== Plan.sandbox}
-            loc={loc}
-          />
-        )}
+        <VectorSpaceInfo />
+        <UsageInfo
+          Icon={RiFileEditLine}
+          name={t('billing.usagePage.annotationQuota')}
+          usage={usage.annotatedResponse}
+          total={total.annotatedResponse}
+        />
+
       </div>
     </div>
   )

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

@@ -60,7 +60,6 @@ const Pricing: FC<Props> = ({
             <div className='py-2 flex items-center justify-between h-[64px]'>
               <TabSlider
                 value={currentPlan}
-                itemWidth={170}
                 className='inline-flex'
                 options={[
                   {

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

@@ -1,18 +1,20 @@
+import cn from '@/utils/classnames'
+
 type ProgressBarProps = {
   percent: number
   color: string
 }
+
 const ProgressBar = ({
   percent = 0,
   color = '#2970FF',
 }: ProgressBarProps) => {
   return (
-    <div className='bg-[#F2F4F7] rounded-[4px] overflow-hidden'>
+    <div className='bg-components-progress-bar-bg rounded-[6px] overflow-hidden'>
       <div
-        className='h-2 rounded-[4px]'
+        className={cn('h-1 rounded-[6px]', color)}
         style={{
           width: `${Math.min(percent, 100)}%`,
-          backgroundColor: color,
         }}
       />
     </div>

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

@@ -3,8 +3,8 @@ import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import PremiumBadge from '../../base/premium-badge'
+import Button from '@/app/components/base/button'
 import { SparklesSoft } from '@/app/components/base/icons/src/public/common'
-import cn from '@/utils/classnames'
 import { useModalContext } from '@/context/modal-context'
 
 type Props = {
@@ -17,23 +17,7 @@ type Props = {
   loc?: string
 }
 
-const PlainBtn = ({ className, onClick }: { className?: string; onClick: () => void }) => {
-  const { t } = useTranslation()
-
-  return (
-    <div
-      className={cn(className, 'flex items-center h-8 px-3 rounded-lg border border-gray-200 bg-white shadow-sm cursor-pointer')}
-      onClick={onClick}
-    >
-      <div className='leading-[18px] text-[13px] font-medium text-gray-700'>
-        {t('billing.upgradeBtn.plain')}
-      </div>
-    </div>
-  )
-}
-
 const UpgradeBtn: FC<Props> = ({
-  className,
   isPlain = false,
   isShort = false,
   onClick: _onClick,
@@ -56,8 +40,13 @@ const UpgradeBtn: FC<Props> = ({
     }
   }
 
-  if (isPlain)
-    return <PlainBtn onClick={onClick} className={className} />
+  if (isPlain) {
+    return (
+      <Button onClick={onClick}>
+        {t('billing.upgradeBtn.plain')}
+      </Button>
+    )
+  }
 
   return (
     <PremiumBadge

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

@@ -2,7 +2,9 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { ChatBot } from '../../base/icons/src/vender/line/communication'
+import {
+  RiApps2Line,
+} from '@remixicon/react'
 import UsageInfo from '../usage-info'
 import { useProviderContext } from '@/context/provider-context'
 
@@ -22,7 +24,7 @@ const AppsInfo: FC<Props> = ({
   return (
     <UsageInfo
       className={className}
-      Icon={ChatBot}
+      Icon={RiApps2Line}
       name={t('billing.usagePage.buildApps')}
       usage={usage.buildApps}
       total={total.buildApps}

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

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next'
 import ProgressBar from '../progress-bar'
 import { NUM_INFINITE } from '../config'
 import Tooltip from '@/app/components/base/tooltip'
+import cn from '@/utils/classnames'
 
 type Props = {
   className?: string
@@ -33,43 +34,37 @@ const UsageInfo: FC<Props> = ({
   const percent = usage / total * 100
   const color = (() => {
     if (percent < LOW)
-      return '#155EEF'
+      return 'bg-components-progress-bar-progress-solid'
 
     if (percent < MIDDLE)
-      return '#F79009'
+      return 'bg-components-progress-warning-progress'
 
-    return '#F04438'
+    return 'bg-components-progress-error-progress'
   })()
   return (
-    <div className={className}>
-      <div className='flex justify-between h-5 items-center'>
-        <div className='flex items-center'>
-          <Icon className='w-4 h-4 text-gray-700' />
-          <div className='mx-1 leading-5 text-sm font-medium text-gray-700'>{name}</div>
-          {tooltip && (
-            <Tooltip
-              popupContent={
-                <div className='w-[180px]'>
-                  {tooltip}
-                </div>
-              }
-            />
-          )}
-        </div>
-        <div className='flex items-center leading-[18px] text-[13px] font-normal'>
-          <div style={{
-            color: percent < LOW ? '#344054' : color,
-          }}>{usage}{unit}</div>
-          <div className='mx-1 text-gray-300'>/</div>
-          <div className='text-gray-500'>{total === NUM_INFINITE ? t('billing.plansCommon.unlimited') : `${total}${unit}`}</div>
-        </div>
+    <div className={cn('p-4 flex flex-col gap-2 rounded-xl bg-components-panel-bg', className)}>
+      <Icon className='w-4 h-4 text-text-tertiary' />
+      <div className='flex items-center gap-1'>
+        <div className='system-xs-medium text-text-tertiary'>{name}</div>
+        {tooltip && (
+          <Tooltip
+            popupContent={
+              <div className='w-[180px]'>
+                {tooltip}
+              </div>
+            }
+          />
+        )}
       </div>
-      <div className='mt-2'>
-        <ProgressBar
-          percent={percent}
-          color={color}
-        />
+      <div className='flex items-center gap-1 system-md-semibold  text-text-primary'>
+        {usage}
+        <div className='system-md-regular text-text-quaternary'>/</div>
+        <div>{total === NUM_INFINITE ? t('billing.plansCommon.unlimited') : `${total}${unit}`}</div>
       </div>
+      <ProgressBar
+        percent={percent}
+        color={color}
+      />
     </div>
   )
 }

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

@@ -1,8 +1,10 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
+import {
+  RiHardDrive3Line,
+} from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import { ArtificialBrain } from '../../base/icons/src/vender/line/development'
 import UsageInfo from '../usage-info'
 import { useProviderContext } from '@/context/provider-context'
 
@@ -22,7 +24,7 @@ const VectorSpaceInfo: FC<Props> = ({
   return (
     <UsageInfo
       className={className}
-      Icon={ArtificialBrain}
+      Icon={RiHardDrive3Line}
       name={t('billing.usagePage.vectorSpace')}
       tooltip={t('billing.usagePage.vectorSpaceTooltip') as string}
       usage={usage.vectorSpace}