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/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 }) => {
             }}
           />
         ) : (
-          <UserOutlined
+          <Card
-            style={{ fontSize: 48, color: 'var(--color-text-secondary)' }}
+            style={{ borderRadius: '5px', width: 76, height: 76 }}
-          />
+            styles={{ body: { padding: 0, height: '100%' } }}
+          >
+            <Flex justify='center' align='center' style={{ height: '100%' }}>
+              <UserOutlined
+                style={{
+                  fontSize: 32,
+                  color: 'var(--color-text-secondary)',
+                  marginBottom: 2
+                }}
+              />
+            </Flex>
+          </Card>
         )}
         <Flex vertical style={{ minWidth: 0 }}>
           {fullName && (