chore: layout UI upgrade (#6577)

web/app/components/app-sidebar/app-info.tsx

@@ -218,7 +218,7 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
             </div>
             {expand && (
               <div className="grow w-0">
-                <div className='flex justify-between items-center text-sm leading-5 font-medium text-gray-900'>
+                <div className='flex justify-between items-center text-sm leading-5 font-medium text-text-secondary'>
                   <div className='truncate' title={appDetail.name}>{appDetail.name}</div>
                   {isCurrentWorkspaceEditor && <RiArrowDownSLine className='shrink-0 ml-[2px] w-3 h-3 text-gray-500' />}
                 </div>

web/app/components/app-sidebar/index.tsx

@@ -49,7 +49,7 @@ const AppDetailNav = ({ title, desc, icon, icon_background, navigation, extraInf
   return (
     <div
       className={`
-        shrink-0 flex flex-col bg-white border-r border-gray-200 transition-all
+        shrink-0 flex flex-col bg-background-default-subtle border-r border-divider-burn transition-all
         ${expand ? 'w-[216px]' : 'w-14'}
       `}
     >
@@ -60,7 +60,7 @@ const AppDetailNav = ({ title, desc, icon, icon_background, navigation, extraInf
         `}
       >
         {iconType === 'app' && (
-          <AppInfo expand={expand}/>
+          <AppInfo expand={expand} />
         )}
         {iconType !== 'app' && (
           <AppBasic
@@ -74,11 +74,11 @@ const AppDetailNav = ({ title, desc, icon, icon_background, navigation, extraInf
         )}
       </div>
       {!expand && (
-        <div className='mt-1 mx-auto w-6 h-[1px] bg-gray-100'/>
+        <div className='mt-1 mx-auto w-6 h-[1px] bg-divider-subtle' />
       )}
       <nav
         className={`
-          grow space-y-1 bg-white
+          grow space-y-1
           ${expand ? 'p-4' : 'px-2.5 py-4'}
         `}
       >

web/app/components/app-sidebar/navLink.tsx

@@ -44,7 +44,7 @@ export default function NavLink({
       key={name}
       href={href}
       className={classNames(
-        isActive ? 'bg-primary-50 text-primary-600 font-semibold' : 'text-gray-700 hover:bg-gray-100 hover:text-gray-700',
+        isActive ? 'bg-state-accent-active text-text-accent font-semibold' : 'text-components-menu-item-text hover:bg-gray-100 hover:text-components-menu-item-text-hover',
         'group flex items-center h-9 rounded-md py-2 text-sm font-normal',
         mode === 'expand' ? 'px-3' : 'px-2.5',
       )}
@@ -53,7 +53,6 @@ export default function NavLink({
       <NavIcon
         className={classNames(
           'h-4 w-4 flex-shrink-0',
-          isActive ? 'text-primary-600' : 'text-gray-700',
           mode === 'expand' ? 'mr-2' : 'mr-0',
         )}
         aria-hidden="true"

web/app/components/base/logo/logo-site.tsx

@@ -1,5 +1,7 @@
+'use client'
 import type { FC } from 'react'
 import classNames from '@/utils/classnames'
+import { useSelector } from '@/context/app-context'
 
 type LogoSiteProps = {
   className?: string
@@ -8,9 +10,16 @@ type LogoSiteProps = {
 const LogoSite: FC<LogoSiteProps> = ({
   className,
 }) => {
+  const { theme } = useSelector((s) => {
+    return {
+      theme: s.theme,
+    }
+  })
+
+  const src = theme === 'light' ? '/logo/logo-site.png' : `/logo/logo-site-${theme}.png`
   return (
     <img
-      src='/logo/logo-site.png'
+      src={src}
       className={classNames('block w-auto h-10', className)}
       alt='logo'
     />

web/app/components/header/explore-nav/index.tsx

@@ -22,8 +22,8 @@ const ExploreNav = ({
   return (
     <Link href="/explore/apps" className={classNames(
       className, 'group',
-      actived && 'bg-white shadow-md',
-      actived ? 'text-primary-600' : 'text-gray-500 hover:bg-gray-200',
+      actived && 'bg-components-main-nav-nav-button-bg-active shadow-md',
+      actived ? 'text-components-main-nav-nav-button-text-active' : 'text-components-main-nav-nav-button-text hover:bg-components-main-nav-nav-button-bg-hover',
     )}>
       {
         actived

web/app/components/header/header-wrapper.tsx

@@ -15,7 +15,7 @@ const HeaderWrapper = ({
 
   return (
     <div className={classNames(
-      'sticky top-0 left-0 right-0 z-30 flex flex-col bg-gray-100 grow-0 shrink-0 basis-auto min-h-[56px]',
+      'sticky top-0 left-0 right-0 z-30 flex flex-col grow-0 shrink-0 basis-auto min-h-[56px]',
       s.header,
       isBordered ? 'border-b border-gray-200' : '',
     )}

web/app/components/header/nav/index.tsx

@@ -39,16 +39,16 @@ const Nav = ({
   return (
     <div className={`
       flex items-center h-8 mr-0 sm:mr-3 px-0.5 rounded-xl text-sm shrink-0 font-medium
-      ${isActived && 'bg-white shadow-md font-semibold'}
-      ${!curNav && !isActived && 'hover:bg-gray-200'}
+      ${isActived && 'bg-components-main-nav-nav-button-bg-active shadow-md font-semibold'}
+      ${!curNav && !isActived && 'hover:bg-components-main-nav-nav-button-bg-hover'}
     `}>
       <Link href={link}>
         <div
           onClick={() => setAppDetail()}
           className={classNames(`
             flex items-center h-7 px-2.5 cursor-pointer rounded-[10px]
-            ${isActived ? 'text-primary-600' : 'text-gray-500'}
-            ${curNav && isActived && 'hover:bg-primary-50'}
+            ${isActived ? 'text-components-main-nav-nav-button-text-active' : 'text-components-main-nav-nav-button-text'}
+            ${curNav && isActived && 'hover:bg-components-main-nav-nav-button-bg-active-hover'}
           `)}
           onMouseEnter={() => setHovered(true)}
           onMouseLeave={() => setHovered(false)}

web/app/components/header/nav/nav-selector/index.tsx

@@ -55,8 +55,8 @@ const NavSelector = ({ curNav, navs, createText, isApp, onCreate, onLoadmore }:
         {({ open }) => (
           <>
             <Menu.Button className={cn(
-              'group inline-flex items-center w-full h-7 justify-center rounded-[10px] pl-2 pr-2.5 text-[14px] font-semibold text-primary-600 hover:bg-primary-50',
-              open && 'bg-primary-50',
+              'group inline-flex items-center w-full h-7 justify-center rounded-[10px] pl-2 pr-2.5 text-[14px] font-semibold text-components-main-nav-nav-button-text-active hover:hover:bg-components-main-nav-nav-button-bg-active-hover',
+              open && 'bg-components-main-nav-nav-button-bg-active',
             )}>
               <div className='max-w-[180px] truncate' title={curNav?.name}>{curNav?.name}</div>
               <RiArrowDownSLine