From 043333d3bcae2c63f839e4978b9362ccb12d1d34 Mon Sep 17 00:00:00 2001
From: Frank Noirot <frank@kittycad.io>
Date: Thu, 31 Aug 2023 16:08:15 -0400
Subject: [PATCH] Franknoirot/fix onboarding units feedback followup (#367)

---
 src/App.tsx                      |  3 ++-
 src/machines/settingsMachine.ts  | 11 ++++++++---
 src/routes/Onboarding/Camera.tsx |  4 ++--
 src/routes/Onboarding/Units.tsx  |  8 +++++---
 src/routes/Settings.tsx          |  7 +++++--
 5 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index d69a59925..7d9cdc29f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -49,6 +49,7 @@ import { PROJECT_ENTRYPOINT } from './lib/tauriFS'
 import { IndexLoaderData } from './Router'
 import { toast } from 'react-hot-toast'
 import { useGlobalStateContext } from 'hooks/useGlobalStateContext'
+import { onboardingPaths } from 'routes/Onboarding'
 
 export function App() {
   const { code: loadedCode, project } = useLoaderData() as IndexLoaderData
@@ -154,7 +155,7 @@ export function App() {
   useHotkeys('shift + d', () => togglePane('debug'))
 
   const paneOpacity =
-    onboardingStatus === '/camera'
+    onboardingStatus === onboardingPaths.CAMERA
       ? 'opacity-20'
       : didDragInStream
       ? 'opacity-40'
diff --git a/src/machines/settingsMachine.ts b/src/machines/settingsMachine.ts
index 66d1d882d..eec65984a 100644
--- a/src/machines/settingsMachine.ts
+++ b/src/machines/settingsMachine.ts
@@ -3,6 +3,11 @@ import { BaseUnit, baseUnitsUnion } from '../useStore'
 import { CommandBarMeta } from '../lib/commands'
 import { Themes, getSystemTheme, setThemeClass } from '../lib/theme'
 
+export enum UnitSystem {
+  Imperial = 'imperial',
+  Metric = 'metric',
+}
+
 export const SETTINGS_PERSIST_KEY = 'SETTINGS_PERSIST_KEY'
 
 export const settingsCommandBarMeta: CommandBarMeta = {
@@ -42,7 +47,7 @@ export const settingsCommandBarMeta: CommandBarMeta = {
         name: 'unitSystem',
         type: 'select',
         defaultValue: 'unitSystem',
-        options: [{ name: 'imperial' }, { name: 'metric' }],
+        options: [{ name: UnitSystem.Imperial }, { name: UnitSystem.Metric }],
       },
     ],
   },
@@ -70,7 +75,7 @@ export const settingsMachine = createMachine(
     context: {
       theme: Themes.System,
       defaultProjectName: '',
-      unitSystem: 'imperial' as 'imperial' | 'metric',
+      unitSystem: UnitSystem.Imperial,
       baseUnit: 'in' as BaseUnit,
       defaultDirectory: '',
       showDebugPanel: false,
@@ -174,7 +179,7 @@ export const settingsMachine = createMachine(
         | { type: 'Set Default Directory'; data: { defaultDirectory: string } }
         | {
             type: 'Set Unit System'
-            data: { unitSystem: 'imperial' | 'metric' }
+            data: { unitSystem: UnitSystem }
           }
         | { type: 'Set Base Unit'; data: { baseUnit: BaseUnit } }
         | { type: 'Set Onboarding Status'; data: { onboardingStatus: string } }
diff --git a/src/routes/Onboarding/Camera.tsx b/src/routes/Onboarding/Camera.tsx
index 63686998a..f2d5fa993 100644
--- a/src/routes/Onboarding/Camera.tsx
+++ b/src/routes/Onboarding/Camera.tsx
@@ -37,8 +37,8 @@ export default function Units() {
           What you're seeing here is just a video, and your interactions are
           being sent to our Geometry Engine API, which sends back video frames
           in real time. How cool is that? It means that you can use KittyCAD
-          Modeling App (or whatever you want to build) on any device, even if it
-          doesn't have a GPU!
+          Modeling App (or whatever you want to build) on any device, even a
+          cheap laptop with no graphics card!
         </p>
         <div className="flex justify-between mt-6">
           <ActionButton
diff --git a/src/routes/Onboarding/Units.tsx b/src/routes/Onboarding/Units.tsx
index a2758a2e1..cdeced5ce 100644
--- a/src/routes/Onboarding/Units.tsx
+++ b/src/routes/Onboarding/Units.tsx
@@ -3,9 +3,9 @@ import { BaseUnit, baseUnits } from '../../useStore'
 import { ActionButton } from '../../components/ActionButton'
 import { SettingsSection } from '../Settings'
 import { Toggle } from '../../components/Toggle/Toggle'
-import { useState } from 'react'
 import { onboardingPaths, useDismiss, useNextClick } from '.'
 import { useGlobalStateContext } from 'hooks/useGlobalStateContext'
+import { UnitSystem } from 'machines/settingsMachine'
 
 export default function Units() {
   const dismiss = useDismiss()
@@ -29,9 +29,11 @@ export default function Units() {
             offLabel="Imperial"
             onLabel="Metric"
             name="settings-units"
-            checked={unitSystem === 'metric'}
+            checked={unitSystem === UnitSystem.Metric}
             onChange={(e) => {
-              const newUnitSystem = e.target.checked ? 'metric' : 'imperial'
+              const newUnitSystem = e.target.checked
+                ? UnitSystem.Metric
+                : UnitSystem.Imperial
               send({
                 type: 'Set Unit System',
                 data: { unitSystem: newUnitSystem },
diff --git a/src/routes/Settings.tsx b/src/routes/Settings.tsx
index 2b2eb9c40..133473b60 100644
--- a/src/routes/Settings.tsx
+++ b/src/routes/Settings.tsx
@@ -13,6 +13,7 @@ import { useHotkeys } from 'react-hotkeys-hook'
 import { IndexLoaderData, paths } from '../Router'
 import { Themes } from '../lib/theme'
 import { useGlobalStateContext } from 'hooks/useGlobalStateContext'
+import { UnitSystem } from 'machines/settingsMachine'
 
 export const Settings = () => {
   const loaderData = useRouteLoaderData(paths.FILE) as IndexLoaderData
@@ -136,9 +137,11 @@ export const Settings = () => {
             offLabel="Imperial"
             onLabel="Metric"
             name="settings-units"
-            checked={unitSystem === 'metric'}
+            checked={unitSystem === UnitSystem.Metric}
             onChange={(e) => {
-              const newUnitSystem = e.target.checked ? 'metric' : 'imperial'
+              const newUnitSystem = e.target.checked
+                ? UnitSystem.Metric
+                : UnitSystem.Imperial
               send({
                 type: 'Set Unit System',
                 data: { unitSystem: newUnitSystem },