feat: update styling and improve accessibility in retrieval modal; add translation for retrieval method

web/app/components/datasets/hit-testing/modify-retrieval-modal.tsx

@@ -59,33 +59,41 @@ const ModifyRetrievalModal: FC<Props> = ({
 
   return (
     <div
-      className='w-full flex flex-col bg-white border-[0.5px] border-gray-200 rounded-xl shadow-xl'
+      className='w-full flex flex-col bg-components-panel-bg border-[0.5px] border-components-panel-border rounded-2xl shadow-2xl shadow-shadow-shadow-9'
       style={{
         height: 'calc(100vh - 72px)',
       }}
       ref={ref}
     >
-      <div className='shrink-0 flex justify-between items-center pl-6 pr-5 h-14 border-b border-b-gray-100'>
+      <div className='shrink-0 flex justify-between pt-3.5 pb-1 px-3 h-15'>
-        <div className='text-base font-semibold text-gray-900'>
+        <div className='text-base font-semibold text-text-primary'>
           <div>{t('datasetSettings.form.retrievalSetting.title')}</div>
-          <div className='leading-[18px] text-xs font-normal text-gray-500'>
+          <div className='leading-[18px] text-xs font-normal text-text-tertiary'>
-            <a target='_blank' rel='noopener noreferrer' href='https://docs.dify.ai/guides/knowledge-base/create-knowledge-and-upload-documents#id-4-retrieval-settings' className='text-text-accent'>{t('datasetSettings.form.retrievalSetting.learnMore')}</a>
+            <a
+              target='_blank'
+              rel='noopener noreferrer'
+              href='https://docs.dify.ai/guides/knowledge-base/create-knowledge-and-upload-documents#id-4-retrieval-settings'
+              className='text-text-accent'
+            >
+              {t('datasetSettings.form.retrievalSetting.learnMore')}
+            </a>
             {t('datasetSettings.form.retrievalSetting.description')}
           </div>
         </div>
-        <div className='flex items-center'>
+        <div className='flex'>
           <div
             onClick={onHide}
-            className='flex justify-center items-center w-6 h-6 cursor-pointer'
+            className='flex justify-center items-center w-8 h-8 cursor-pointer'
           >
-            <RiCloseLine className='w-4 h-4 text-gray-500' />
+            <RiCloseLine className='w-4 h-4 text-text-tertiary' />
           </div>
         </div>
       </div>
 
-      <div className='p-6 border-b' style={{
+      <div className='px-4 py-2'>
-        borderBottom: 'rgba(0, 0, 0, 0.05)',
+        <div className='mb-1 text-text-secondary text-[13px] leading-6 font-semibold'>
-      }}>
+          {t('datasetSettings.form.retrievalSetting.method')}
+        </div>
         {indexMethod === 'high_quality'
           ? (
             <RetrievalMethodConfig
@@ -100,12 +108,7 @@ const ModifyRetrievalModal: FC<Props> = ({
             />
           )}
       </div>
-      <div
+      <div className='flex justify-end p-4 pt-2'>
-        className='flex justify-end pt-6 px-6 border-t'
-        style={{
-          borderColor: 'rgba(0, 0, 0, 0.05)',
-        }}
-      >
         <Button className='mr-2 flex-shrink-0' onClick={onHide}>{t('common.operation.cancel')}</Button>
         <Button variant='primary' className='flex-shrink-0' onClick={handleSave} >{t('common.operation.save')}</Button>
       </div>

web/i18n/en-US/dataset-settings.ts

@@ -26,6 +26,7 @@ const translation = {
     embeddingModelTipLink: 'Settings',
     retrievalSetting: {
       title: 'Retrieval Setting',
+      method: 'Retrieval Method',
       learnMore: 'Learn more',
       description: ' about retrieval method.',
       longDescription: ' about retrieval method, you can change this at any time in the Knowledge settings.',

web/i18n/zh-Hans/dataset-settings.ts

@@ -26,6 +26,7 @@ const translation = {
     embeddingModelTipLink: '设置',
     retrievalSetting: {
       title: '检索设置',
+      method: '检索方法',
       learnMore: '了解更多',
       description: '关于检索方法。',
       longDescription: '关于检索方法，您可以随时在知识库设置中更改此设置。',