Franknoirot/fix onboarding units feedback followup (#367)

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'

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

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

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

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