From fe2d60dfc9f58cae37cfc23ec7ab481aaf969b79 Mon Sep 17 00:00:00 2001
From: AkaraChen <akarachen@outlook.com>
Date: Fri, 13 Dec 2024 15:47:29 +0800
Subject: [PATCH] fix: option card gradient & tailwind config

---
 .../common/economical-retrieval-method-config/index.tsx  | 2 +-
 .../datasets/common/retrieval-method-config/index.tsx    | 4 ++--
 .../components/datasets/create/step-two/option-card.tsx  | 9 ++++-----
 web/tailwind.config.js                                   | 3 +++
 web/themes/manual-dark.css                               | 6 +++---
 web/themes/manual-light.css                              | 6 +++---
 6 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/web/app/components/datasets/common/economical-retrieval-method-config/index.tsx b/web/app/components/datasets/common/economical-retrieval-method-config/index.tsx
index 49f090786e..9236858ae4 100644
--- a/web/app/components/datasets/common/economical-retrieval-method-config/index.tsx
+++ b/web/app/components/datasets/common/economical-retrieval-method-config/index.tsx
@@ -25,7 +25,7 @@ const EconomicalRetrievalMethodConfig: FC<Props> = ({
       <OptionCard icon={<Image className='w-4 h-4' src={retrievalIcon.vector} alt='' />}
         title={t('dataset.retrieval.invertedIndex.title')}
         description={t('dataset.retrieval.invertedIndex.description')} isActive
-        activeHeaderClassName='dataset-option-card-purple-gradient'
+        activeHeaderClassName='bg-dataset-option-card-purple-gradient'
       >
         <RetrievalParamConfig
           type={RETRIEVE_METHOD.invertedIndex}
diff --git a/web/app/components/datasets/common/retrieval-method-config/index.tsx b/web/app/components/datasets/common/retrieval-method-config/index.tsx
index fab0cad597..aeeb7235e4 100644
--- a/web/app/components/datasets/common/retrieval-method-config/index.tsx
+++ b/web/app/components/datasets/common/retrieval-method-config/index.tsx
@@ -69,7 +69,7 @@ const RetrievalMethodConfig: FC<Props> = ({
             search_method: RETRIEVE_METHOD.semantic,
           })}
           effectImg={Effect.src}
-          activeHeaderClassName='dataset-option-card-purple-gradient'
+          activeHeaderClassName='bg-dataset-option-card-purple-gradient'
         >
           <RetrievalParamConfig
             type={RETRIEVE_METHOD.semantic}
@@ -90,7 +90,7 @@ const RetrievalMethodConfig: FC<Props> = ({
             search_method: RETRIEVE_METHOD.fullText,
           })}
           effectImg={Effect.src}
-          activeHeaderClassName='dataset-option-card-purple-gradient'
+          activeHeaderClassName='bg-dataset-option-card-purple-gradient'
         >
           <RetrievalParamConfig
             type={RETRIEVE_METHOD.fullText}
diff --git a/web/app/components/datasets/create/step-two/option-card.tsx b/web/app/components/datasets/create/step-two/option-card.tsx
index bb339b4a41..80bdce9c07 100644
--- a/web/app/components/datasets/create/step-two/option-card.tsx
+++ b/web/app/components/datasets/create/step-two/option-card.tsx
@@ -1,6 +1,5 @@
 import { type ComponentProps, type FC, type ReactNode, forwardRef } from 'react'
 import Image from 'next/image'
-import Effect from '../assets/option-card-effect-blue.svg'
 import classNames from '@/utils/classnames'
 
 const TriangleArrow: FC<ComponentProps<'svg'>> = props => (
@@ -25,7 +24,7 @@ export const OptionCardHeader: FC<OptionCardHeaderProps> = (props) => {
     isActive && activeClassName,
   )}>
     <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} />}
