dark mode for tracing dropdown

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-button.tsx

@@ -1,12 +1,14 @@
 'use client'
 import type { FC } from 'react'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
+import {
+  RiEqualizer2Line,
+} from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import type { PopupProps } from './config-popup'
 import ConfigPopup from './config-popup'
 import cn from '@/utils/classnames'
 import Button from '@/app/components/base/button'
-import { Settings04 } from '@/app/components/base/icons/src/vender/line/general'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
@@ -52,15 +54,15 @@ const ConfigBtn: FC<Props> = ({
 
   const triggerContent = hasConfigured
     ? (
-      <div className={cn(className, 'p-1 rounded-md hover:bg-black/5 cursor-pointer')}>
-        <Settings04 className='w-4 h-4 text-gray-500' />
+      <div className={cn(className, 'p-1 rounded-md')}>
+        <RiEqualizer2Line className='w-4 h-4 text-text-tertiary' />
       </div>
     )
     : (
       <Button variant='primary'
         className={cn(className, '!h-8 !px-3 select-none')}
       >
-        <Settings04 className='mr-1 w-4 h-4' />
+        <RiEqualizer2Line className='mr-1 w-4 h-4' />
         <span className='text-[13px]'>{t(`${I18N_PREFIX}.config`)}</span>
       </Button>
     )

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx

@@ -1,6 +1,10 @@
 'use client'
 import type { FC } from 'react'
 import React, { useCallback, useEffect, useState } from 'react'
+import {
+  RiArrowDownDoubleLine,
+  RiEqualizer2Line,
+} from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { usePathname } from 'next/navigation'
 import { useBoolean } from 'ahooks'
@@ -8,7 +12,6 @@ import type { LangFuseConfig, LangSmithConfig } from './type'
 import { TracingProvider } from './type'
 import TracingIcon from './tracing-icon'
 import ConfigButton from './config-button'
-import cn from '@/utils/classnames'
 import { LangfuseIcon, LangsmithIcon } from '@/app/components/base/icons/src/public/tracing'
 import Indicator from '@/app/components/header/indicator'
 import { fetchTracingConfig as doFetchTracingConfig, fetchTracingStatus, updateTracingStatus } from '@/service/apps'
@@ -16,6 +19,8 @@ import type { TracingStatus } from '@/models/app'
 import Toast from '@/app/components/base/toast'
 import { useAppContext } from '@/context/app-context'
 import Loading from '@/app/components/base/loading'
+import Divider from '@/app/components/base/divider'
+import cn from '@/utils/classnames'
 
 const I18N_PREFIX = 'app.tracing'
 
@@ -27,7 +32,7 @@ const Title = ({
   const { t } = useTranslation()
 
   return (
-    <div className={cn(className, 'flex items-center text-lg font-semibold text-gray-900')}>
+    <div className={cn('flex items-center system-xl-semibold text-text-primary', className)}>
       {t('common.appMenus.overview')}
     </div>
   )
@@ -135,43 +140,55 @@ const Panel: FC = () => {
   return (
     <div className={cn('mb-3 flex justify-between items-center')}>
       <Title className='h-[41px]' />
-      <div className='flex items-center p-2 rounded-xl border-[0.5px] border-gray-200 shadow-xs cursor-pointer hover:bg-gray-100' onClick={showPopup}>
-        {!inUseTracingProvider
-          ? <>
-            <TracingIcon size='md' className='mr-2' />
-            <div className='leading-5 text-sm font-semibold text-gray-700'>{t(`${I18N_PREFIX}.title`)}</div>
-          </>
-          : <InUseProviderIcon className='ml-1 h-4' />}
-
-        {hasConfiguredTracing && (
-          <div className='ml-4 mr-1 flex items-center'>
-            <Indicator color={enabled ? 'green' : 'gray'} />
-            <div className='ml-1.5 text-xs font-semibold text-gray-500 uppercase'>
-              {t(`${I18N_PREFIX}.${enabled ? 'enabled' : 'disabled'}`)}
+      <div
+        className={cn(
+          'flex items-center p-2 rounded-xl bg-background-default-dodge border-t border-l-[0.5px] border-effects-highlight shadow-xs cursor-pointer hover:bg-background-default-lighter hover:border-effects-highlight-lightmode-off',
+          controlShowPopup && 'bg-background-default-lighter border-effects-highlight-lightmode-off',
+        )}
+        onClick={showPopup}
+      >
+        {!inUseTracingProvider && (
+          <>
+            <TracingIcon size='md' />
+            <div className='mx-2 system-sm-semibold text-text-secondary'>{t(`${I18N_PREFIX}.title`)}</div>
+            <div className='p-1 rounded-md'>
+              <RiEqualizer2Line className='w-4 h-4 text-text-tertiary' />
+            </div>
+            <Divider type='vertical' className='h-3.5' />
+            <div className='p-1 rounded-md'>
+              <RiArrowDownDoubleLine className='w-4 h-4 text-text-tertiary' />
             </div>
-          </div>
+          </>
         )}
-
         {hasConfiguredTracing && (
-          <div className='ml-2 w-px h-3.5 bg-gray-200'></div>
+          <>
+            <div className='ml-4 mr-1 flex items-center'>
+              <Indicator color={enabled ? 'green' : 'gray'} />
+              <div className='ml-1.5 system-xs-semibold-uppercase text-text-tertiary'>
+                {t(`${I18N_PREFIX}.${enabled ? 'enabled' : 'disabled'}`)}
+              </div>
+            </div>
+            <InUseProviderIcon className='ml-1 h-4' />
+            <Divider type='vertical' className='h-3.5' />
+            <div className='flex items-center' onClick={e => e.stopPropagation()}>
+              <ConfigButton
+                appId={appId}
+                readOnly={readOnly}
+                hasConfigured
+                className='ml-2'
+                enabled={enabled}
+                onStatusChange={handleTracingEnabledChange}
+                chosenProvider={inUseTracingProvider}
+                onChooseProvider={handleChooseProvider}
+                langSmithConfig={langSmithConfig}
+                langFuseConfig={langFuseConfig}
+                onConfigUpdated={handleTracingConfigUpdated}
+                onConfigRemoved={handleTracingConfigRemoved}
+                controlShowPopup={controlShowPopup}
+              />
+            </div>
+          </>
         )}
-        <div className='flex items-center' onClick={e => e.stopPropagation()}>
-          <ConfigButton
-            appId={appId}
-            readOnly={readOnly}
-            hasConfigured
-            className='ml-2'
-            enabled={enabled}
-            onStatusChange={handleTracingEnabledChange}
-            chosenProvider={inUseTracingProvider}
-            onChooseProvider={handleChooseProvider}
-            langSmithConfig={langSmithConfig}
-            langFuseConfig={langFuseConfig}
-            onConfigUpdated={handleTracingConfigUpdated}
-            onConfigRemoved={handleTracingConfigRemoved}
-            controlShowPopup={controlShowPopup}
-          />
-        </div>
       </div>
     </div>
   )

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/toggle-fold-btn.tsx

@@ -1,45 +0,0 @@
-'use client'
-import { ChevronDoubleDownIcon } from '@heroicons/react/20/solid'
-import type { FC } from 'react'
-import { useTranslation } from 'react-i18next'
-import React, { useCallback } from 'react'
-import Tooltip from '@/app/components/base/tooltip'
-
-const I18N_PREFIX = 'app.tracing'
-
-type Props = {
-  isFold: boolean
-  onFoldChange: (isFold: boolean) => void
-}
-
-const ToggleFoldBtn: FC<Props> = ({
-  isFold,
-  onFoldChange,
-}) => {
-  const { t } = useTranslation()
-
-  const handleFoldChange = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
-    e.stopPropagation()
-    onFoldChange(!isFold)
-  }, [isFold, onFoldChange])
-  return (
-    // text-[0px] to hide spacing between tooltip elements
-    <div className='shrink-0 cursor-pointer text-[0px]' onClick={handleFoldChange}>
-      <Tooltip
-        popupContent={t(`${I18N_PREFIX}.${isFold ? 'expand' : 'collapse'}`)}
-      >
-        {isFold && (
-          <div className='p-1 rounded-md text-gray-500 hover:text-gray-800 hover:bg-black/5'>
-            <ChevronDoubleDownIcon className='w-4 h-4' />
-          </div>
-        )}
-        {!isFold && (
-          <div className='p-2 rounded-lg text-gray-500 border-[0.5px] border-gray-200 hover:text-gray-800 hover:bg-black/5'>
-            <ChevronDoubleDownIcon className='w-4 h-4 transform rotate-180' />
-          </div>
-        )}
-      </Tooltip>
-    </div>
-  )
-}
-export default React.memo(ToggleFoldBtn)

web/context/app-context.tsx

@@ -127,7 +127,7 @@ export const AppContextProvider: FC<AppContextProviderProps> = ({ children }) =>
       setCurrentWorkspace(currentWorkspaceResponse)
   }, [currentWorkspaceResponse])
 
-  const [theme, setTheme] = useState<Theme>(Theme.light)
+  const [theme, setTheme] = useState<Theme>(Theme.dark)
   const handleSetTheme = useCallback((theme: Theme) => {
     setTheme(theme)
     globalThis.document.documentElement.setAttribute('data-theme', theme)