From 463f5a34c6979805dd8c528ae3eaee9d4736cafd Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Fri, 13 Dec 2024 14:06:07 +0800
Subject: [PATCH] dark mode for plugins

---
 web/app/components/base/copy-btn/index.tsx    |  4 +-
 .../plugins/marketplace/list/card-wrapper.tsx |  4 +-
 .../marketplace/sort-dropdown/index.tsx       |  8 ++--
 .../plugin-detail-panel/endpoint-card.tsx     | 37 +++++++++++++++----
 .../plugins/plugin-page/list/index.tsx        |  2 +-
 web/app/components/plugins/provider-card.tsx  |  4 +-
 6 files changed, 40 insertions(+), 19 deletions(-)

diff --git a/web/app/components/base/copy-btn/index.tsx b/web/app/components/base/copy-btn/index.tsx
index c6428746f2..5159a96040 100644
--- a/web/app/components/base/copy-btn/index.tsx
+++ b/web/app/components/base/copy-btn/index.tsx
@@ -36,7 +36,7 @@ const CopyBtn = ({
       >
         <div
           onMouseLeave={onMouseLeave}
-          className={'box-border p-0.5 flex items-center justify-center rounded-md bg-white cursor-pointer'}
+          className={'box-border p-0.5 flex items-center justify-center rounded-md bg-components-button-secondary-bg cursor-pointer'}
           style={!isPlain
             ? {
               boxShadow: '0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06)',
@@ -44,7 +44,7 @@ const CopyBtn = ({
             : {}}
           onClick={onClickCopy}
         >
-          <div className={`w-6 h-6 rounded-md hover:bg-gray-50  ${s.copyIcon} ${isCopied ? s.copied : ''}`}></div>
+          <div className={`w-6 h-6 rounded-md hover:bg-components-button-secondary-bg-hover  ${s.copyIcon} ${isCopied ? s.copied : ''}`}></div>
         </div>
       </Tooltip>
     </div>
diff --git a/web/app/components/plugins/marketplace/list/card-wrapper.tsx b/web/app/components/plugins/marketplace/list/card-wrapper.tsx
index 502a920212..a379102efd 100644
--- a/web/app/components/plugins/marketplace/list/card-wrapper.tsx
+++ b/web/app/components/plugins/marketplace/list/card-wrapper.tsx
@@ -32,7 +32,7 @@ const CardWrapper = ({
   if (showInstallButton) {
     return (
       <div
-        className='group relative rounded-xl cursor-pointer'
+        className='group relative rounded-xl cursor-pointer  hover:bg-components-panel-on-panel-item-bg-hover'
       >
         <Card
           key={plugin.name}
@@ -47,7 +47,7 @@ const CardWrapper = ({
         />
         {
           showInstallButton && (
-            <div className='hidden absolute bottom-0 group-hover:flex items-center space-x-2 px-4 pt-8 pb-4 w-full bg-gradient-to-tr from-[#f9fafb] to-[rgba(249,250,251,0)] rounded-b-xl'>
+            <div className='hidden absolute bottom-0 group-hover:flex items-center space-x-2 px-4 pt-8 pb-4 w-full bg-gradient-to-tr from-components-panel-on-panel-item-bg to-background-gradient-mask-transparent rounded-b-xl'>
               <Button
                 variant='primary'
                 className='w-[calc(50%-4px)]'
diff --git a/web/app/components/plugins/marketplace/sort-dropdown/index.tsx b/web/app/components/plugins/marketplace/sort-dropdown/index.tsx
index df520f26c1..a71cb249d5 100644
--- a/web/app/components/plugins/marketplace/sort-dropdown/index.tsx
+++ b/web/app/components/plugins/marketplace/sort-dropdown/index.tsx
@@ -53,22 +53,22 @@ const SortDropdown = () => {
     >
       <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
         <div className='flex items-center px-2 pr-3 h-8 rounded-lg bg-state-base-hover-alt cursor-pointer'>
-          <span className='mr-1 system-sm-regular'>
+          <span className='mr-1 system-sm-regular text-text-secondary'>
             {t('plugin.marketplace.sortBy')}
           </span>
-          <span className='mr-1 system-sm-medium'>
+          <span className='mr-1 system-sm-medium text-text-primary'>
             {selectedOption.text}
           </span>
           <RiArrowDownSLine className='w-4 h-4 text-text-tertiary' />
         </div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent>
-        <div className='p-1 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg'>
+        <div className='p-1 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur backdrop-blur-sm shadow-lg'>
           {
             options.map(option => (
               <div
                 key={`${option.value}-${option.order}`}
-                className='flex items-center justify-between px-3 pr-2 h-8 cursor-pointer system-md-regular'
+                className='flex items-center justify-between px-3 pr-2 h-8 cursor-pointer system-md-regular text-text-primary rounded-lg hover:bg-components-panel-on-panel-item-bg-hover'
                 onClick={() => handleSortChange({ sortBy: option.value, sortOrder: option.order })}
               >
                 {option.text}
diff --git a/web/app/components/plugins/plugin-detail-panel/endpoint-card.tsx b/web/app/components/plugins/plugin-detail-panel/endpoint-card.tsx
index 14e9abef9b..b2b04a6f1e 100644
--- a/web/app/components/plugins/plugin-detail-panel/endpoint-card.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/endpoint-card.tsx
@@ -1,17 +1,19 @@
-import React, { useMemo, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useBoolean } from 'ahooks'
-import { RiDeleteBinLine, RiEditLine, RiLoginCircleLine } from '@remixicon/react'
+import copy from 'copy-to-clipboard'
+import { RiClipboardLine, RiDeleteBinLine, RiEditLine, RiLoginCircleLine } from '@remixicon/react'
 import type { EndpointListItem } from '../types'
 import EndpointModal from './endpoint-modal'
 import { NAME_FIELD } from './utils'
 import { addDefaultValue, toolCredentialToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
+import { ClipboardCheck } from '@/app/components/base/icons/src/vender/line/files'
 import ActionButton from '@/app/components/base/action-button'
-import CopyBtn from '@/app/components/base/copy-btn'
 import Confirm from '@/app/components/base/confirm'
 import Indicator from '@/app/components/header/indicator'
 import Switch from '@/app/components/base/switch'
 import Toast from '@/app/components/base/toast'
+import Tooltip from '@/app/components/base/tooltip'
 import {
   useDeleteEndpoint,
   useDisableEndpoint,
@@ -111,6 +113,25 @@ const EndpointCard = ({
     state,
   })
 
+  const [isCopied, setIsCopied] = useState(false)
+  const handleCopy = (value: string) => {
+    copy(value)
+    setIsCopied(true)
+  }
+
+  useEffect(() => {
+    if (isCopied) {
+      const timer = setTimeout(() => {
+        setIsCopied(false)
+      }, 2000)
+      return () => {
+        clearTimeout(timer)
+      }
+    }
+  }, [isCopied])
+
+  const CopyIcon = isCopied ? ClipboardCheck : RiClipboardLine
+
   return (
     <div className='p-0.5 bg-background-section-burn rounded-xl'>
       <div className='group p-2.5 pl-3 bg-components-panel-on-panel-item-bg rounded-[10px] border-[0.5px] border-components-panel-border'>
@@ -133,11 +154,11 @@ const EndpointCard = ({
             <div className='shrink-0 w-12 text-text-tertiary system-xs-regular'>{endpoint.method}</div>
             <div className='group/item grow flex items-center text-text-secondary system-xs-regular truncate'>
               <div title={`${data.url}${endpoint.path}`} className='truncate'>{`${data.url}${endpoint.path}`}</div>
-              <CopyBtn
-                className='hidden shrink-0 ml-2 group-hover/item:block'
-                value={`${data.url}${endpoint.path}`}
-                isPlain
-              />
+              <Tooltip popupContent={t(`common.operation.${isCopied ? 'copied' : 'copy'}`)} position='top'>
+                <ActionButton className='hidden shrink-0 ml-2 group-hover/item:flex' onClick={() => handleCopy(`${data.url}${endpoint.path}`)}>
+                  <CopyIcon className='w-3.5 h-3.5 text-text-tertiary' />
+                </ActionButton>
+              </Tooltip>
             </div>
           </div>
         ))}
diff --git a/web/app/components/plugins/plugin-page/list/index.tsx b/web/app/components/plugins/plugin-page/list/index.tsx
index 57fea8c8b5..9e9cf00c9f 100644
--- a/web/app/components/plugins/plugin-page/list/index.tsx
+++ b/web/app/components/plugins/plugin-page/list/index.tsx
@@ -8,7 +8,7 @@ type IPluginListProps = {
 
 const PluginList: FC<IPluginListProps> = ({ pluginList }) => {
   return (
-    <div className='pb-3 bg-white'>
+    <div className='pb-3'>
       <div className='grid grid-cols-2 gap-3'>
         {pluginList.map(plugin => (
           <PluginItem
diff --git a/web/app/components/plugins/provider-card.tsx b/web/app/components/plugins/provider-card.tsx
index 0744be75c3..140fd24328 100644
--- a/web/app/components/plugins/provider-card.tsx
+++ b/web/app/components/plugins/provider-card.tsx
@@ -36,7 +36,7 @@ const ProviderCard: FC<Props> = ({
   const { locale } = useI18N()
 
   return (
-    <div className={cn('group relative p-4 pb-3 border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg hover-bg-components-panel-on-panel-item-bg rounded-xl shadow-xs', className)}>
+    <div className={cn('group relative p-4 pb-3 border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg hover:bg-components-panel-on-panel-item-bg rounded-xl shadow-xs', className)}>
       {/* Header */}
       <div className="flex">
         <Icon src={payload.icon} />
@@ -61,7 +61,7 @@ const ProviderCard: FC<Props> = ({
         ))}
       </div>
       <div
-        className='hidden group-hover:flex items-center gap-2 absolute bottom-0 left-0 right-0 p-4 pt-8 rounded-xl bg-gradient-to-tr from-[#f9fafb] to-[rgba(249,250,251,0)]'
+        className='hidden group-hover:flex items-center gap-2 absolute bottom-0 left-0 right-0 p-4 pt-8 rounded-xl bg-gradient-to-tr from-components-panel-on-panel-item-bg to-background-gradient-mask-transparent'
       >
         <Button
           className='grow'