Feat: settings dark mode (#15184)

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}