From cbe08a8de479271adc195e17690dd6b5d40170da Mon Sep 17 00:00:00 2001
From: Kinyoo <Kinyoo1126@gmail.com>
Date: Mon, 13 Jul 2026 13:57:01 +0800
Subject: [PATCH] fix(client): align folder icon & knowledge-space illustration
 with green illus palette

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../src/components/icons/FolderIcon.tsx       |  9 ++++---
 .../illustrations/KnowledgeSpaceIcon.tsx      | 24 +++++++++----------
 2 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/frontend/client/src/components/icons/FolderIcon.tsx b/src/frontend/client/src/components/icons/FolderIcon.tsx
index 6fbcdd709..3fbaf498b 100644
--- a/src/frontend/client/src/components/icons/FolderIcon.tsx
+++ b/src/frontend/client/src/components/icons/FolderIcon.tsx
@@ -22,9 +22,12 @@ export const FolderIcon = ({ className, ...props }: React.SVGProps<SVGSVGElement
     const panelD =
         "M7.66309 8.68262H16.3369C17.1507 8.68262 17.7667 8.67925 18.2568 8.71289C18.7465 8.74651 19.1052 8.81657 19.4062 8.95801C19.9422 9.20996 20.3723 9.60675 20.6445 10.0996C20.7969 10.3757 20.8727 10.7042 20.9092 11.1543C20.9457 11.6054 20.9424 12.1727 20.9424 12.9238V15.5762C20.9424 16.3273 20.9457 16.8946 20.9092 17.3457C20.8727 17.7958 20.7969 18.1243 20.6445 18.4004C20.3723 18.8933 19.9422 19.29 19.4062 19.542C19.1052 19.6834 18.7465 19.7535 18.2568 19.7871C17.7667 19.8208 17.1507 19.8174 16.3369 19.8174H7.66309C6.84925 19.8174 6.23335 19.8208 5.74316 19.7871C5.25352 19.7535 4.89477 19.6834 4.59375 19.542C4.05779 19.29 3.62766 18.8933 3.35547 18.4004C3.20306 18.1243 3.12725 17.7958 3.09082 17.3457C3.05434 16.8946 3.05762 16.3273 3.05762 15.5762V12.9238C3.05762 12.1727 3.05434 11.6054 3.09082 11.1543C3.12725 10.7042 3.20306 10.3757 3.35547 10.0996C3.62766 9.60675 4.05779 9.20996 4.59375 8.95801C4.89477 8.81657 5.25352 8.74651 5.74316 8.71289C6.23335 8.67925 6.84925 8.68262 7.66309 8.68262Z";
 
-    const lightStop = { stopColor: 'rgb(var(--brand-300))' } as React.CSSProperties;
-    const deepStop = { stopColor: 'rgb(var(--brand-600))' } as React.CSSProperties;
-    const bodyFill = { fill: 'rgb(var(--brand-400))' } as React.CSSProperties;
+    // Use the illustration palette so the folder body matches the empty-state
+    // illustrations' main green (green mode illus-500 = #169C47) instead of the
+    // darker UI brand green. Still follows the blue ⇄ green theme.
+    const lightStop = { stopColor: 'rgb(var(--illus-300))' } as React.CSSProperties;
+    const deepStop = { stopColor: 'rgb(var(--illus-500))' } as React.CSSProperties;
+    const bodyFill = { fill: 'rgb(var(--illus-500))' } as React.CSSProperties;
 
     return (
         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
diff --git a/src/frontend/client/src/components/illustrations/KnowledgeSpaceIcon.tsx b/src/frontend/client/src/components/illustrations/KnowledgeSpaceIcon.tsx
index e46f2dab5..332980b89 100644
--- a/src/frontend/client/src/components/illustrations/KnowledgeSpaceIcon.tsx
+++ b/src/frontend/client/src/components/illustrations/KnowledgeSpaceIcon.tsx
@@ -116,9 +116,10 @@ const BLUE_INNER = `<g clip-path="url(#clip0___UID__)">
 <image id="image1___UID__" width="1990" height="1110" preserveAspectRatio="none" xlink:href="__IMG1__"/>
 </defs>`;
 
-const GREEN_INNER = `<g clip-path="url(#clip0___UID__)">
+const GREEN_INNER = `<g opacity="0.9">
+<g clip-path="url(#clip0___UID__)">
 <rect width="48" height="48" rx="6" fill="white"/>
-<rect width="48" height="48" rx="6" fill="url(#paint0_radial___UID__)" fill-opacity="0.4"/>
+<rect width="48" height="48" rx="6" fill="#3FAA66"/>
 <rect width="48" height="48" rx="6" fill="white" fill-opacity="0.5"/>
 <path d="M12.3999 11.4C12.3999 10.0745 13.4744 9 14.7999 9H41.9999C43.3254 9 44.3999 10.0745 44.3999 11.4V38.6C44.3999 39.9255 43.3254 41 41.9999 41H14.7999C13.4744 41 12.3999 39.9255 12.3999 38.6V11.4Z" fill="white"/>
 <g clip-path="url(#clip1___UID__)">
@@ -137,11 +138,11 @@ const GREEN_INNER = `<g clip-path="url(#clip0___UID__)">
 <g filter="url(#filter1_d___UID__)">
 <path d="M4.3999 11.4C4.3999 10.0745 5.47442 9 6.7999 9H33.9999C35.3254 9 36.3999 10.0745 36.3999 11.4V38.6C36.3999 39.9255 35.3254 41 33.9999 41H6.7999C5.47442 41 4.3999 39.9255 4.3999 38.6V11.4Z" fill="white" shape-rendering="crispEdges"/>
 <g opacity="0.3">
-<path opacity="0.3" d="M24.1698 19.3862C23.7051 19.3858 23.2596 19.201 22.931 18.8724C22.6024 18.5438 22.4176 18.0982 22.4171 17.6335V15.2H14.5852C13.9786 15.2 13.3968 15.441 12.9678 15.8699C12.5388 16.2989 12.2979 16.8807 12.2979 17.4873V31.276C12.2979 31.8827 12.5388 32.4645 12.9678 32.8934C13.3968 33.3224 13.9786 33.5634 14.5852 33.5634H23.9862C24.5928 33.5634 25.1746 33.3224 25.6036 32.8934C26.0326 32.4645 26.2736 31.8827 26.2736 31.276V19.3862H24.1698Z" fill="#00C650"/>
+<path opacity="0.3" d="M24.1698 19.3862C23.7051 19.3858 23.2596 19.201 22.931 18.8724C22.6024 18.5438 22.4176 18.0982 22.4171 17.6335V15.2H14.5852C13.9786 15.2 13.3968 15.441 12.9678 15.87C12.5388 16.2989 12.2979 16.8807 12.2979 17.4873V31.276C12.2979 31.8827 12.5388 32.4645 12.9678 32.8934C13.3968 33.3224 13.9786 33.5634 14.5852 33.5634H23.9862C24.5928 33.5634 25.1746 33.3224 25.6036 32.8934C26.0326 32.4645 26.2736 31.8827 26.2736 31.276V19.3862H24.1698Z" fill="#00C650"/>
 </g>
 <path d="M26.2744 19.3862H24.1707C23.706 19.3858 23.2604 19.201 22.9318 18.8724C22.6032 18.5438 22.4184 18.0982 22.418 17.6335V15.2L26.2744 19.3862Z" fill="#00C650"/>
 <path d="M27.9315 29.735H17.3031C16.5492 29.735 15.938 30.3461 15.938 31.1001V34.2689C15.938 35.0228 16.5492 35.634 17.3031 35.634H27.9315C28.6854 35.634 29.2966 35.0228 29.2966 34.2689V31.1001C29.2966 30.3461 28.6854 29.735 27.9315 29.735Z" fill="#00C650"/>
-<path d="M25.7471 32.277C25.7359 32.1716 25.6884 32.0895 25.6047 32.0307C25.5218 31.9719 25.4139 31.9426 25.2811 31.9426C25.1877 31.9426 25.1076 31.9567 25.0408 31.9848C24.974 32.013 24.9229 32.0512 24.8875 32.0995C24.8521 32.1478 24.8339 32.203 24.8331 32.2649C24.8331 32.3165 24.8448 32.3611 24.8682 32.399C24.8923 32.4368 24.9249 32.469 24.966 32.4955C25.007 32.5213 25.0525 32.543 25.1024 32.5607C25.1523 32.5785 25.2026 32.5933 25.2533 32.6054L25.4851 32.6634C25.5785 32.6851 25.6682 32.7145 25.7544 32.7515C25.8413 32.7885 25.919 32.8352 25.9874 32.8916C26.0566 32.9479 26.1114 33.0159 26.1516 33.0956C26.1919 33.1753 26.212 33.2687 26.212 33.3757C26.212 33.5206 26.1749 33.6482 26.1009 33.7585C26.0268 33.8679 25.9198 33.9537 25.7797 34.0156C25.6405 34.0768 25.4718 34.1074 25.2738 34.1074C25.0815 34.1074 24.9144 34.0776 24.7728 34.0181C24.6319 33.9585 24.5216 33.8716 24.4419 33.7573C24.3631 33.643 24.3204 33.5037 24.314 33.3395H24.7547C24.7611 33.4256 24.7877 33.4973 24.8343 33.5544C24.881 33.6116 24.9418 33.6542 25.0167 33.6824C25.0923 33.7106 25.1768 33.7247 25.2702 33.7247C25.3676 33.7247 25.4529 33.7102 25.5262 33.6812C25.6002 33.6514 25.6582 33.6104 25.7 33.558C25.7419 33.5049 25.7632 33.4429 25.764 33.3721C25.7632 33.3077 25.7443 33.2546 25.7073 33.2127C25.6703 33.1701 25.6183 33.1347 25.5515 33.1065C25.4855 33.0775 25.4083 33.0518 25.3197 33.0292L25.0384 32.9568C24.8348 32.9044 24.6738 32.8252 24.5554 32.7189C24.4379 32.6119 24.3792 32.4698 24.3792 32.2927C24.3792 32.147 24.4186 32.0194 24.4975 31.91C24.5772 31.8005 24.6854 31.7156 24.8223 31.6552C24.9591 31.594 25.1141 31.5634 25.2871 31.5634C25.4626 31.5634 25.6163 31.594 25.7483 31.6552C25.8812 31.7156 25.9854 31.7997 26.0611 31.9076C26.1367 32.0146 26.1758 32.1378 26.1782 32.277H25.7471Z" fill="white"/>
+<path d="M25.7471 32.277C25.7359 32.1716 25.6884 32.0895 25.6047 32.0307C25.5218 31.972 25.4139 31.9426 25.2811 31.9426C25.1877 31.9426 25.1076 31.9567 25.0408 31.9848C24.974 32.013 24.9229 32.0512 24.8875 32.0995C24.8521 32.1478 24.8339 32.203 24.8331 32.265C24.8331 32.3165 24.8448 32.3611 24.8682 32.399C24.8923 32.4368 24.9249 32.469 24.966 32.4956C25.007 32.5213 25.0525 32.5431 25.1024 32.5608C25.1523 32.5785 25.2026 32.5934 25.2533 32.6054L25.4851 32.6634C25.5785 32.6851 25.6682 32.7145 25.7544 32.7515C25.8413 32.7886 25.919 32.8352 25.9874 32.8916C26.0566 32.9479 26.1114 33.0159 26.1516 33.0956C26.1919 33.1753 26.212 33.2687 26.212 33.3757C26.212 33.5206 26.1749 33.6482 26.1009 33.7585C26.0268 33.868 25.9198 33.9537 25.7797 34.0157C25.6405 34.0768 25.4718 34.1074 25.2738 34.1074C25.0815 34.1074 24.9144 34.0776 24.7728 34.0181C24.6319 33.9585 24.5216 33.8716 24.4419 33.7573C24.3631 33.643 24.3204 33.5037 24.314 33.3395H24.7547C24.7611 33.4257 24.7877 33.4973 24.8343 33.5544C24.881 33.6116 24.9418 33.6543 25.0167 33.6824C25.0923 33.7106 25.1768 33.7247 25.2702 33.7247C25.3676 33.7247 25.4529 33.7102 25.5262 33.6812C25.6002 33.6514 25.6582 33.6104 25.7 33.5581C25.7419 33.5049 25.7632 33.443 25.764 33.3721C25.7632 33.3077 25.7443 33.2546 25.7073 33.2128C25.6703 33.1701 25.6183 33.1347 25.5515 33.1065C25.4855 33.0775 25.4083 33.0518 25.3197 33.0292L25.0384 32.9568C24.8348 32.9045 24.6738 32.8252 24.5554 32.7189C24.4379 32.6119 24.3792 32.4698 24.3792 32.2927C24.3792 32.147 24.4186 32.0195 24.4975 31.91C24.5772 31.8005 24.6854 31.7156 24.8223 31.6552C24.9591 31.594 25.1141 31.5635 25.2871 31.5635C25.4626 31.5635 25.6163 31.594 25.7483 31.6552C25.8812 31.7156 25.9854 31.7997 26.0611 31.9076C26.1367 32.0146 26.1758 32.1378 26.1782 32.277H25.7471Z" fill="white"/>
 <path d="M22.4775 34.07V31.5973H22.9255V33.6945H24.0145V34.07H22.4775Z" fill="white"/>
 <path d="M20.5042 31.5973L21.0488 32.5028H21.0681L21.615 31.5973H22.1258L21.3639 32.8336L22.1378 34.07H21.6187L21.0681 33.1705H21.0488L20.4982 34.07H19.9814L20.7626 32.8336L19.9911 31.5973H20.5042Z" fill="white"/>
 <path d="M19.3941 34.0966C19.3208 34.0966 19.258 34.0708 19.2057 34.0193C19.1534 33.9678 19.1276 33.905 19.1284 33.8309C19.1276 33.7585 19.1534 33.6965 19.2057 33.645C19.258 33.5935 19.3208 33.5677 19.3941 33.5677C19.4649 33.5677 19.5265 33.5935 19.5788 33.645C19.6319 33.6965 19.6589 33.7585 19.6597 33.8309C19.6589 33.88 19.646 33.9247 19.621 33.9649C19.5969 34.0052 19.5647 34.0374 19.5245 34.0615C19.485 34.0849 19.4416 34.0966 19.3941 34.0966Z" fill="white"/>
@@ -153,8 +154,9 @@ const GREEN_INNER = `<g clip-path="url(#clip0___UID__)">
 </g>
 <g opacity="0.9" filter="url(#filter2_d___UID__)">
 <path d="M24.9517 26.2671C25.4472 26.9251 25.695 27.2541 25.9875 27.5157C26.5215 27.9933 27.174 28.3187 27.8769 28.4579C28.2617 28.5342 28.6736 28.5342 29.4974 28.5342H40C43.7712 28.5342 45.6569 28.5342 46.8284 29.7058C48 30.8773 48 32.7629 48 36.5342V59.3525C48 63.1238 48 65.0094 46.8284 66.181C45.6569 67.3525 43.7712 67.3525 40 67.3525H8C4.22876 67.3525 2.34315 67.3525 1.17157 66.181C0 65.0094 0 63.1238 0 59.3525V32C0 28.2288 0 26.3431 1.17157 25.1716C2.34315 24 4.22876 24 8 24H20.406C21.2297 24 21.6416 24 22.0265 24.0762C22.7293 24.2155 23.3818 24.5409 23.9158 25.0185C24.2083 25.2801 24.4561 25.6091 24.9517 26.2671Z" fill="white"/>
-<path d="M24.9517 26.2671C25.4472 26.9251 25.695 27.2541 25.9875 27.5157C26.5215 27.9933 27.174 28.3187 27.8769 28.4579C28.2617 28.5342 28.6736 28.5342 29.4974 28.5342H40C43.7712 28.5342 45.6569 28.5342 46.8284 29.7058C48 30.8773 48 32.7629 48 36.5342V59.3525C48 63.1238 48 65.0094 46.8284 66.181C45.6569 67.3525 43.7712 67.3525 40 67.3525H8C4.22876 67.3525 2.34315 67.3525 1.17157 66.181C0 65.0094 0 63.1238 0 59.3525V32C0 28.2288 0 26.3431 1.17157 25.1716C2.34315 24 4.22876 24 8 24H20.406C21.2297 24 21.6416 24 22.0265 24.0762C22.7293 24.2155 23.3818 24.5409 23.9158 25.0185C24.2083 25.2801 24.4561 25.6091 24.9517 26.2671Z" fill="url(#paint1_radial___UID__)"/>
-<path d="M24.9517 26.2671C25.4472 26.9251 25.695 27.2541 25.9875 27.5157C26.5215 27.9933 27.174 28.3187 27.8769 28.4579C28.2617 28.5342 28.6736 28.5342 29.4974 28.5342H40C43.7712 28.5342 45.6569 28.5342 46.8284 29.7058C48 30.8773 48 32.7629 48 36.5342V59.3525C48 63.1238 48 65.0094 46.8284 66.181C45.6569 67.3525 43.7712 67.3525 40 67.3525H8C4.22876 67.3525 2.34315 67.3525 1.17157 66.181C0 65.0094 0 63.1238 0 59.3525V32C0 28.2288 0 26.3431 1.17157 25.1716C2.34315 24 4.22876 24 8 24H20.406C21.2297 24 21.6416 24 22.0265 24.0762C22.7293 24.2155 23.3818 24.5409 23.9158 25.0185C24.2083 25.2801 24.4561 25.6091 24.9517 26.2671Z" fill="white" fill-opacity="0.4"/>
+<path d="M24.9517 26.2671C25.4472 26.9251 25.695 27.2541 25.9875 27.5157C26.5215 27.9933 27.174 28.3187 27.8769 28.4579C28.2617 28.5342 28.6736 28.5342 29.4974 28.5342H40C43.7712 28.5342 45.6569 28.5342 46.8284 29.7058C48 30.8773 48 32.7629 48 36.5342V59.3525C48 63.1238 48 65.0094 46.8284 66.181C45.6569 67.3525 43.7712 67.3525 40 67.3525H8C4.22876 67.3525 2.34315 67.3525 1.17157 66.181C0 65.0094 0 63.1238 0 59.3525V32C0 28.2288 0 26.3431 1.17157 25.1716C2.34315 24 4.22876 24 8 24H20.406C21.2297 24 21.6416 24 22.0265 24.0762C22.7293 24.2155 23.3818 24.5409 23.9158 25.0185C24.2083 25.2801 24.4561 25.6091 24.9517 26.2671Z" fill="url(#paint0_radial___UID__)"/>
+<path d="M24.9517 26.2671C25.4472 26.9251 25.695 27.2541 25.9875 27.5157C26.5215 27.9933 27.174 28.3187 27.8769 28.4579C28.2617 28.5342 28.6736 28.5342 29.4974 28.5342H40C43.7712 28.5342 45.6569 28.5342 46.8284 29.7058C48 30.8773 48 32.7629 48 36.5342V59.3525C48 63.1238 48 65.0094 46.8284 66.181C45.6569 67.3525 43.7712 67.3525 40 67.3525H8C4.22876 67.3525 2.34315 67.3525 1.17157 66.181C0 65.0094 0 63.1238 0 59.3525V32C0 28.2288 0 26.3431 1.17157 25.1716C2.34315 24 4.22876 24 8 24H20.406C21.2297 24 21.6416 24 22.0265 24.0762C22.7293 24.2155 23.3818 24.5409 23.9158 25.0185C24.2083 25.2801 24.4561 25.6091 24.9517 26.2671Z" fill="#3FAA66"/>
+</g>
 </g>
 </g>
 <defs>
@@ -194,13 +196,9 @@ const GREEN_INNER = `<g clip-path="url(#clip0___UID__)">
 <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow___UID__"/>
 <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow___UID__" result="shape"/>
 </filter>
-<radialGradient id="paint0_radial___UID__" cx="0" cy="0" r="1" gradientTransform="matrix(-46.4516 -49.7102 49.6552 -53.1385 48 48.0533)" gradientUnits="userSpaceOnUse">
-<stop stop-color="#19B476"/>
-<stop offset="1" stop-color="#63F3B9"/>
-</radialGradient>
-<radialGradient id="paint1_radial___UID__" cx="0" cy="0" r="1" gradientTransform="matrix(-46.4516 -44.8972 49.6552 -47.9936 48 67.4006)" gradientUnits="userSpaceOnUse">
-<stop stop-color="#19B476"/>
-<stop offset="1" stop-color="#63F3B9"/>
+<radialGradient id="paint0_radial___UID__" cx="0" cy="0" r="1" gradientTransform="matrix(-46.4516 -23.1728 26.446 -48.7836 48 45.6763)" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00EB56"/>
+<stop offset="1" stop-color="#5ED7A7"/>
 </radialGradient>
 <clipPath id="clip0___UID__">
 <rect width="48" height="48" rx="6" fill="white"/>