@@ -54,7 +54,7 @@ import { getBrandingConfig } from "../../redux/selectors/configSelectors";
5454import { messageInstance } from "lowcoder-design/src/components/GlobalInstances" ;
5555import { EditorContext } from "../../comps/editorState" ;
5656import Tooltip from "antd/es/tooltip" ;
57- import { LockOutlined } from '@ant-design/icons' ;
57+ import { LockOutlined , ExclamationCircleOutlined } from '@ant-design/icons' ;
5858import Avatar from 'antd/es/avatar' ;
5959
6060
@@ -259,6 +259,27 @@ const Prefix = styled.div`
259259 }
260260` ;
261261
262+ const EditingNoticeWrapper = styled . div `
263+ display: flex;
264+ align-items: center;
265+ background-color: #ffe6e6; /* Light red background for warning */
266+ padding: 2px 8px;
267+ border-radius: 5px;
268+ margin-right: 8px;
269+ ` ;
270+
271+ const EditingHintText = styled . span `
272+ margin-left: 8px;
273+ font-size: 12px;
274+ color: #ff4d4f; /* Red color to indicate warning */
275+ ` ;
276+
277+ const WarningIcon = styled ( ExclamationCircleOutlined ) `
278+ margin-left: 8px;
279+ font-size: 16px;
280+ color: #ff4d4f; /* Red color for the icon */
281+ ` ;
282+
262283// Add the lock icon logic for disabled options
263284const DropdownMenuStyled = styled ( DropdownMenu ) `
264285 .ant-dropdown-menu-item:hover {
@@ -471,12 +492,19 @@ export default function Header(props: HeaderProps) {
471492< >
472493{ /* Display a hint about who is editing the app */ }
473494{ concurrentAppEditingState && (
474- < div style = { { display :'flex' , alignItems :'center' , marginRight :'8px' } } >
475- < Avatar size = "small" src = { user . avatarUrl } />
476- < span style = { { marginLeft :'8px' , fontSize :'12px' , color :'#b8b9bf' } } >
477- { `${ user . username } }
478- </ span >
479- </ div >
495+ < Tooltip
496+ title = "Changes will not be saved while another user is editing this app."
497+ color = "red"
498+ placement = "bottom"
499+ >
500+ < EditingNoticeWrapper >
501+ < Avatar size = "small" src = { user . avatarUrl } />
502+ < EditingHintText >
503+ { `${ user . username } }
504+ </ EditingHintText >
505+ < WarningIcon />
506+ </ EditingNoticeWrapper >
507+ </ Tooltip >
480508) }
481509
482510{ applicationId && (
