From 8f49572f8534fa861917c7836134d02bf1f1dc9f Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Mon, 21 Oct 2024 15:07:10 +0800
Subject: [PATCH] chore: from marketplace tilte ui

---
 .../block-selector/market-place-plugin/item.tsx   |  2 +-
 .../block-selector/market-place-plugin/list.tsx   | 15 ++++++++++-----
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/web/app/components/workflow/block-selector/market-place-plugin/item.tsx b/web/app/components/workflow/block-selector/market-place-plugin/item.tsx
index 725535135c..8d3dff4cc6 100644
--- a/web/app/components/workflow/block-selector/market-place-plugin/item.tsx
+++ b/web/app/components/workflow/block-selector/market-place-plugin/item.tsx
@@ -26,7 +26,7 @@ const Item: FC<Props> = ({
   const { locale } = useContext(I18n)
 
   return (
-    <div className='group/plugin flex rounded-lg py-2 pr-1 pl-3 hover:bg-state-base-hover'>
+    <div className='group/plugin flex rounded-lg py-1 pr-1 pl-3 hover:bg-state-base-hover'>
       <div
         className='shrink-0 relative w-6 h-6 border-[0.5px] border-components-panel-border-subtle rounded-md bg-center bg-no-repeat bg-contain'
         style={{ backgroundImage: `url(${payload.icon})` }}
diff --git a/web/app/components/workflow/block-selector/market-place-plugin/list.tsx b/web/app/components/workflow/block-selector/market-place-plugin/list.tsx
index 906f31657c..baf506c7d4 100644
--- a/web/app/components/workflow/block-selector/market-place-plugin/list.tsx
+++ b/web/app/components/workflow/block-selector/market-place-plugin/list.tsx
@@ -5,6 +5,7 @@ import useStickyScroll, { ScrollPosition } from '../use-sticky-scroll'
 import Item from './item'
 import type { Plugin } from '@/app/components/plugins/types.ts'
 import cn from '@/utils/classnames'
+// import { RiArrowRightUpLine } from '@remixicon/react'
 
 type Props = {
   wrapElemRef: React.RefObject<HTMLElement>
@@ -26,11 +27,11 @@ const List = ({
   const stickyClassName = useMemo(() => {
     switch (scrollPosition) {
       case ScrollPosition.aboveTheWrap:
-        return 'top-0 shadow-md bg-white'
+        return 'top-0 h-9 pt-3 pb-2 shadow-xs bg-components-panel-bg-blur'
       case ScrollPosition.showing:
-        return 'bottom-0'
+        return 'bottom-0 pt-3 pb-1'
       case ScrollPosition.belowTheWrap:
-        return 'bottom-0 border-t border-gray-500 bg-white text-blue-500'
+        return 'bottom-0 items-center rounded-b-xl border-t border-[0.5px] border-components-panel-border bg-components-panel-bg-blur text-blue-500 shadow-lg text-text-accent-light-mode-only cursor-pointer'
     }
   }, [scrollPosition])
 
@@ -41,8 +42,12 @@ const List = ({
   return (
     <>
       <div
-        className={cn('sticky z-10 pt-3 px-4 py-1 text-text-primary system-sm-medium', stickyClassName)}>
-        {t('plugin.fromMarketplace')}
+        className={cn('sticky z-10 flex h-8 px-4 py-1 text-text-primary system-sm-medium', stickyClassName)}
+      >
+        <span>{t('plugin.fromMarketplace')}</span>
+        {/* {scrollPosition === ScrollPosition.belowTheWrap && (
+          <RiArrowRightUpLine className='ml-0.5 w-3 h-3' />
+        )} */}
       </div>
       <div className='p-1 pb-[500px]' ref={nextToStickyELemRef}>
         {list.map((item, index) => (