From 856073b61b7d066b620671816b532106050431f0 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sat, 21 Mar 2026 22:36:49 +0530
Subject: [PATCH] refactor: update file icon colors in connector configuration
 components for improved visual consistency

---
 .../components/composio-drive-config.tsx         | 12 ++++++------
 .../components/google-drive-config.tsx           | 12 ++++++------
 .../components/obsidian-config.tsx               |  2 --
 .../connectors/composio-drive-folder-tree.tsx    | 16 ++++++++--------
 .../connectors/google-drive-folder-tree.tsx      | 16 ++++++++--------
 .../components/settings/more-pages-content.tsx   |  2 +-
 6 files changed, 29 insertions(+), 31 deletions(-)

diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/composio-drive-config.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/composio-drive-config.tsx
index e38613865..f7f490774 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/composio-drive-config.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/composio-drive-config.tsx
@@ -50,14 +50,14 @@ function getFileIconFromName(fileName: string, className: string = "size-3.5 shr
 		lowerName.endsWith(".csv") ||
 		lowerName.includes("spreadsheet")
 	) {
-		return <FileSpreadsheet className={`${className} text-green-500`} />;
+		return <FileSpreadsheet className={`${className} text-muted-foreground`} />;
 	}
 	if (
 		lowerName.endsWith(".pptx") ||
 		lowerName.endsWith(".ppt") ||
 		lowerName.includes("presentation")
 	) {
-		return <Presentation className={`${className} text-orange-500`} />;
+		return <Presentation className={`${className} text-muted-foreground`} />;
 	}
 	if (
 		lowerName.endsWith(".docx") ||
@@ -67,7 +67,7 @@ function getFileIconFromName(fileName: string, className: string = "size-3.5 shr
 		lowerName.includes("word") ||
 		lowerName.includes("text")
 	) {
-		return <FileText className={`${className} text-gray-500`} />;
+		return <FileText className={`${className} text-muted-foreground`} />;
 	}
 	if (
 		lowerName.endsWith(".png") ||
@@ -77,9 +77,9 @@ function getFileIconFromName(fileName: string, className: string = "size-3.5 shr
 		lowerName.endsWith(".webp") ||
 		lowerName.endsWith(".svg")
 	) {
-		return <Image className={`${className} text-purple-500`} />;
+		return <Image className={`${className} text-muted-foreground`} />;
 	}
-	return <File className={`${className} text-gray-500`} />;
+	return <File className={`${className} text-muted-foreground`} />;
 }
 
 export const ComposioDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfigChange }) => {
@@ -199,7 +199,7 @@ export const ComposioDriveConfig: FC<ConnectorConfigProps> = ({ connector, onCon
 									className="text-xs sm:text-sm text-muted-foreground truncate flex items-center gap-1.5"
 									title={folder.name}
 								>
-									<FolderClosed className="size-3.5 shrink-0 text-gray-500" />
+									<FolderClosed className="size-3.5 shrink-0 text-muted-foreground" />
 									<span className="flex-1 truncate">{folder.name}</span>
 									<button
 										type="button"
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/google-drive-config.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/google-drive-config.tsx
index 6a5d34c7f..6b01df9f8 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/google-drive-config.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/google-drive-config.tsx
@@ -50,14 +50,14 @@ function getFileIconFromName(fileName: string, className: string = "size-3.5 shr
 		lowerName.endsWith(".csv") ||
 		lowerName.includes("spreadsheet")
 	) {
-		return <FileSpreadsheet className={`${className} text-green-500`} />;
+		return <FileSpreadsheet className={`${className} text-muted-foreground`} />;
 	}
 	if (
 		lowerName.endsWith(".pptx") ||
 		lowerName.endsWith(".ppt") ||
 		lowerName.includes("presentation")
 	) {
-		return <Presentation className={`${className} text-orange-500`} />;
+		return <Presentation className={`${className} text-muted-foreground`} />;
 	}
 	if (
 		lowerName.endsWith(".docx") ||
@@ -67,7 +67,7 @@ function getFileIconFromName(fileName: string, className: string = "size-3.5 shr
 		lowerName.includes("word") ||
 		lowerName.includes("text")
 	) {
-		return <FileText className={`${className} text-gray-500`} />;
+		return <FileText className={`${className} text-muted-foreground`} />;
 	}
 	if (
 		lowerName.endsWith(".png") ||
@@ -77,9 +77,9 @@ function getFileIconFromName(fileName: string, className: string = "size-3.5 shr
 		lowerName.endsWith(".webp") ||
 		lowerName.endsWith(".svg")
 	) {
-		return <Image className={`${className} text-purple-500`} />;
+		return <Image className={`${className} text-muted-foreground`} />;
 	}
-	return <File className={`${className} text-gray-500`} />;
+	return <File className={`${className} text-muted-foreground`} />;
 }
 
 export const GoogleDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfigChange }) => {
@@ -197,7 +197,7 @@ export const GoogleDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfi
 									className="text-xs sm:text-sm text-muted-foreground truncate flex items-center gap-1.5"
 									title={folder.name}
 								>
-									<FolderClosed className="size-3.5 shrink-0 text-gray-500" />
+									<FolderClosed className="size-3.5 shrink-0 text-muted-foreground" />
 									<span className="flex-1 truncate">{folder.name}</span>
 									<button
 										type="button"
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/obsidian-config.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/obsidian-config.tsx
index b1b00b4ca..028c6bd83 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/obsidian-config.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/obsidian-config.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import { FolderOpen } from "lucide-react";
 import type { FC } from "react";
 import { useEffect, useState } from "react";
 import { Input } from "@/components/ui/input";
@@ -127,7 +126,6 @@ export const ObsidianConfig: FC<ObsidianConfigProps> = ({
 			<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 p-3 sm:p-6 space-y-3 sm:space-y-4">
 				<div className="space-y-1 sm:space-y-2">
 					<h3 className="font-medium text-sm sm:text-base flex items-center gap-2">
-						<FolderOpen className="h-4 w-4 text-purple-500" />
 						Vault Configuration
 					</h3>
 				</div>
diff --git a/surfsense_web/components/connectors/composio-drive-folder-tree.tsx b/surfsense_web/components/connectors/composio-drive-folder-tree.tsx
index 48f52ffb1..05fbf801b 100644
--- a/surfsense_web/components/connectors/composio-drive-folder-tree.tsx
+++ b/surfsense_web/components/connectors/composio-drive-folder-tree.tsx
@@ -54,18 +54,18 @@ interface ComposioDriveFolderTreeProps {
 // Helper to get appropriate icon for file type
 function getFileIcon(mimeType: string, className: string = "h-4 w-4") {
 	if (mimeType.includes("spreadsheet") || mimeType.includes("excel")) {
-		return <FileSpreadsheet className={`${className} text-green-500`} />;
+		return <FileSpreadsheet className={`${className} text-muted-foreground`} />;
 	}
 	if (mimeType.includes("presentation") || mimeType.includes("powerpoint")) {
-		return <Presentation className={`${className} text-orange-500`} />;
+		return <Presentation className={`${className} text-muted-foreground`} />;
 	}
 	if (mimeType.includes("document") || mimeType.includes("word") || mimeType.includes("text")) {
-		return <FileText className={`${className} text-gray-500`} />;
+		return <FileText className={`${className} text-muted-foreground`} />;
 	}
 	if (mimeType.includes("image")) {
-		return <Image className={`${className} text-purple-500`} />;
+		return <Image className={`${className} text-muted-foreground`} />;
 	}
-	return <File className={`${className} text-gray-500`} />;
+	return <File className={`${className} text-muted-foreground`} />;
 }
 
 export function ComposioDriveFolderTree({
@@ -298,9 +298,9 @@ export function ComposioDriveFolderTree({
 					<div className="shrink-0">
 						{isFolder ? (
 							isExpanded ? (
-								<FolderOpen className="h-3 w-3 sm:h-4 sm:w-4 text-gray-500" />
+								<FolderOpen className="h-3 w-3 sm:h-4 sm:w-4 text-muted-foreground" />
 							) : (
-								<FolderClosed className="h-3 w-3 sm:h-4 sm:w-4 text-gray-500" />
+								<FolderClosed className="h-3 w-3 sm:h-4 sm:w-4 text-muted-foreground" />
 							)
 						) : (
 							getFileIcon(item.mimeType, "h-3 w-3 sm:h-4 sm:w-4")
@@ -349,7 +349,7 @@ export function ComposioDriveFolderTree({
 								onCheckedChange={() => toggleFolderSelection("root", "My Drive")}
 								className="shrink-0 h-3.5 w-3.5 sm:h-4 sm:w-4 border-slate-400/20 dark:border-white/20"
 							/>
-							<HardDrive className="h-3 w-3 sm:h-4 sm:w-4 text-primary shrink-0" />
+							<HardDrive className="h-3 w-3 sm:h-4 sm:w-4 text-muted-foreground shrink-0" />
 							<button
 								type="button"
 								className="font-semibold truncate text-xs sm:text-sm cursor-pointer bg-transparent border-0 p-0 text-left"
diff --git a/surfsense_web/components/connectors/google-drive-folder-tree.tsx b/surfsense_web/components/connectors/google-drive-folder-tree.tsx
index ceb8b2d44..1584d05d0 100644
--- a/surfsense_web/components/connectors/google-drive-folder-tree.tsx
+++ b/surfsense_web/components/connectors/google-drive-folder-tree.tsx
@@ -53,18 +53,18 @@ interface GoogleDriveFolderTreeProps {
 // Helper to get appropriate icon for file type
 function getFileIcon(mimeType: string, className: string = "h-4 w-4") {
 	if (mimeType.includes("spreadsheet") || mimeType.includes("excel")) {
-		return <FileSpreadsheet className={`${className} text-green-500`} />;
+		return <FileSpreadsheet className={`${className} text-muted-foreground`} />;
 	}
 	if (mimeType.includes("presentation") || mimeType.includes("powerpoint")) {
-		return <Presentation className={`${className} text-orange-500`} />;
+		return <Presentation className={`${className} text-muted-foreground`} />;
 	}
 	if (mimeType.includes("document") || mimeType.includes("word") || mimeType.includes("text")) {
-		return <FileText className={`${className} text-gray-500`} />;
+		return <FileText className={`${className} text-muted-foreground`} />;
 	}
 	if (mimeType.includes("image")) {
-		return <Image className={`${className} text-purple-500`} />;
+		return <Image className={`${className} text-muted-foreground`} />;
 	}
-	return <File className={`${className} text-gray-500`} />;
+	return <File className={`${className} text-muted-foreground`} />;
 }
 
 export function GoogleDriveFolderTree({
@@ -280,9 +280,9 @@ export function GoogleDriveFolderTree({
 					<div className="shrink-0">
 						{isFolder ? (
 							isExpanded ? (
-								<FolderOpen className="h-3 w-3 sm:h-4 sm:w-4 text-gray-500" />
+								<FolderOpen className="h-3 w-3 sm:h-4 sm:w-4 text-muted-foreground" />
 							) : (
-								<FolderClosed className="h-3 w-3 sm:h-4 sm:w-4 text-gray-500" />
+								<FolderClosed className="h-3 w-3 sm:h-4 sm:w-4 text-muted-foreground" />
 							)
 						) : (
 							getFileIcon(item.mimeType, "h-3 w-3 sm:h-4 sm:w-4")
@@ -331,7 +331,7 @@ export function GoogleDriveFolderTree({
 								onCheckedChange={() => toggleFolderSelection("root", "My Drive")}
 								className="shrink-0 h-3.5 w-3.5 sm:h-4 sm:w-4 border-slate-400/20 dark:border-white/20"
 							/>
-							<HardDrive className="h-3 w-3 sm:h-4 sm:w-4 text-primary shrink-0" />
+							<HardDrive className="h-3 w-3 sm:h-4 sm:w-4 text-muted-foreground shrink-0" />
 							<button
 								type="button"
 								className="font-semibold truncate text-xs sm:text-sm cursor-pointer bg-transparent border-0 p-0 text-left"
diff --git a/surfsense_web/components/settings/more-pages-content.tsx b/surfsense_web/components/settings/more-pages-content.tsx
index 6b02cf92a..bf0c9924f 100644
--- a/surfsense_web/components/settings/more-pages-content.tsx
+++ b/surfsense_web/components/settings/more-pages-content.tsx
@@ -175,7 +175,7 @@ export function MorePagesContent() {
 						<DialogTrigger asChild>
 							<Button className="w-full bg-emerald-600 text-white hover:bg-emerald-700">
 								<Mail className="h-4 w-4" />
-								Contact Us to Upgrade
+								Contact us to Upgrade
 							</Button>
 						</DialogTrigger>
 						<DialogContent className="select-none sm:max-w-sm">