github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2025-03-03 16:24:29 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #17845 from overleaf/mf-add-icon-error-login-home

Browse source 
[web][website-redesign] Add notification icon and make the notification text to be left-justified

GitOrigin-RevId: 8a678f05fbd3467be87198aca2a631ff31d1fb7d
This commit is contained in:
M Fahru 2024-04-11 05:36:56 -07:00 committed by Copybot
parent d12a0b5f07
commit 510bb062ee
1 changed files with 17 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
services/web/frontend/js/features/form-helpers/hydrate-form.js
View file

@ -222,17 +222,14 @@ function showMessagesNewStyle(formEl, messageBag) {
} else {
// No custom error element for key on page, append a new error message
const messageElContainer = document.createElement('div')
messageElContainer.className = classNames(
'notification',
'text-centered',
{
'notification-type-error': message.type === 'error',
'notification-type-success': message.type !== 'error',
}
)
messageElContainer.className = classNames('notification', {
'notification-type-error': message.type === 'error',
'notification-type-success': message.type !== 'error',
})
const messageEl = document.createElement('div')
messageEl.className = 'notification-content'
// create the message text
messageEl.className = 'notification-content text-left'
messageEl.textContent = message.text || `Error: ${message.key}`
messageEl.setAttribute('aria-live', 'assertive')
messageEl.setAttribute(
@ -249,6 +246,17 @@ function showMessagesNewStyle(formEl, messageBag) {
messageEl.append(listEl)
}
// create the left icon
const icon = document.createElement('span')
icon.className = 'material-symbols'
icon.setAttribute('aria-hidden', 'true')
icon.innerText = message.type === 'error' ? 'error' : 'check_circle'
const messageIcon = document.createElement('div')
messageIcon.className = 'notification-icon'
messageIcon.appendChild(icon)
// append icon first so it's on the left
messageElContainer.appendChild(messageIcon)
messageElContainer.appendChild(messageEl)
messagesEl.append(messageElContainer)
}