Polish: UI theme colors, onboarding dismiss, Export button in sidebar (#270)

* Light mode style fixes * Fix dismissing onboarding for nested routes * Refactor: move export button to user side panel * Refactor: add project data to modeling page loader * Add new ProjectSidebarMenu * Convert AppHeader to use ProjectSidebarMenu * Move ExportButton to ProjectSidebarMenu * Fix: hide default dir setting in Web * Add DownloadAppBanner when in Prod * Add unit tests to ProjectSidebarMenu * Tiny CSS rounding tweak to sidebars * Fix formatting in unit tests * Update icons and logos to use full-color Kitt * Fix: dim UI on camera drag, not click
2023-08-18 10:27:01 -04:00
parent ff08c30ddc
commit aa24b9d6bd
40 changed files with 496 additions and 221 deletions
--- a/src/components/ProjectSidebarMenu.tsx
+++ b/src/components/ProjectSidebarMenu.tsx
@ -0,0 +1,101 @@
+import { Popover } from '@headlessui/react'
+import { ActionButton } from './ActionButton'
+import { faHome } from '@fortawesome/free-solid-svg-icons'
+import { ProjectWithEntryPointMetadata, paths } from '../Router'
+import { isTauri } from '../lib/isTauri'
+import { Link } from 'react-router-dom'
+import { ExportButton } from './ExportButton'
+
+const ProjectSidebarMenu = ({
+  project,
+  renderAsLink = false,
+}: {
+  renderAsLink?: boolean
+  project?: Partial<ProjectWithEntryPointMetadata>
+}) => {
+  return renderAsLink ? (
+    <Link
+      to={'../'}
+      className="flex items-center gap-4 my-2"
+      data-testid="project-sidebar-link"
+    >
+      <img
+        src="/kitt-8bit-winking.svg"
+        alt="KittyCAD App"
+        className="h-9 w-auto"
+      />
+      <span
+        className="text-sm text-chalkboard-110 dark:text-chalkboard-20 min-w-max"
+        data-testid="project-sidebar-link-name"
+      >
+        {project?.name ? project.name : 'KittyCAD Modeling App'}
+      </span>
+    </Link>
+  ) : (
+    <Popover className="relative">
+      <Popover.Button
+        className="border-0 px-1 pr-2 pl-0 flex items-center gap-4 focus:outline-none focus:ring-2 focus:ring-energy-50"
+        data-testid="project-sidebar-toggle"
+      >
+        <img
+          src="/kitt-8bit-winking.svg"
+          alt="KittyCAD App"
+          className="h-9 w-auto"
+        />
+        <span className="text-sm text-chalkboard-110 dark:text-chalkboard-20 min-w-max">
+          {isTauri() && project?.name ? project.name : 'KittyCAD Modeling App'}
+        </span>
+      </Popover.Button>
+      <Popover.Overlay className="fixed z-20 inset-0 bg-chalkboard-110/50" />
+
+      <Popover.Panel className="fixed inset-0 right-auto z-30 w-64 bg-chalkboard-10 dark:bg-chalkboard-100 border border-energy-100 shadow-md rounded-r-lg overflow-hidden">
+        <div className="flex items-center gap-4 px-4 py-3 bg-energy-100">
+          <img
+            src="/kitt-8bit-winking.svg"
+            alt="KittyCAD App"
+            className="h-9 w-auto"
+          />
+
+          <div>
+            <p
+              className="m-0 text-energy-10 text-mono"
+              data-testid="projectName"
+            >
+              {project?.name ? project.name : 'KittyCAD Modeling App'}
+            </p>
+            {project?.entrypoint_metadata && (
+              <p className="m-0 text-energy-40 text-xs" data-testid="createdAt">
+                Created{' '}
+                {project?.entrypoint_metadata.createdAt.toLocaleDateString()}
+              </p>
+            )}
+          </div>
+        </div>
+        <div className="p-4 flex flex-col gap-2">
+          <ExportButton
+            className={{
+              button:
+                'border-transparent dark:border-transparent dark:hover:border-energy-60',
+            }}
+          >
+            Export Model
+          </ExportButton>
+          {isTauri() && (
+            <ActionButton
+              Element="link"
+              to={paths.HOME}
+              icon={{
+                icon: faHome,
+              }}
+              className="border-transparent dark:border-transparent dark:hover:border-energy-60"
+            >
+              Go to Home
+            </ActionButton>
+          )}
+        </div>
+      </Popover.Panel>
+    </Popover>
+  )
+}
+
+export default ProjectSidebarMenu