chore: improve custom tool's display (#10410)

web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx

@@ -120,7 +120,7 @@ const ConfigCredential: FC<Props> = ({
                   <input
                     value={tempCredential.api_key_header}
                     onChange={e => setTempCredential({ ...tempCredential, api_key_header: e.target.value })}
-                    className='w-full h-10 px-3 text-sm font-normal bg-gray-100 rounded-lg grow'
+                    className='w-full h-10 px-3 text-sm font-normal  border border-transparent bg-gray-100 rounded-lg grow outline-none focus:bg-components-input-bg-active focus:border-components-input-border-active focus:shadow-xs'
                     placeholder={t('tools.createTool.authMethod.types.apiKeyPlaceholder')!}
                   />
                 </div>
@@ -129,7 +129,7 @@ const ConfigCredential: FC<Props> = ({
                   <input
                     value={tempCredential.api_key_value}
                     onChange={e => setTempCredential({ ...tempCredential, api_key_value: e.target.value })}
-                    className='w-full h-10 px-3 text-sm font-normal bg-gray-100 rounded-lg grow'
+                    className='w-full h-10 px-3 text-sm font-normal  border border-transparent bg-gray-100 rounded-lg grow outline-none focus:bg-components-input-bg-active focus:border-components-input-border-active focus:shadow-xs'
                     placeholder={t('tools.createTool.authMethod.types.apiValuePlaceholder')!}
                   />
                 </div>

web/app/components/tools/edit-custom-collection-modal/get-schema.tsx

@@ -70,7 +70,7 @@ const GetSchema: FC<Props> = ({
             <div className='relative'>
               <input
                 type='text'
-                className='w-[244px] h-8 pl-1.5 pr-[44px] overflow-x-auto border border-gray-200 rounded-lg text-[13px]'
+                className='w-[244px] h-8 pl-1.5 pr-[44px] overflow-x-auto border border-gray-200 rounded-lg text-[13px] focus:outline-none focus:border-components-input-border-active'
                 placeholder={t('tools.createTool.importFromUrlPlaceHolder')!}
                 value={importUrl}
                 onChange={e => setImportUrl(e.target.value)}
@@ -89,7 +89,7 @@ const GetSchema: FC<Props> = ({
           </div>
         )}
       </div>
-      <div className='relative' ref={showExamplesRef}>
+      <div className='relative -mt-0.5' ref={showExamplesRef}>
         <Button
           size='small'
           className='space-x-1'

web/app/components/tools/edit-custom-collection-modal/index.tsx

@@ -186,8 +186,8 @@ const EditCustomCollectionModal: FC<Props> = ({
         positionCenter={isAdd && !positionLeft}
         onHide={onHide}
         title={t(`tools.createTool.${isAdd ? 'title' : 'editTitle'}`)!}
-        panelClassName='mt-2 !w-[630px]'
-        maxWidthClassName='!max-w-[630px]'
+        panelClassName='mt-2 !w-[640px]'
+        maxWidthClassName='!max-w-[640px]'
         height='calc(100vh - 16px)'
         headerClassName='!border-b-black/5'
         body={

web/app/components/tools/provider/custom-create-card.tsx

@@ -27,8 +27,8 @@ const Contribute = ({ onRefreshData }: Props) => {
 
   const linkUrl = useMemo(() => {
     if (language.startsWith('zh_'))
-      return 'https://docs.dify.ai/v/zh-hans/guides/gong-ju/quick-tool-integration'
-    return 'https://docs.dify.ai/tutorials/quick-tool-integration'
+      return 'https://docs.dify.ai/zh-hans/guides/tools#ru-he-chuang-jian-zi-ding-yi-gong-ju'
+    return 'https://docs.dify.ai/guides/tools#how-to-create-custom-tools'
   }, [language])
 
   const [isShowEditCollectionToolModal, setIsShowEditCustomCollectionModal] = useState(false)