Feat: settings dark mode (#15184)

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>
-        </div>
-        {(!isInHeader || (isInHeader && type !== Plan.sandbox)) && (
-          <UpgradeBtn
-            className='flex-shrink-0'
-            isPlain={type !== Plan.sandbox}
-            loc={loc}
-          />
+    <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>
       </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>
   )