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

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

GitOrigin-RevId: 8a678f05fbd3467be87198aca2a631ff31d1fb7d

services/web/frontend/js/features/form-helpers/hydrate-form.js

@@ -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)
     }