f6e975db84
* Add previous button to OnboardingButtons, move dismiss to popover corner * A snapshot a day keeps the bugs away! 📷🐛 (OS: namespace-profile-ubuntu-8-cores) * A snapshot a day keeps the bugs away! 📷🐛 (OS: namespace-profile-ubuntu-8-cores) * Clean up diagnostics I am thoroughly enjoying nvim now * Amend "click through" test to also click back * fmt * Set this test back to fixme, that work should be its own PR --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
54 lines
2.0 KiB
TypeScript
54 lines
2.0 KiB
TypeScript
import { OnboardingButtons } from '.'
|
|
import { onboardingPaths } from 'routes/Onboarding/paths'
|
|
import { useEffect, useState } from 'react'
|
|
import { useUser } from 'machines/appMachine'
|
|
|
|
export default function UserMenu() {
|
|
const user = useUser()
|
|
const [avatarErrored, setAvatarErrored] = useState(false)
|
|
|
|
const errorOrNoImage = !user?.image || avatarErrored
|
|
const buttonDescription = errorOrNoImage ? 'the menu button' : 'your avatar'
|
|
|
|
// 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'
|
|
)
|
|
|
|
const onError = () => setAvatarErrored(true)
|
|
if (element?.tagName === 'IMG') {
|
|
element?.addEventListener('error', onError)
|
|
}
|
|
return () => {
|
|
element?.removeEventListener('error', onError)
|
|
}
|
|
}, [])
|
|
|
|
return (
|
|
<div className="fixed grid justify-center items-start inset-0 z-50 pointer-events-none">
|
|
<div
|
|
className={
|
|
'relative pointer-events-auto max-w-xl flex flex-col border border-chalkboard-50 dark:border-chalkboard-80 shadow-lg justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded'
|
|
}
|
|
>
|
|
<section className="flex-1">
|
|
<h2 className="text-2xl font-bold">User Menu</h2>
|
|
<p className="my-4">
|
|
Click {buttonDescription} in the upper right to open the user menu.
|
|
You can change your user-level settings, sign out, report a bug,
|
|
manage your account, request a feature, and more.
|
|
</p>
|
|
<p className="my-4">
|
|
Many settings can be set either a user or per-project level. User
|
|
settings will apply to all projects, while project settings will
|
|
only apply to the current project.
|
|
</p>
|
|
</section>
|
|
<OnboardingButtons currentSlug={onboardingPaths.USER_MENU} />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|