Update onboarding to be more complete (#551)

* Update Introduction * Update Camera step * Change link to expectations Co-authored-by: Josh Gomez <114548659+jgomez720@users.noreply.github.com> * Set outline for onboarding * Add Streaming step * Remove Units step * Add default kcl script * Add Code Editor step * Add Parametric Modeling step * Add Interactive Numbers step * Update bracket to use sqrt * Add Command K step * Assuage @jessfraz's code itchies * Add User Menu step * Add Project Menu step * Add Export step * Improve error page to actually show error * Update the sketch step * Add Future Work section * Bring back the bracket code on the final step * Set up the code to the bracket when starting onboarding * Fix missing import * Don't throw away users code if not empty * Prompt the user if they have content in their file --------- Co-authored-by: Josh Gomez <114548659+jgomez720@users.noreply.github.com>
2023-09-15 22:37:40 -04:00
parent cf686bdeb0
commit c5d8779af4
21 changed files with 1097 additions and 61 deletions
--- a/src/routes/Onboarding/UserMenu.tsx
+++ b/src/routes/Onboarding/UserMenu.tsx
@ -0,0 +1,53 @@
+import { faArrowRight, faXmark } from '@fortawesome/free-solid-svg-icons'
+import { ActionButton } from '../../components/ActionButton'
+import { onboardingPaths, useDismiss, useNextClick } from '.'
+import { useStore } from '../../useStore'
+
+export default function UserMenu() {
+  const { buttonDownInStream } = useStore((s) => ({
+    buttonDownInStream: s.buttonDownInStream,
+  }))
+  const dismiss = useDismiss()
+  const next = useNextClick(onboardingPaths.PROJECT_MENU)
+
+  return (
+    <div className="fixed grid justify-center items-start inset-0 z-50 pointer-events-none">
+      <div
+        className={
+          'max-w-xl flex flex-col justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded' +
+          (buttonDownInStream ? '' : ' pointer-events-auto')
+        }
+      >
+        <section className="flex-1">
+          <h2 className="text-2xl">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 report a bug.
+          </p>
+        </section>
+        <div className="flex justify-between">
+          <ActionButton
+            Element="button"
+            onClick={() => dismiss('../../')}
+            icon={{
+              icon: faXmark,
+              bgClassName: 'bg-destroy-80',
+              iconClassName:
+                'text-destroy-20 group-hover:text-destroy-10 hover:text-destroy-10',
+            }}
+            className="hover:border-destroy-40"
+          >
+            Dismiss
+          </ActionButton>
+          <ActionButton
+            Element="button"
+            onClick={next}
+            icon={{ icon: faArrowRight }}
+          >
+            Next: Project Menu
+          </ActionButton>
+        </div>
+      </div>
+    </div>
+  )
+}