Feat: settings dark mode (#15184)

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>
   )
 }