Franknoirot/onboarding avatar text (#2726)

* Add failing playwright test

* Fix the problem to get the test passing

* Give the avatar button a tooltip too

src/routes/Onboarding/UserMenu.tsx

@@ -1,6 +1,7 @@
 import { OnboardingButtons, useDismiss, useNextClick } from '.'
 import { onboardingPaths } from 'routes/Onboarding/paths'
 import { useStore } from '../../useStore'
+import { useEffect, useState } from 'react'
 
 export default function UserMenu() {
   const { buttonDownInStream } = useStore((s) => ({
@@ -8,6 +9,20 @@ export default function UserMenu() {
   }))
   const dismiss = useDismiss()
   const next = useNextClick(onboardingPaths.PROJECT_MENU)
+  const [avatarErrored, setAvatarErrored] = useState(false)
+  const buttonDescription = !avatarErrored ? 'your avatar' : 'the menu button'
+
+  // Set up error handling for the user's avatar image,
+  // so the onboarding text can be updated if it fails to load.
+  useEffect(() => {
+    const element = globalThis.document.querySelector(
+      '[data-testid="user-sidebar-toggle"] img'
+    )
+
+    if (element?.tagName === 'IMG') {
+      element.addEventListener('error', () => setAvatarErrored(true))
+    }
+  }, [])
 
   return (
     <div className="fixed grid justify-center items-start inset-0 z-50 pointer-events-none">
@@ -20,8 +35,8 @@ export default function UserMenu() {
         <section className="flex-1">
           <h2 className="text-2xl font-bold">User Menu</h2>
           <p className="my-4">
-            Click your avatar on the upper right to open the user menu. You can
-            change your settings, sign out, or request a feature.
+            Click {buttonDescription} in the upper right to open the user menu.
+            You can change your settings, sign out, or request a feature.
           </p>
           <p className="my-4">
             We only support global settings at the moment, but we are working to