Enhance UserProfilePopover component by adding a Card wrapper for the user icon, improving visual presentation and layout. Refactor icon action filtering for better readability.

src/components/Dashboard/common/FileUpload.jsx

@@ -54,6 +54,7 @@ const FileUpload = ({
         currentFiles.length === 0
       : !currentFiles
     setHasNoItems(noItems)
+    onChange(currentFiles)
   }, [currentFiles, multiple])
 
   const handleFileUpload = async (file) => {
@@ -68,11 +69,9 @@ const FileUpload = ({
           // For multiple files, add to existing array
           const newFiles = [...currentFiles, uploadedFile]
           setCurrentFiles(newFiles)
-          onChange(newFiles)
         } else {
           // For single file, replace the value
           setCurrentFiles(uploadedFile)
-          onChange(uploadedFile)
         }
       }
     } catch (error) {
@@ -88,11 +87,9 @@ const FileUpload = ({
         // For multiple files, add to existing array
         const newFiles = [...currentFiles, selectedFile]
         setCurrentFiles(newFiles)
-        onChange(newFiles)
       } else {
         // For single file, replace the value
         setCurrentFiles(selectedFile)
-        onChange(selectedFile)
       }
       // Clear the selection
       setSelectedFile(null)

src/components/Dashboard/common/UserProfilePopover.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import { createElement } from 'react'
-import { Flex, Typography, Button, Space, Dropdown, Divider } from 'antd'
+import { Flex, Typography, Button, Space, Dropdown, Divider, Card } from 'antd'
 import { UserOutlined } from '@ant-design/icons'
 import { useContext } from 'react'
 import { useNavigate } from 'react-router-dom'
@@ -17,7 +17,9 @@ const UserProfilePopover = ({ onClose }) => {
   const navigate = useNavigate()
 
   const modelActions = User.actions || []
-  const iconActions = modelActions.filter((a) => ICON_ACTION_NAMES.includes(a.name))
+  const iconActions = modelActions.filter((a) =>
+    ICON_ACTION_NAMES.includes(a.name)
+  )
   const dropdownActions = modelActions.filter(
     (a) => !ICON_ACTION_NAMES.includes(a.name)
   )
@@ -96,9 +98,20 @@ const UserProfilePopover = ({ onClose }) => {
             }}
           />
         ) : (
+          <Card
+            style={{ borderRadius: '5px', width: 76, height: 76 }}
+            styles={{ body: { padding: 0, height: '100%' } }}
+          >
+            <Flex justify='center' align='center' style={{ height: '100%' }}>
               <UserOutlined
-            style={{ fontSize: 48, color: 'var(--color-text-secondary)' }}
+                style={{
+                  fontSize: 32,
+                  color: 'var(--color-text-secondary)',
+                  marginBottom: 2
+                }}
               />
+            </Flex>
+          </Card>
         )}
         <Flex vertical style={{ minWidth: 0 }}>
           {fullName && (