fix: knowledge Base Table — Row Icon Appears Clipped/Cut for Some Entries (#12009)

* 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

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;

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%;

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))",