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

* 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`

src/routes/Onboarding/BrowserOnboardingRoutes.tsx

@@ -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">

src/routes/Onboarding/DesktopOnboardingRoutes.tsx

@@ -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">

src/routes/Onboarding/utils.tsx

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