Update onboarding based on team feedback (#1665)

* Make onboarding links underlined and a different color * Override underlined links that shouldn't be * Update "KittyCAD" to "Zoo" camera controls, copy edits * Copy edits through CodeEditor step, add counter to onboarding * Notes through ParametricModeling step * Notes through UserMenu step * Add three-dots icon, separate Zoo logo link from project button * Feedback through end of onboarding * A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu) * Fix ESLint warnings * Revert cameraControls to 'KittyCAD', ensure we get type errors if that isn't correct in the future * fmt * Missed a reverted "Zoo" cameraControls item --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
2024-03-08 17:59:14 -05:00
parent fbc458b6e6
commit cad64fb780
34 changed files with 328 additions and 136 deletions
--- a/src/components/CodeMenu.module.css
+++ b/src/components/CodeMenu.module.css
@ -1,6 +1,6 @@
 .button {
  @apply flex justify-between items-center gap-2 px-2 py-1 text-left border-none rounded-sm;
-  @apply font-mono text-xs font-bold select-none text-chalkboard-90;
+  @apply font-mono !no-underline text-xs font-bold select-none text-chalkboard-90;
  @apply ui-active:bg-energy-10/50 ui-active:text-inherit;
  @apply transition-colors ease-out;
 }
--- a/src/components/CodeMenu.tsx
+++ b/src/components/CodeMenu.tsx
@ -1,9 +1,6 @@
 import { Menu } from '@headlessui/react'
 import { PropsWithChildren } from 'react'
-import {
-  faArrowUpRightFromSquare,
-  faEllipsis,
-} from '@fortawesome/free-solid-svg-icons'
+import { faArrowUpRightFromSquare } from '@fortawesome/free-solid-svg-icons'
 import { ActionIcon } from './ActionIcon'
 import styles from './CodeMenu.module.css'
 import { useConvertToVariable } from 'hooks/useToolbarGuards'
@ -29,7 +26,7 @@ export const CodeMenu = ({ children }: PropsWithChildren) => {
      >
        <Menu.Button className="p-0 border-none relative">
          <ActionIcon
-            icon={faEllipsis}
+            icon="three-dots"
            className="p-1"
            size="sm"
            bgClassName={
--- a/src/components/CustomIcon.tsx
+++ b/src/components/CustomIcon.tsx
@ -29,6 +29,7 @@ export type CustomIconName =
  | 'search'
  | 'settings'
  | 'sketch'
+  | 'three-dots'
  | 'vertical'

 export const CustomIcon = ({
@ -516,6 +517,22 @@ export const CustomIcon = ({
          />
        </svg>
      )
+    case 'three-dots':
+      return (
+        <svg
+          {...props}
+          viewBox="0 0 20 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M6.5 10C6.5 10.8284 5.82843 11.5 5 11.5C4.17157 11.5 3.5 10.8284 3.5 10C3.5 9.17157 4.17157 8.5 5 8.5C5.82843 8.5 6.5 9.17157 6.5 10ZM11.5 10C11.5 10.8284 10.8284 11.5 10 11.5C9.17157 11.5 8.5 10.8284 8.5 10C8.5 9.17157 9.17157 8.5 10 8.5C10.8284 8.5 11.5 9.17157 11.5 10ZM15 11.5C15.8284 11.5 16.5 10.8284 16.5 10C16.5 9.17157 15.8284 8.5 15 8.5C14.1716 8.5 13.5 9.17157 13.5 10C13.5 10.8284 14.1716 11.5 15 11.5Z"
+            fill="currentColor"
+          />
+        </svg>
+      )
    case 'vertical':
      return (
        <svg
--- a/src/components/ProjectCard.tsx
+++ b/src/components/ProjectCard.tsx
@ -106,7 +106,7 @@ function ProjectCard({
        <>
          <div className="p-1 flex flex-col h-full gap-2">
            <Link
-              className="flex-1 text-liquid-100 after:content-[''] after:absolute after:inset-0"
+              className="flex-1 !no-underline text-liquid-100 after:content-[''] after:absolute after:inset-0"
              to={`${paths.FILE}/${encodeURIComponent(project.path)}`}
              data-testid="project-link"
            >
--- a/src/components/ProjectSidebarMenu.tsx
+++ b/src/components/ProjectSidebarMenu.tsx
@ -11,6 +11,7 @@ import { sep } from '@tauri-apps/api/path'
 import { Logo } from './Logo'
 import { APP_NAME } from 'lib/constants'
 import { useCommandsContext } from 'hooks/useCommandsContext'
+import { CustomIcon } from './CustomIcon'

 const ProjectSidebarMenu = ({
  project,
@ -21,29 +22,49 @@ const ProjectSidebarMenu = ({
  project?: IndexLoaderData['project']
  file?: IndexLoaderData['file']
 }) => {
+  return (
+    <div className="rounded-sm !no-underline h-9 mr-auto max-h-min min-w-max border-0 py-1 px-2 flex items-center gap-2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-energy-50 dark:hover:bg-chalkboard-90">
+      <Link to={paths.HOME} className="group">
+        <Logo className="w-auto h-5 text-chalkboard-120 dark:text-chalkboard-10 group-hover:text-energy-10" />
+      </Link>
+      {renderAsLink ? (
+        <>
+          <Link
+            to={paths.HOME}
+            className="!no-underline"
+            data-testid="project-sidebar-link"
+          >
+            <span
+              className="hidden text-sm text-chalkboard-110 dark:text-chalkboard-20 whitespace-nowrap lg:block"
+              data-testid="project-sidebar-link-name"
+            >
+              {project?.name ? project.name : APP_NAME}
+            </span>
+          </Link>
+        </>
+      ) : (
+        <ProjectMenuPopover project={project} file={file} />
+      )}
+    </div>
+  )
+}
+
+function ProjectMenuPopover({
+  project,
+  file,
+}: {
+  project?: IndexLoaderData['project']
+  file?: IndexLoaderData['file']
+}) {
  const { commandBarSend } = useCommandsContext()

-  return renderAsLink ? (
-    <Link
-      to={paths.HOME}
-      className="rounded-sm h-9 mr-auto max-h-min min-w-max border-0 py-1 px-2 flex items-center gap-3 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-energy-50 dark:hover:bg-chalkboard-90"
-      data-testid="project-sidebar-link"
-    >
-      <Logo />
-      <span
-        className="hidden text-sm text-chalkboard-110 dark:text-chalkboard-20 whitespace-nowrap lg:block"
-        data-testid="project-sidebar-link-name"
-      >
-        {project?.name ? project.name : APP_NAME}
-      </span>
-    </Link>
-  ) : (
+  return (
    <Popover className="relative">
      <Popover.Button
-        className="rounded-sm h-9 mr-auto max-h-min min-w-max border-0 py-1 px-2 flex items-center gap-3 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-energy-50 dark:hover:bg-chalkboard-90"
+        className="rounded-sm h-9 mr-auto max-h-min min-w-max border-0 py-1 pl-0 pr-2 flex items-center focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-energy-50 dark:hover:bg-chalkboard-90"
        data-testid="project-sidebar-toggle"
      >
-        <Logo />
+        <CustomIcon name="three-dots" className="w-5 h-5 rotate-90" />
        <div className="flex flex-col items-start py-0.5">
          <span className="hidden text-sm text-chalkboard-110 dark:text-chalkboard-20 whitespace-nowrap lg:block">
            {isTauri() && file?.name
@ -85,7 +106,6 @@ const ProjectSidebarMenu = ({
          {({ close }) => (
            <>
              <div className="flex items-center gap-4 px-4 py-3">
-                <Logo />
                <div>
                  <p
                    className="m-0 text-chalkboard-100 dark:text-energy-10 text-mono"