feat: create datasets step two dark mode

web/app/components/datasets/create/step-two/index.module.css

@@ -18,11 +18,10 @@
 }
 
 .form .label {
-  @apply pb-2 flex items-center;
+  @apply pb-2 flex items-center text-text-secondary;
   font-weight: 500;
   font-size: 16px;
   line-height: 24px;
-  color: #344054;
 }
 
 .segmentationItem {
@@ -91,8 +90,7 @@
 }
 
 .radioItem {
-  @apply relative mb-2 rounded-xl border border-gray-100 cursor-pointer;
-  background-color: #fcfcfd;
+  @apply relative mb-2 rounded-xl border border-components-option-card-option-border cursor-pointer bg-components-option-card-option-bg;
 }
 
 .radioItem.segmentationItem.custom {

web/app/components/datasets/create/step-two/index.tsx

@@ -588,7 +588,7 @@ const StepTwo = ({
                 && <OptionCard
                   title={t('datasetCreation.stepTwo.general')}
                   icon={<Image src={SettingCog} alt={t('datasetCreation.stepTwo.general')} />}
-                  activeHeaderClassName='bg-gradient-to-r from-[#EFF0F9] to-[#F9FAFB]'
+                  activeHeaderClassName='bg-dataset-option-card-blue-gradient'
                   description={t('datasetCreation.stepTwo.generalTip')}
                   isActive={
                     [ChuckingMode.text, ChuckingMode.qa].includes(
@@ -638,7 +638,7 @@ const StepTwo = ({
                               <Checkbox
                                 checked={rule.enabled}
                               />
-                              <label className="ml-2 text-sm font-normal cursor-pointer text-gray-800">{getRuleName(rule.id)}</label>
+                              <label className="ml-2 text-sm font-normal cursor-pointer text-text-secondary">{getRuleName(rule.id)}</label>
                             </div>
                           ))}
                         </div>
@@ -692,7 +692,7 @@ const StepTwo = ({
                   title={t('datasetCreation.stepTwo.parentChild')}
                   icon={<Image src={FamilyMod} alt={t('datasetCreation.stepTwo.parentChild')} />}
                   effectImg={OrangeEffect.src}
-                  activeHeaderClassName='bg-gradient-to-r from-[#F9F1EE] to-[#F9FAFB]'
+                  activeHeaderClassName='bg-dataset-option-card-orange-gradient'
                   description={t('datasetCreation.stepTwo.parentChildTip')}
                   isActive={
                     datasetId ? currentDataset!.doc_form === ChuckingMode.parentChild : docForm === ChuckingMode.parentChild
@@ -805,7 +805,7 @@ const StepTwo = ({
                               <Checkbox
                                 checked={rule.enabled}
                               />
-                              <label className="ml-2 text-sm font-normal cursor-pointer text-gray-800">{getRuleName(rule.id)}</label>
+                              <label className="ml-2 text-sm font-normal cursor-pointer text-text-secondary">{getRuleName(rule.id)}</label>
                             </div>
                           ))}
                         </div>
@@ -820,105 +820,82 @@ const StepTwo = ({
           <div className='max-w-[640px]'>
             <div className='flex items-center gap-3 flex-wrap sm:flex-nowrap'>
               {(!hasSetIndexType || (hasSetIndexType && indexingType === IndexingType.QUALIFIED)) && (
-                <div
-                  className={cn(
-                    s.radioItem,
-                    s.indexItem,
-                    !isAPIKeySet && s.disabled,
-                    !hasSetIndexType && indexType === IndexingType.QUALIFIED && s.active,
-                    hasSetIndexType && s.disabled,
-                    hasSetIndexType && '!w-full !min-h-[96px]',
-                  )}
-                  onClick={() => {
+                <OptionCard
+                  title={<p className='flex items-center'>
+                    {t('datasetCreation.stepTwo.qualified')}
+                    {!hasSetIndexType && <Badge className='ml-1' uppercase>{t('datasetCreation.stepTwo.recommend')}</Badge>}
+                    <span className='ml-auto'>
+                      {!hasSetIndexType && <span className={cn(s.radio)} />}
+                    </span>
+                  </p>}
+                  description={t('datasetCreation.stepTwo.qualifiedTip')}
+                  icon={<Image src={indexMethodIcon.high_quality} alt='' />}
+                  isActive={!hasSetIndexType && indexType === IndexingType.QUALIFIED}
+                  disabled={!isAPIKeySet || hasSetIndexType}
+                  onSwitched={() => {
                     if (isAPIKeySet)
                       setIndexType(IndexingType.QUALIFIED)
                   }}
-                >
-                  <div className='h-8 p-1.5 bg-white rounded-lg border border-components-panel-border-subtle justify-center items-center inline-flex absolute left-5 top-[18px]'>
-                    <Image src={indexMethodIcon.high_quality} alt='Gold Icon' width={20} height={20} />
-                  </div>
-                  {!hasSetIndexType && <span className={cn(s.radio)} />}
-                  <div className={s.typeHeader}>
-                    <div className={s.title}>
-                      {t('datasetCreation.stepTwo.qualified')}
-                      {!hasSetIndexType && <span className={s.recommendTag}>{t('datasetCreation.stepTwo.recommend')}</span>}
-                    </div>
-                    <div className={s.tip}>{t('datasetCreation.stepTwo.qualifiedTip')}</div>
-                  </div>
-                  {!isAPIKeySet && (
-                    <div className={s.warningTip}>
-                      <span>{t('datasetCreation.stepTwo.warning')}&nbsp;</span>
-                      <span className={s.click} onClick={onSetting}>{t('datasetCreation.stepTwo.click')}</span>
-                    </div>
-                  )}
-                </div>
+                />
               )}
 
               {(!hasSetIndexType || (hasSetIndexType && indexingType === IndexingType.ECONOMICAL)) && (
-                <PortalToFollowElem
-                  open={
-                    isHoveringEconomy && docForm !== ChuckingMode.text
-                  }
-                  placement={'top'}
-                >
-                  <PortalToFollowElemTrigger>
-                    <div
-                      className={cn(
-                        s.radioItem,
-                        s.indexItem,
-                        !hasSetIndexType && indexType === IndexingType.ECONOMICAL && s.active,
-                        hasSetIndexType && s.disabled,
-                        hasSetIndexType && '!w-full !min-h-[96px]',
-                        docForm !== ChuckingMode.text && s.disabled,
-                      )}
-                      onClick={changeToEconomicalType}
-                      ref={economyDomRef}
-                    >
-                      <CustomDialog show={isQAConfirmDialogOpen} onClose={() => setIsQAConfirmDialogOpen(false)} className='w-[432px]'>
-                        <header className='pt-6 mb-4'>
-                          <h2 className='text-lg font-semibold'>
-                            {t('datasetCreation.stepTwo.qaSwitchHighQualityTipTitle')}
-                          </h2>
-                          <p className='font-normal text-sm mt-2'>
-                            {t('datasetCreation.stepTwo.qaSwitchHighQualityTipContent')}
-                          </p>
-                        </header>
-                        <div className='flex gap-2 pb-6'>
-                          <Button className='ml-auto' onClick={() => {
-                            setIsQAConfirmDialogOpen(false)
-                          }}>
-                            {t('datasetCreation.stepTwo.cancel')}
-                          </Button>
-                          <Button variant={'primary'} onClick={() => {
-                            setIsQAConfirmDialogOpen(false)
-                            setIndexType(IndexingType.QUALIFIED)
-                            setDocForm(ChuckingMode.qa)
-                          }}>
-                            {t('datasetCreation.stepTwo.switch')}
-                          </Button>
-                        </div>
-                      </CustomDialog>
-                      <div className='h-8 p-1.5 bg-white rounded-lg border border-components-panel-border-subtle justify-center items-center inline-flex absolute left-5 top-[18px]'>
-                        <Image src={indexMethodIcon.economical} alt='Economical Icon' width={20} height={20} />
-                      </div>
-                      {!hasSetIndexType && <span className={cn(s.radio)} />}
-                      <div className={s.typeHeader}>
-                        <div className={s.title}>{t('datasetCreation.stepTwo.economical')}</div>
-                        <div className={s.tip}>{t('datasetCreation.stepTwo.economicalTip')}</div>
-                      </div>
+                <>
+                  <CustomDialog show={isQAConfirmDialogOpen} onClose={() => setIsQAConfirmDialogOpen(false)} className='w-[432px]'>
+                    <header className='pt-6 mb-4'>
+                      <h2 className='text-lg font-semibold'>
+                        {t('datasetCreation.stepTwo.qaSwitchHighQualityTipTitle')}
+                      </h2>
+                      <p className='font-normal text-sm mt-2'>
+                        {t('datasetCreation.stepTwo.qaSwitchHighQualityTipContent')}
+                      </p>
+                    </header>
+                    <div className='flex gap-2 pb-6'>
+                      <Button className='ml-auto' onClick={() => {
+                        setIsQAConfirmDialogOpen(false)
+                      }}>
+                        {t('datasetCreation.stepTwo.cancel')}
+                      </Button>
+                      <Button variant={'primary'} onClick={() => {
+                        setIsQAConfirmDialogOpen(false)
+                        setIndexType(IndexingType.QUALIFIED)
+                        setDocForm(ChuckingMode.qa)
+                      }}>
+                        {t('datasetCreation.stepTwo.switch')}
+                      </Button>
                     </div>
-                  </PortalToFollowElemTrigger>
-                  <PortalToFollowElemContent>
-                    <div className='p-3 bg-white text-xs font-medium text-text-secondary rounded-lg shadow-lg'>
-                      {
-                        docForm === ChuckingMode.qa
-                          ? t('datasetCreation.stepTwo.notAvailableForQA')
-                          : t('datasetCreation.stepTwo.notAvailableForParentChild')
-                      }
-                    </div>
-                  </PortalToFollowElemContent>
-                </PortalToFollowElem>
-              )}
+                  </CustomDialog>
+                  <PortalToFollowElem
+                    open={
+                      isHoveringEconomy && docForm !== ChuckingMode.text
+                    }
+                    placement={'top'}
+                  >
+                    <PortalToFollowElemTrigger>
+                      <OptionCard
+                        title={t('datasetCreation.stepTwo.economical')}
+                        description={t('datasetCreation.stepTwo.economicalTip')}
+                        icon={<Image src={indexMethodIcon.economical} alt='' />}
+                        isActive={!hasSetIndexType && indexType === IndexingType.ECONOMICAL}
+                        disabled={!isAPIKeySet || hasSetIndexType || docForm !== ChuckingMode.text}
+                        ref={economyDomRef}
+                        onSwitched={() => {
+                          if (isAPIKeySet)
+                            setIndexType(IndexingType.ECONOMICAL)
+                        }}
+                      />
+                    </PortalToFollowElemTrigger>
+                    <PortalToFollowElemContent>
+                      <div className='p-3 bg-white text-xs font-medium text-text-secondary rounded-lg shadow-lg'>
+                        {
+                          docForm === ChuckingMode.qa
+                            ? t('datasetCreation.stepTwo.notAvailableForQA')
+                            : t('datasetCreation.stepTwo.notAvailableForParentChild')
+                        }
+                      </div>
+                    </PortalToFollowElemContent>
+                  </PortalToFollowElem>
+                </>)}
             </div>
             {hasSetIndexType && indexType === IndexingType.ECONOMICAL && (
               <div className='mt-2 text-xs text-gray-500 font-medium'>

web/app/components/datasets/create/step-two/language-select/index.tsx

@@ -28,7 +28,7 @@ const LanguageSelect: FC<ILanguageSelectProps> = ({
           {languages.filter(language => language.supported).map(({ prompt_name }) => (
             <div
               key={prompt_name}
-              className='py-2 px-3 mx-1 flex items-center gap-2 hover:bg-gray-100 rounded-lg cursor-pointer text-gray-700 text-sm'
+              className='py-2 px-3 mx-1 flex items-center gap-2 hover:bg-gray-100 rounded-lg cursor-pointer text-text-secondary text-sm'
               onClick={() => onSelect(prompt_name)}>{prompt_name}
             </div>
           ))}
@@ -40,7 +40,7 @@ const LanguageSelect: FC<ILanguageSelectProps> = ({
           <RiArrowDownSLine className='w-3 h-3 opacity-60' />
         </div>
       }
-      btnClassName={open => cn('!border-0 !px-0 !py-0 !bg-inherit !hover:bg-inherit', open ? 'text-blue-600' : 'text-gray-500')}
+      btnClassName={() => cn('!border-0 !px-0 !py-0 !bg-inherit !hover:bg-inherit text-components-button-tertiary-text')}
       className='!w-[120px] h-fit !z-20 !translate-x-0 !left-[-16px]'
     />
   )

web/app/components/datasets/create/step-two/option-card.tsx

@@ -1,12 +1,11 @@
-import { type ComponentProps, type FC, type ReactNode } from 'react'
+import { type ComponentProps, type FC, type ReactNode, forwardRef } from 'react'
 import Image from 'next/image'
-import piggyBank from '../assets/piggy-bank-01.svg'
 import Effect from '../assets/option-card-effect-blue.svg'
 import classNames from '@/utils/classnames'
 
 const TriangleArrow: FC<ComponentProps<'svg'>> = props => (
   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="11" viewBox="0 0 24 11" fill="none" {...props}>
-    <path d="M9.87868 1.12132C11.0503 -0.0502525 12.9497 -0.0502525 14.1213 1.12132L23.3137 10.3137H0.686292L9.87868 1.12132Z" fill="white"/>
+    <path d="M9.87868 1.12132C11.0503 -0.0502525 12.9497 -0.0502525 14.1213 1.12132L23.3137 10.3137H0.686292L9.87868 1.12132Z" fill="currentColor"/>
   </svg>
 )
 
@@ -27,12 +26,12 @@ export const OptionCardHeader: FC<OptionCardHeaderProps> = (props) => {
   )}>
     <div className='size-14 flex items-center justify-center relative overflow-hidden'>
       {isActive && <Image src={effectImg || Effect.src} className='absolute top-0 left-0 w-full h-full' alt='' width={56} height={56} />}
-      <div className='size-8 rounded-lg border p-1.5 shadow border-components-panel-border-subtle justify-center flex bg-white'>
-        {icon || <Image src={piggyBank.src} className='size-5' alt={description} width={20} height={20} />}
+      <div className='size-8 rounded-lg border p-1.5 shadow border-components-panel-border-subtle justify-center flex bg-background-default-dodge'>
+        {icon}
       </div>
     </div>
     <TriangleArrow
-      className='absolute left-4 -bottom-1.5'
+      className='absolute left-4 -bottom-1.5 text-components-panel-bg'
     />
     <div className='flex-1 space-y-1 py-3 pr-4'>
       <div className='text-text-secondary text-sm font-semibold leading-tight'>{title}</div>
@@ -52,10 +51,11 @@ type OptionCardProps = {
   effectImg?: string
   onSwitched?: () => void
   noHighlight?: boolean
+  disabled?: boolean
 } & Omit<ComponentProps<'div'>, 'title'>
 
-export const OptionCard: FC<OptionCardProps> = (props) => {
-  const { icon, className, title, description, isActive, children, actions, activeHeaderClassName, style, effectImg, onSwitched, onClick, noHighlight, ...rest } = props
+export const OptionCard: FC<OptionCardProps> = forwardRef((props, ref) => {
+  const { icon, className, title, description, isActive, children, actions, activeHeaderClassName, style, effectImg, onSwitched, onClick, noHighlight, disabled, ...rest } = props
   return <div
     className={classNames(
       'rounded-xl',
@@ -71,7 +71,9 @@ export const OptionCard: FC<OptionCardProps> = (props) => {
         onSwitched?.()
       onClick?.(e)
     }}
-    {...rest}>
+    {...rest}
+    ref={ref}
+  >
     <OptionCardHeader
       icon={icon}
       title={title}
@@ -81,10 +83,14 @@ export const OptionCard: FC<OptionCardProps> = (props) => {
       effectImg={effectImg}
     />
     {/** Body */}
-    {isActive && <div className='p-3'>{children}
+    {isActive && (children || actions) && <div className='p-3'>
+      {children}
       {actions && <div className='flex gap-2 mt-4'>
         {actions}
-      </div>}
+      </div>
+      }
     </div>}
   </div>
-}
+})
+
+OptionCard.displayName = 'OptionCard'