From 113086a2fbb5aa0b828639747664d4dc03c0dce7 Mon Sep 17 00:00:00 2001
From: Kushal Bhana <68599557+kushalbhana@users.noreply.github.com>
Date: Fri, 5 Sep 2025 19:54:51 +0530
Subject: [PATCH] Fixed background color of file upload box in Chat
 configuration (#5132)

* Fixed background color of file upload box in Chat configuration

* Refactor FileUpload to use useSelector for customization

* lint fix

---------

Co-authored-by: Henry Heng <henryheng@flowiseai.com>
---
 .../ui/src/ui-component/extended/FileUpload.jsx     | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/ui-component/extended/FileUpload.jsx b/packages/ui/src/ui-component/extended/FileUpload.jsx
index 2555ee147..bc1fd9962 100644
--- a/packages/ui/src/ui-component/extended/FileUpload.jsx
+++ b/packages/ui/src/ui-component/extended/FileUpload.jsx
@@ -1,4 +1,4 @@
-import { useDispatch } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import { enqueueSnackbar as enqueueSnackbarAction, closeSnackbar as closeSnackbarAction, SET_CHATFLOW } from '@/store/actions'
@@ -41,6 +41,7 @@ const availableFileTypes = [
 
 const FileUpload = ({ dialogProps }) => {
     const dispatch = useDispatch()
+    const customization = useSelector((state) => state.customization)
 
     useNotifier()
 
@@ -234,14 +235,18 @@ const FileUpload = ({ dialogProps }) => {
                 <Box
                     sx={{
                         borderRadius: 2,
-                        border: '1px solid #e0e0e0',
-                        backgroundColor: '#fafafa',
+                        border: customization.isDarkMode ? '1px solid #424242' : '1px solid #e0e0e0',
+                        backgroundColor: customization.isDarkMode ? '#2d2d2d' : '#fafafa',
                         padding: 3,
                         marginBottom: 3,
                         marginTop: 2
                     }}
                 >
-                    <Typography sx={{ fontSize: 16, fontWeight: 600, marginBottom: 2, color: '#424242' }}>PDF Configuration</Typography>
+                    <Typography
+                        sx={{ fontSize: 16, fontWeight: 600, marginBottom: 2, color: customization.isDarkMode ? '#ffffff' : '#424242' }}
+                    >
+                        PDF Configuration
+                    </Typography>
 
                     <Box>
                         <Typography sx={{ fontSize: 14, fontWeight: 500, marginBottom: 1 }}>PDF Usage</Typography>