From 7490e4f0ccd90fb91cffe24ddff1eee233e3bfe7 Mon Sep 17 00:00:00 2001
From: Deon Sanchez <69873175+deon-sanchez@users.noreply.github.com>
Date: Wed, 4 Mar 2026 10:40:57 -0700
Subject: [PATCH] =?UTF-8?q?fix:=20knowledge=20Base=20Table=20=E2=80=94=20R?=
 =?UTF-8?q?ow=20Icon=20Appears=20Clipped/Cut=20for=20Some=20Entries=20(#12?=
 =?UTF-8?q?009)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* removed book and added file. makes more sense

* feat: add accent-blue color to design system and update knowledge base file icon

- Add accent-blue color variables to light and dark themes in CSS
- Register accent-blue in Tailwind config with DEFAULT and foreground variants
- Update knowledge base file icon fallback color from hardcoded text-blue-500 to text-accent-blue-foreground
---
 .../pages/knowledgePage/config/knowledgeBaseColumns.tsx     | 4 ++--
 src/frontend/src/style/index.css                            | 6 ++++++
 src/frontend/tailwind.config.mjs                            | 4 ++++
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/pages/MainPage/pages/knowledgePage/config/knowledgeBaseColumns.tsx b/src/frontend/src/pages/MainPage/pages/knowledgePage/config/knowledgeBaseColumns.tsx
index 1a48f9b955..4ff06b8bed 100644
--- a/src/frontend/src/pages/MainPage/pages/knowledgePage/config/knowledgeBaseColumns.tsx
+++ b/src/frontend/src/pages/MainPage/pages/knowledgePage/config/knowledgeBaseColumns.tsx
@@ -56,8 +56,8 @@ export const createKnowledgeBaseColumns = (
           iconColor = "text-muted-foreground";
         } else if (sourceTypes.length === 1) {
           const type = sourceTypes[0] as keyof typeof FILE_ICONS;
-          iconName = FILE_ICONS[type]?.icon ?? "BookOpen";
-          iconColor = FILE_ICONS[type]?.color ?? undefined;
+          iconName = FILE_ICONS[type]?.icon ?? "File";
+          iconColor = FILE_ICONS[type]?.color ?? "text-accent-blue-foreground";
         } else {
           iconName = "Layers";
           iconColor = undefined;
diff --git a/src/frontend/src/style/index.css b/src/frontend/src/style/index.css
index 886d0b89fd..7c7a0719a8 100644
--- a/src/frontend/src/style/index.css
+++ b/src/frontend/src/style/index.css
@@ -43,6 +43,9 @@
     --accent-indigo-foreground: 243 75% 59%; /* hsl(243, 75%, 59%) */
     --accent-red-foreground: 0 72% 51%; /* hsl(0, 72%, 51%) */
 
+    --accent-blue: 217 91% 60%; /* hsl(217, 91%, 60%) — blue-500 */
+    --accent-blue-foreground: 217 91% 60%; /* hsl(217, 91%, 60%) */
+
     --accent-pink: 326, 78%, 95%; /* hsl(326, 78%, 95%) */
     --accent-pink-foreground: 333 71% 51%; /* hsl(333, 71%, 51%) */
 
@@ -233,6 +236,9 @@
     --accent-emerald-hover: 163.1 88.1% 19.8%; /* hsl(163.1, 88.1%, 19.8%) */
     --accent-indigo: 242 25% 34%; /* hsl(242, 25%, 34%) */
     --accent-indigo-foreground: 234 89% 74%; /* hsl(234, 89%, 74%) */
+    --accent-blue: 213 94% 68%; /* hsl(213, 94%, 68%) */
+    --accent-blue-foreground: 213 94% 68%; /* hsl(213, 94%, 68%) */
+
     --accent-pink: 336, 69%, 30%; /* hsl(336, 69%, 30%) */
     --accent-pink-foreground: 329 86% 70%; /* hsl(329, 86%, 70%) */
     --accent-purple-foreground: 270, 95%, 75%;
diff --git a/src/frontend/tailwind.config.mjs b/src/frontend/tailwind.config.mjs
index fa6d850df2..e8e222afcd 100644
--- a/src/frontend/tailwind.config.mjs
+++ b/src/frontend/tailwind.config.mjs
@@ -249,6 +249,10 @@ const config = {
           DEFAULT: "hsl(var(--accent-indigo))",
           foreground: "hsl(var(--accent-indigo-foreground))",
         },
+        "accent-blue": {
+          DEFAULT: "hsl(var(--accent-blue))",
+          foreground: "hsl(var(--accent-blue-foreground))",
+        },
         "accent-pink": {
           DEFAULT: "hsl(var(--accent-pink))",
           foreground: "hsl(var(--accent-pink-foreground))",