+      {isActive && effectImg && <Image src={effectImg} 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-background-default-dodge'>
         {icon}
       </div>
@@ -58,10 +57,10 @@ 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 border',
+      'rounded-xl border bg-components-option-card-option-bg',
       (isActive && !noHighlight)
-        ? 'border-components-option-card-option-selected-border bg-components-panel-bg'
-        : 'border-components-option-card-option-border bg-components-option-card-option-bg',
+        ? 'border-components-option-card-option-selected-border'
+        : 'border-components-option-card-option-border',
       disabled && 'opacity-50',
       className,
     )}
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 8f289c784d..a632d5ff3a 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -102,6 +102,9 @@ const config = {
         'dataset-chunk-process-error-bg': 'var(--color-dataset-chunk-process-error-bg)',
         'dataset-chunk-detail-card-hover-bg': 'var(--color-dataset-chunk-detail-card-hover-bg)',
         'dataset-child-chunk-expand-btn-bg': 'var(--color-dataset-child-chunk-expand-btn-bg)',
+        'dataset-option-card-blue-gradient': 'var(--color-dataset-option-card-blue-gradient)',
+        'dataset-option-card-purple-gradient': 'var(--color-dataset-option-card-purple-gradient)',
+        'dataset-option-card-orange-gradient': 'var(--color-dataset-option-card-orange-gradient)',
       },
       lineClamp: {
         20: '20',
diff --git a/web/themes/manual-dark.css b/web/themes/manual-dark.css
index 9a342897b2..8150069625 100644
--- a/web/themes/manual-dark.css
+++ b/web/themes/manual-dark.css
@@ -6,7 +6,7 @@ html[data-theme="dark"] {
   --color-dataset-chunk-process-error-bg: linear-gradient(92deg, rgba(240, 68, 56, 0.30) 0%, rgba(0, 0, 0, 0.00) 100%);
   --color-dataset-chunk-detail-card-hover-bg: linear-gradient(180deg, #1D1D20 0%, #222225 100%);
   --color-dataset-child-chunk-expand-btn-bg: linear-gradient(90deg, rgba(24, 24, 27, 0.25) 0%, rgba(24, 24, 27, 0.04) 100%);
-  --color-dataset-option-card-blue-gradient: linear-gradient(180deg, #24252E 0%, #1E1E21 100%);
-  --color-dataset-option-card-purple-gradient: linear-gradient(180deg, #25242E 0%, #1E1E21 100%);
-  --color-dataset-option-card-orange-gradient: linear-gradient(180deg, #2B2322 0%, #1E1E21 100%);
+  --color-dataset-option-card-blue-gradient: linear-gradient(90deg, #24252E 0%, #1E1E21 100%);
+  --color-dataset-option-card-purple-gradient: linear-gradient(90deg, #25242E 0%, #1E1E21 100%);
+  --color-dataset-option-card-orange-gradient: linear-gradient(90deg, #2B2322 0%, #1E1E21 100%);
 }
diff --git a/web/themes/manual-light.css b/web/themes/manual-light.css
index 2de9edda1e..13f208e728 100644
--- a/web/themes/manual-light.css
+++ b/web/themes/manual-light.css
@@ -6,7 +6,7 @@ html[data-theme="light"] {
   --color-dataset-chunk-process-error-bg: linear-gradient(92deg, rgba(240, 68, 56, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%);
   --color-dataset-chunk-detail-card-hover-bg: linear-gradient(180deg, #F2F4F7 0%, #F9FAFB 100%);
   --color-dataset-child-chunk-expand-btn-bg: linear-gradient(90deg, rgba(200, 206, 218, 0.20) 0%, rgba(200, 206, 218, 0.04) 100%);
-  --color-dataset-option-card-blue-gradient: linear-gradient(180deg, #F2F4F7 0%, #F9FAFB 100%);
-  --color-dataset-option-card-purple-gradient: linear-gradient(180deg, #F0EEFA 0%, #F9FAFB 100%);
-  --color-dataset-option-card-orange-gradient: linear-gradient(180deg, #F8F2EE 0%, #F9FAFB 100%);
+  --color-dataset-option-card-blue-gradient: linear-gradient(90deg, #F2F4F7 0%, #F9FAFB 100%);
+  --color-dataset-option-card-purple-gradient: linear-gradient(90deg, #F0EEFA 0%, #F9FAFB 100%);
+  --color-dataset-option-card-orange-gradient: linear-gradient(90deg, #F8F2EE 0%, #F9FAFB 100%);
 }