Franknoirot/ux papercuts 1 (#596)

* Properly show dark logo in System-light theme

* Fix linting errors for fill-rule and clip-rule

* Support system-light theme on Parametric Modeling step as well

Signed-off-by: Frank Noirot <frank@kittycad.io>

* Fix line number ref in Parametric Modeling copy

Signed-off-by: Frank Noirot <frank@kittycad.io>

* Copyediting tweaks

* Fix part name disappearing even when there is space

---------

Signed-off-by: Frank Noirot <frank@kittycad.io>

src/components/CustomIcon.tsx

@@ -54,8 +54,8 @@ export const CustomIcon = ({
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            fill-rule="evenodd"
+            fillRule="evenodd"
-            clip-rule="evenodd"
+            clipRule="evenodd"
             d="M10 3L10.3536 3.35355L12.3536 5.35355L11.6465 6.06066L10.5 4.91421V11.5854C11.0826 11.7913 11.5 12.3469 11.5 13C11.5 13.8284 10.8284 14.5 10 14.5C9.17157 14.5 8.5 13.8284 8.5 13C8.5 12.3469 8.91741 11.7913 9.5 11.5854V4.91421L8.35356 6.06066L7.64645 5.35355L9.64645 3.35355L10 3ZM1.95887 12.3282L8 8.63644V9.80838L2.91773 12.9142L10 17.2423L17.0823 12.9142L12 9.80838V8.63644L18.0411 12.3282L19 12.9142L19 14.9683H18V13.5253L10.5 18.1087V19.9683H9.5V18.1087L2 13.5253V14.9683H1L1 12.9142L1.95887 12.3282Z"
             fill="currentColor"
           />
@@ -70,8 +70,8 @@ export const CustomIcon = ({
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            fill-rule="evenodd"
+            fillRule="evenodd"
-            clip-rule="evenodd"
+            clipRule="evenodd"
             d="M4 9.5H16V11.5H4V9.5Z"
             fill="currentColor"
           />
@@ -86,8 +86,8 @@ export const CustomIcon = ({
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            fill-rule="evenodd"
+            fillRule="evenodd"
-            clip-rule="evenodd"
+            clipRule="evenodd"
             d="M15.5 6C16.3284 6 17 5.32843 17 4.5C17 3.67157 16.3284 3 15.5 3C14.6716 3 14 3.67157 14 4.5C14 4.73107 14.0522 4.94993 14.1456 5.14543L5.14543 14.1456C4.94993 14.0522 4.73107 14 4.5 14C3.67157 14 3 14.6716 3 15.5C3 16.3284 3.67157 17 4.5 17C5.32843 17 6 16.3284 6 15.5C6 15.2679 5.94729 15.0482 5.8532 14.852L14.852 5.8532C15.0482 5.94729 15.2679 6 15.5 6Z"
             fill="currentColor"
           />
@@ -102,8 +102,8 @@ export const CustomIcon = ({
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            fill-rule="evenodd"
+            fillRule="evenodd"
-            clip-rule="evenodd"
+            clipRule="evenodd"
             d="M10 2.29289L10.3536 2.64645L12.3536 4.64645L11.6465 5.35355L10.5 4.20711V8V9.50001H12L15.7929 9.50001L14.6465 8.35356L15.3536 7.64645L17.3536 9.64645L17.7071 10L17.3536 10.3536L15.3536 12.3536L14.6465 11.6465L15.7929 10.5H12H10.5V12V15.7929L11.6465 14.6464L12.3536 15.3536L10.3536 17.3536L10 17.7071L9.64645 17.3536L7.64645 15.3536L8.35356 14.6464L9.50001 15.7929V12V10.5H8.00001H4.20712L5.35357 11.6465L4.64646 12.3536L2.64646 10.3536L2.29291 10L2.64646 9.64645L4.64646 7.64645L5.35357 8.35356L4.20712 9.50001H8.00001H9.50001V8V4.20711L8.35356 5.35355L7.64645 4.64645L9.64645 2.64645L10 2.29289Z"
             fill="currentColor"
           />
@@ -118,8 +118,8 @@ export const CustomIcon = ({
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            fill-rule="evenodd"
+            fillRule="evenodd"
-            clip-rule="evenodd"
+            clipRule="evenodd"
             d="M8 16V4H6V16H8ZM14 16V4H12V16H14Z"
             fill="currentColor"
           />
@@ -134,8 +134,8 @@ export const CustomIcon = ({
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            fill-rule="evenodd"
+            fillRule="evenodd"
-            clip-rule="evenodd"
+            clipRule="evenodd"
             d="M14.8037 13.4035L15.5509 14.1635L16.3682 16.8386L13.5521 16.1346L12.8186 15.3885L14.8037 13.4035ZM14.1025 12.6903L12.1175 14.6754L3.48609 5.89624C2.94588 5.34678 2.94963 4.46456 3.49448 3.91971C4.04591 3.36828 4.94112 3.37208 5.48786 3.92817L14.1025 12.6903ZM6.20094 3.22709L16.4357 13.6371L17.5003 17.1216L17.8412 18.2376L16.7091 17.9546L13.0364 17.0364L2.77301 6.59732C1.84793 5.6564 1.85434 4.14564 2.78737 3.2126C3.73167 2.2683 5.26468 2.27481 6.20094 3.22709Z"
             fill="currentColor"
           />
@@ -150,8 +150,8 @@ export const CustomIcon = ({
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            fill-rule="evenodd"
+            fillRule="evenodd"
-            clip-rule="evenodd"
+            clipRule="evenodd"
             d="M11 4V16H9V4H11Z"
             fill="currentColor"
           />

src/components/ProjectSidebarMenu.tsx

@@ -17,7 +17,7 @@ const ProjectSidebarMenu = ({
   return renderAsLink ? (
     <Link
       to={'../'}
-      className="flex items-center gap-4 my-2"
+      className="h-9 max-h-min min-w-max border-0 p-0.5 pr-2 flex items-center gap-4 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-energy-50"
       data-testid="project-sidebar-link"
     >
       <img
@@ -26,7 +26,7 @@ const ProjectSidebarMenu = ({
         className="h-9 w-auto"
       />
       <span
-        className="text-sm text-chalkboard-110 dark:text-chalkboard-20 min-w-max truncate"
+        className="text-sm text-chalkboard-110 dark:text-chalkboard-20 whitespace-nowrap hidden lg:block"
         data-testid="project-sidebar-link-name"
       >
         {project?.name ? project.name : 'KittyCAD Modeling App'}
@@ -43,7 +43,7 @@ const ProjectSidebarMenu = ({
           alt="KittyCAD App"
           className="h-full w-auto"
         />
-        <span className="text-sm text-chalkboard-110 dark:text-chalkboard-20 whitespace-nowrap hidden 2xl:block">
+        <span className="text-sm text-chalkboard-110 dark:text-chalkboard-20 whitespace-nowrap hidden lg:block">
           {isTauri() && project?.name ? project.name : 'KittyCAD Modeling App'}
         </span>
       </Popover.Button>

src/routes/Onboarding/Camera.tsx

@@ -35,7 +35,7 @@ export default function Units() {
       >
         <SettingsSection
           title="Camera Controls"
-          description="How you want to control the camera in the 3D view. Try them out in the 3D view."
+          description="How you want to control the camera in the 3D view. Try them out above and choose the one that feels most comfortable to you."
         >
           <select
             id="camera-controls"

src/routes/Onboarding/CmdK.tsx

@@ -21,7 +21,7 @@ export default function CmdK() {
         <h2 className="text-2xl">Command Bar</h2>
         <p className="my-4">
           Press <kbd>Cmd/Win</kbd> + <kbd>K</kbd> to open the command bar. Try
-          changing your camera controls with it.
+          changing your theme with it.
         </p>
         <p className="my-4">
           We are working on a command bar that will allow you to quickly see and

src/routes/Onboarding/InteractiveNumbers.tsx

@@ -30,9 +30,9 @@ export default function InteractiveNumbers() {
           </p>
           <p className="my-4">
             Try changing the value of <code>width</code> on line 3 by holding
-            the <kbd>Alt</kbd> key and dragging the number left and right. You
+            the <kbd>Alt</kbd> (or <kbd>Option</kbd>) key and dragging the
-            can hold down different modifier keys to change the value by
+            number left and right. You can hold down different modifier keys to
-            different increments:
+            change the value by different increments:
             <table className="border-collapse text-sm mx-auto my-4">
               <tbody>
                 <tr>

src/routes/Onboarding/Introduction.tsx

@@ -2,7 +2,7 @@ import { faArrowRight, faXmark } from '@fortawesome/free-solid-svg-icons'
 import { ActionButton } from '../../components/ActionButton'
 import { onboardingPaths, useDismiss, useNextClick } from '.'
 import { useGlobalStateContext } from 'hooks/useGlobalStateContext'
-import { Themes } from 'lib/theme'
+import { Themes, getSystemTheme } from 'lib/theme'
 import { bracket } from 'lib/exampleKcl'
 import { useStore } from 'useStore'
 import {
@@ -128,6 +128,11 @@ export default function Introduction() {
       },
     },
   } = useGlobalStateContext()
+  const getLogoTheme = () =>
+    theme === Themes.Light ||
+    (theme === Themes.System && getSystemTheme() === Themes.Light)
+      ? '-dark'
+      : ''
   const dismiss = useDismiss()
   const next = useNextClick(onboardingPaths.CAMERA)
 
@@ -140,7 +145,7 @@ export default function Introduction() {
       <div className="max-w-3xl bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded">
         <h1 className="text-2xl font-bold flex gap-4 flex-wrap items-center">
           <img
-            src={`/kcma-logomark${theme === Themes.Light ? '-dark' : ''}.svg`}
+            src={`/kcma-logomark${getLogoTheme()}.svg`}
             alt="KittyCAD Modeling App"
             className="max-w-full h-20"
           />

src/routes/Onboarding/ParametricModeling.tsx

@@ -3,7 +3,7 @@ import { ActionButton } from '../../components/ActionButton'
 import { onboardingPaths, useDismiss, useNextClick } from '.'
 import { useStore } from '../../useStore'
 import { useBackdropHighlight } from 'hooks/useBackdropHighlight'
-import { Themes } from 'lib/theme'
+import { Themes, getSystemTheme } from 'lib/theme'
 import { useGlobalStateContext } from 'hooks/useGlobalStateContext'
 
 export default function ParametricModeling() {
@@ -15,6 +15,11 @@ export default function ParametricModeling() {
       context: { theme },
     },
   } = useGlobalStateContext()
+  const getImageTheme = () =>
+    theme === Themes.Light ||
+    (theme === Themes.System && getSystemTheme() === Themes.Light)
+      ? '-dark'
+      : ''
   const dismiss = useDismiss()
   const next = useNextClick(onboardingPaths.INTERACTIVE_NUMBERS)
 
@@ -40,9 +45,7 @@ export default function ParametricModeling() {
           </p>
           <figure className="my-4 w-3/4 mx-auto">
             <img
-              src={`/onboarding-bracket${
+              src={`/onboarding-bracket${getImageTheme()}.png`}
-                theme === Themes.Light ? '-dark' : ''
-              }.png`}
               alt="Bracket"
             />
             <figcaption className="text-small italic text-center">
@@ -51,7 +54,7 @@ export default function ParametricModeling() {
           </figure>
           <p className="my-4">
             We are able to easily calculate the thickness of the material based
-            on the width of the bracket to meet a set safety factor on line 13.
+            on the width of the bracket to meet a set safety factor on line 6.
           </p>
         </section>
         <div className="flex justify-between">

src/routes/Onboarding/UserMenu.tsx

@@ -22,7 +22,7 @@ export default function UserMenu() {
           <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.
+            change your settings, sign out, or request a feature.
           </p>
         </section>
         <div className="flex justify-between">