ByoungSooPark/modeling-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add cursor-not-allowed to onboarding backdrops that block clicks (#6789)

Browse Source 
* Add `cursor-not-allowed` to onboarding backdrops that block clicks

Some follow-up feedback after #6714 from @jacebrowning, so that users
know why they can't click around.

* Make anything in the onboarding card `cursor-auto`
This commit is contained in:
Frank Noirot
2025-05-09 13:28:45 -04:00
committed by GitHub
parent 4abbe0d57a
commit 7d6427ab64
3 changed files with 23 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/routes/Onboarding/BrowserOnboardingRoutes.tsx
View File

@ -79,7 +79,7 @@ function Welcome() {
}, [])
return (
<div className="fixed inset-0 z-50 grid items-end justify-center p-2">
<div className="cursor-not-allowed fixed inset-0 z-50 grid items-end justify-center p-2">
<OnboardingCard>
<h1 className="text-xl font-bold">Welcome to Zoo Design Studio</h1>
<p className="my-4">
@ -149,7 +149,7 @@ function Toolbar() {
useOnboardingPanes()
return (
<div className="fixed inset-0 z-[99] grid items-start justify-center p-16">
<div className="cursor-not-allowed fixed inset-0 z-[99] grid items-start justify-center p-16">
<OnboardingCard>
<h1 className="text-xl font-bold">This is the toolbar</h1>
<p className="my-4">
@ -170,7 +170,7 @@ function TextToCad() {
useOnboardingPanes()
return (
<div className="fixed inset-0 z-50 grid items-start justify-center p-16">
<div className="cursor-not-allowed fixed inset-0 z-50 grid items-start justify-center p-16">
<OnboardingCard>
<h1 className="text-xl font-bold">Text-to-CAD</h1>
<p className="my-4">
@ -229,7 +229,7 @@ function TextToCadPrompt() {
useAdvanceOnboardingOnFormSubmit(thisOnboardingStatus)
return (
<div className="fixed inset-0 z-[99] grid items-center justify-center">
<div className="cursor-not-allowed fixed inset-0 z-[99] grid items-center justify-center">
<OnboardingCard>
<h1 className="text-xl font-bold">Text-to-CAD prompt</h1>
<p className="my-4">
@ -325,7 +325,7 @@ function PromptToEdit() {
useAdvanceOnboardingOnFormSubmit(thisOnboardingStatus)
return (
<div className="fixed inset-0 z-50 grid items-center justify-center p-16">
<div className="cursor-not-allowed fixed inset-0 z-50 grid items-center justify-center p-16">
<OnboardingCard className="col-start-3 col-span-2">
<h1 className="text-xl font-bold">Modify with Zoo Text-to-CAD</h1>
<p className="my-4">
@ -381,7 +381,7 @@ function PromptToEditPrompt() {
useAdvanceOnboardingOnFormSubmit(thisOnboardingStatus)
return (
<div className="fixed inset-0 z-[99] grid items-center justify-center">
<div className="cursor-not-allowed fixed inset-0 z-[99] grid items-center justify-center">
<OnboardingCard className="pointer-events-auto">
<h1 className="text-xl font-bold">Modify with Text-to-CAD prompt</h1>
{!isReady && (
@ -429,7 +429,7 @@ function PromptToEditResult() {
}, [])
return (
<div className="fixed inset-0 z-[99] p-8 grid justify-center items-end">
<div className="cursor-not-allowed fixed inset-0 z-[99] p-8 grid justify-center items-end">
<OnboardingCard className="col-start-3 col-span-2">
<h1 className="text-xl font-bold">Result</h1>
<p className="my-4">
@ -462,7 +462,7 @@ function OnboardingConclusion() {
useOnboardingPanes()
return (
<div className="fixed inset-0 z-50 p-16 grid justify-center items-center">
<div className="cursor-not-allowed fixed inset-0 z-50 p-16 grid justify-center items-center">
<OnboardingCard>
<h1 className="text-xl font-bold">Download the desktop app</h1>
<p className="my-4">

28
src/routes/Onboarding/DesktopOnboardingRoutes.tsx
View File

@ -78,7 +78,7 @@ function Welcome() {
}, [loaderData?.project?.name])
return (
<div className="fixed inset-0 z-50 grid items-end justify-center p-2">
<div className="cursor-not-allowed fixed inset-0 z-50 grid items-end justify-center p-2">
<OnboardingCard>
<h1 className="text-xl font-bold">Welcome to Zoo Design Studio</h1>
<p className="my-4">
@ -140,7 +140,7 @@ function Toolbar() {
useOnboardingPanes()
return (
<div className="fixed inset-0 z-[99] grid items-start justify-center p-16">
<div className="cursor-not-allowed fixed inset-0 z-[99] grid items-start justify-center p-16">
<OnboardingCard>
<h1 className="text-xl font-bold">This is the toolbar</h1>
<p className="my-4">
@ -161,7 +161,7 @@ function TextToCad() {
useOnboardingPanes()
return (
<div className="fixed inset-0 z-50 grid items-start justify-center p-16">
<div className="cursor-not-allowed fixed inset-0 z-50 grid items-start justify-center p-16">
<OnboardingCard>
<h1 className="text-xl font-bold">Text-to-CAD</h1>
<p className="my-4">
@ -220,7 +220,7 @@ function TextToCadPrompt() {
useAdvanceOnboardingOnFormSubmit(thisOnboardingStatus, 'desktop')
return (
<div className="fixed inset-0 z-[99] grid items-center justify-center">
<div className="cursor-not-allowed fixed inset-0 z-[99] grid items-center justify-center">
<OnboardingCard className="pointer-events-auto">
<h1 className="text-xl font-bold">Text-to-CAD prompt</h1>
<p className="my-4">
@ -266,7 +266,7 @@ function FeatureTreePane() {
}, [])
return (
<div className="fixed inset-0 z-[99] p-8 grid justify-center items-end">
<div className="cursor-not-allowed fixed inset-0 z-[99] p-8 grid justify-center items-end">
<OnboardingCard className="col-start-3 col-span-2">
<h1 className="text-xl font-bold">CPU Fan Housing</h1>
<p className="my-4">
@ -297,7 +297,7 @@ function CodePane() {
useOnboardingPanes(['code'])
return (
<div className="fixed inset-0 z-50 p-8 grid justify-center items-end">
<div className="cursor-not-allowed fixed inset-0 z-50 p-8 grid justify-center items-end">
<OnboardingCard className="col-start-3 col-span-2">
<h1 className="text-xl font-bold">KCL Code</h1>
<p className="my-4">
@ -328,7 +328,7 @@ function ProjectPane() {
useOnboardingPanes(['files'])
return (
<div className="fixed inset-0 z-50 p-8 grid justify-center items-end">
<div className="cursor-not-allowed fixed inset-0 z-50 p-8 grid justify-center items-end">
<OnboardingCard className="col-start-3 col-span-2">
<h1 className="text-xl font-bold">Files Pane</h1>
<p className="my-4">
@ -355,7 +355,7 @@ function OtherPanes() {
useOnboardingPanes(['logs', 'variables'])
return (
<div className="fixed inset-0 z-50 p-8 grid justify-center items-end">
<div className="cursor-not-allowed fixed inset-0 z-50 p-8 grid justify-center items-end">
<OnboardingCard className="col-start-3 col-span-2">
<h1 className="text-xl font-bold">Other panes</h1>
<p className="my-4">
@ -400,7 +400,7 @@ function PromptToEdit() {
useAdvanceOnboardingOnFormSubmit(thisOnboardingStatus, 'desktop')
return (
<div className="fixed inset-0 z-50 p-8 grid justify-center items-center">
<div className="cursor-not-allowed fixed inset-0 z-50 p-8 grid justify-center items-center">
<OnboardingCard className="col-start-3 col-span-2">
<h1 className="text-xl font-bold">Modify with Zoo Text-to-CAD</h1>
<p className="my-4">
@ -456,7 +456,7 @@ function PromptToEditPrompt() {
useAdvanceOnboardingOnFormSubmit(thisOnboardingStatus, 'desktop')
return (
<div className="fixed inset-0 z-[99] grid items-center justify-center">
<div className="cursor-not-allowed fixed inset-0 z-[99] grid items-center justify-center">
<OnboardingCard className="pointer-events-auto">
<h1 className="text-xl font-bold">Modify with Text-to-CAD prompt</h1>
{!isReady && (
@ -510,7 +510,7 @@ function PromptToEditResult() {
}, [])
return (
<div className="fixed inset-0 z-[99] p-8 grid justify-center items-end">
<div className="cursor-not-allowed fixed inset-0 z-[99] p-8 grid justify-center items-end">
<OnboardingCard className="col-start-3 col-span-2">
<h1 className="text-xl font-bold">Result</h1>
<p className="my-4">
@ -548,7 +548,7 @@ function Imports() {
useOnboardingPanes()
return (
<div className="fixed inset-0 z-50 p-16 flex flex-col gap-8 items-center">
<div className="cursor-not-allowed fixed inset-0 z-50 p-16 flex flex-col gap-8 items-center">
<OnboardingCard>
<h1 className="text-xl font-bold">Add file(s) to project</h1>
<p className="my-4">
@ -579,7 +579,7 @@ function Exports() {
useOnboardingPanes()
return (
<div className="fixed inset-0 z-50 p-16 grid justify-start items-center">
<div className="cursor-not-allowed fixed inset-0 z-50 p-16 grid justify-start items-center">
<OnboardingCard>
<h1 className="text-xl font-bold">Exporting</h1>
<p className="my-4">
@ -607,7 +607,7 @@ function OnboardingConclusion() {
)
return (
<div className="fixed inset-0 z-50 p-16 grid justify-center items-center">
<div className="cursor-not-allowed fixed inset-0 z-50 p-16 grid justify-center items-center">
<OnboardingCard>
<h1 className="text-xl font-bold">Time to start building</h1>
<p className="my-4">

2
src/routes/Onboarding/utils.tsx
View File

@ -54,7 +54,7 @@ export const OnboardingCard = ({
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={`relative max-w-3xl min-w-80 bg-chalkboard-10 dark:bg-chalkboard-90 py-6 px-8 rounded border border-chalkboard-50 dark:border-chalkboard-80 shadow-lg ${className || ''}`}
className={`relative max-w-3xl min-w-80 cursor-auto bg-chalkboard-10 dark:bg-chalkboard-90 py-6 px-8 rounded border border-chalkboard-50 dark:border-chalkboard-80 shadow-lg ${className || ''}`}
{...props}
>
{children}