From c191af6c9b8a805d973a2e3fcc481eefb65623a5 Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Mon, 4 Aug 2025 18:31:28 -0400
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20style:=20Theming=20in=20SharePoi?=
 =?UTF-8?q?ntPickerDialog,=20PrincipalAvatar,=20and=20PeoplePickerSearchIt?=
 =?UTF-8?q?em?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SharePoint/SharePointPickerDialog.tsx        | 16 ++++++++--------
 .../PeoplePicker/PeoplePickerSearchItem.tsx      |  2 +-
 .../src/components/Sharing/PrincipalAvatar.tsx   |  4 ++--
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/client/src/components/SharePoint/SharePointPickerDialog.tsx b/client/src/components/SharePoint/SharePointPickerDialog.tsx
index fcdaff37cc..744ac0fe9c 100644
--- a/client/src/components/SharePoint/SharePointPickerDialog.tsx
+++ b/client/src/components/SharePoint/SharePointPickerDialog.tsx
@@ -66,7 +66,7 @@ export default function SharePointPickerDialog({
       <OGDialogPortal>
         <OGDialogOverlay className="bg-black/50" />
         <OGDialogContent
-          className="bg-#F5F5F5 sharepoint-picker-bg fixed left-1/2 top-1/2 z-50 h-[680px] max-h-[90vh] max-w-[90vw] -translate-x-1/2 -translate-y-1/2 rounded-lg border p-2 shadow-lg focus:outline-none"
+          className="sharepoint-picker-bg fixed left-1/2 top-1/2 z-50 h-[680px] max-h-[90vh] max-w-[90vw] -translate-x-1/2 -translate-y-1/2 rounded-lg border bg-surface-primary p-2 shadow-lg focus:outline-none"
           showCloseButton={true}
         >
           <OGDialogTitle className="sr-only">
@@ -77,26 +77,26 @@ export default function SharePointPickerDialog({
 
             {isDownloading && (
               <div className="absolute inset-0 z-10 flex items-center justify-center rounded-lg bg-black/30 backdrop-blur-sm">
-                <div className="mx-4 w-full max-w-sm rounded-lg bg-white p-6 shadow-lg">
+                <div className="mx-4 w-full max-w-sm rounded-lg bg-surface-primary p-6 shadow-lg">
                   <div className="text-center">
                     <div className="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-b-2 border-blue-600"></div>
-                    <h3 className="mb-2 text-lg font-semibold text-gray-900">
+                    <h3 className="mb-2 text-lg font-semibold text-text-primary">
                       {localize('com_files_downloading')}
                     </h3>
                     {downloadProgress && (
                       <div className="space-y-2">
-                        <p className="text-sm text-gray-600">
+                        <p className="text-sm text-text-secondary">
                           {localize('com_files_download_progress', {
                             0: downloadProgress.completed,
                             1: downloadProgress.total,
                           })}
                         </p>
                         {downloadProgress.currentFile && (
-                          <p className="truncate text-xs text-gray-500">
+                          <p className="truncate text-xs text-text-tertiary">
                             {downloadProgress.currentFile}
                           </p>
                         )}
-                        <div className="h-2 w-full rounded-full bg-gray-200">
+                        <div className="h-2 w-full rounded-full bg-surface-tertiary">
                           <div
                             className="h-2 rounded-full bg-blue-600 transition-all duration-300"
                             style={{
@@ -104,7 +104,7 @@ export default function SharePointPickerDialog({
                             }}
                           ></div>
                         </div>
-                        <p className="text-xs text-gray-500">
+                        <p className="text-xs text-text-tertiary">
                           {localize('com_files_download_percent_complete', {
                             0: Math.round(
                               (downloadProgress.completed / downloadProgress.total) * 100,
@@ -121,7 +121,7 @@ export default function SharePointPickerDialog({
                       </div>
                     )}
                     {!downloadProgress && (
-                      <p className="text-sm text-gray-600">
+                      <p className="text-sm text-text-secondary">
                         {localize('com_files_preparing_download')}
                       </p>
                     )}
diff --git a/client/src/components/Sharing/PeoplePicker/PeoplePickerSearchItem.tsx b/client/src/components/Sharing/PeoplePicker/PeoplePickerSearchItem.tsx
index 03166fcddb..b4cb5f96b2 100644
--- a/client/src/components/Sharing/PeoplePicker/PeoplePickerSearchItem.tsx
+++ b/client/src/components/Sharing/PeoplePicker/PeoplePickerSearchItem.tsx
@@ -40,7 +40,7 @@ const PeoplePickerSearchItem = forwardRef<HTMLDivElement, PeoplePickerSearchItem
           };
         default:
           return {
-            className: 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-300',
+            className: 'bg-surface-tertiary text-text-secondary',
             label: type,
           };
       }
diff --git a/client/src/components/Sharing/PrincipalAvatar.tsx b/client/src/components/Sharing/PrincipalAvatar.tsx
index a96a66b036..753ca362f7 100644
--- a/client/src/components/Sharing/PrincipalAvatar.tsx
+++ b/client/src/components/Sharing/PrincipalAvatar.tsx
@@ -57,8 +57,8 @@ export default function PrincipalAvatar({
       default:
         return {
           Icon: User,
-          containerClass: 'bg-gray-100 dark:bg-gray-900',
-          iconClass: 'text-gray-600 dark:text-gray-400',
+          containerClass: 'bg-surface-tertiary',
+          iconClass: 'text-text-secondary',
         };
     }
   };