From 835db6e49fde95619eb0c7e91597a071d3eb1281 Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Sat, 7 Mar 2026 19:44:10 +0000
Subject: [PATCH] Enhance UserProfilePopover component by adding a Card wrapper
 for the user icon, improving visual presentation and layout. Refactor icon
 action filtering for better readability.

---
 .../Dashboard/common/UserProfilePopover.jsx   | 23 +++++++++++++++----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/components/Dashboard/common/UserProfilePopover.jsx b/src/components/Dashboard/common/UserProfilePopover.jsx
index b7b2f5f..cc5988d 100644
--- a/src/components/Dashboard/common/UserProfilePopover.jsx
+++ b/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
-            style={{ fontSize: 48, color: 'var(--color-text-secondary)' }}
-          />
+          <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: 32,
+                  color: 'var(--color-text-secondary)',
+                  marginBottom: 2
+                }}
+              />
+            </Flex>
+          </Card>
         )}
         <Flex vertical style={{ minWidth: 0 }}>
           {fullName && (