Franknoirot/pretty buttons (#550)

src/components/Toolbar/EqualAngle.tsx

@@ -12,6 +12,8 @@ import {
   getTransformInfos,
 } from '../../lang/std/sketchcombos'
 import { updateCursors } from '../../lang/util'
+import { ActionIcon } from 'components/ActionIcon'
+import { sketchButtonClassnames } from 'Toolbar'
 
 export const EqualAngle = () => {
   const { guiMode, selectionRanges, ast, programMemory, updateAst, setCursor } =
@@ -87,9 +89,17 @@ export const EqualAngle = () => {
         })
       }}
       disabled={!enableEqual}
-      title="yo dawg"
+      title="Parallel (or equal angle)"
+      className="group"
     >
-      parallel
+      <ActionIcon
+        icon="parallel"
+        className="!p-0.5"
+        bgClassName={sketchButtonClassnames.background}
+        iconClassName={sketchButtonClassnames.icon}
+        size="md"
+      />
+      Parallel
     </button>
   )
 }

src/components/Toolbar/EqualLength.tsx

@@ -12,6 +12,8 @@ import {
   getTransformInfos,
 } from '../../lang/std/sketchcombos'
 import { updateCursors } from '../../lang/util'
+import { ActionIcon } from 'components/ActionIcon'
+import { sketchButtonClassnames } from 'Toolbar'
 
 export const EqualLength = () => {
   const { guiMode, selectionRanges, ast, programMemory, updateAst, setCursor } =
@@ -87,9 +89,17 @@ export const EqualLength = () => {
         })
       }}
       disabled={!enableEqual}
-      title="yo dawg"
+      className="group"
+      title="Equal Length"
     >
-      EqualLength
+      <ActionIcon
+        icon="equal"
+        className="!p-0.5"
+        bgClassName={sketchButtonClassnames.background}
+        iconClassName={sketchButtonClassnames.icon}
+        size="md"
+      />
+      Equal Length
     </button>
   )
 }

src/components/Toolbar/HorzVert.tsx

@@ -11,6 +11,8 @@ import {
   transformAstSketchLines,
 } from '../../lang/std/sketchcombos'
 import { updateCursors } from '../../lang/util'
+import { ActionIcon } from 'components/ActionIcon'
+import { sketchButtonClassnames } from 'Toolbar'
 
 export const HorzVert = ({
   horOrVert,
@@ -66,9 +68,17 @@ export const HorzVert = ({
         })
       }}
       disabled={!enableHorz}
-      title="yo dawg"
+      className="group"
+      title={horOrVert === 'horizontal' ? 'Horizontal' : 'Vertical'}
     >
-      {horOrVert === 'horizontal' ? 'Horz' : 'Vert'}
+      <ActionIcon
+        icon={horOrVert === 'horizontal' ? 'horizontal' : 'vertical'}
+        className="!p-0.5"
+        bgClassName={sketchButtonClassnames.background}
+        iconClassName={sketchButtonClassnames.icon}
+        size="md"
+      />
+      {horOrVert === 'horizontal' ? 'Horizontal' : 'Vertical'}
     </button>
   )
 }

src/components/Toolbar/Intersect.tsx

@@ -188,8 +188,9 @@ export const Intersect = () => {
         }
       }}
       disabled={!enable}
+      title="Set Perpendicular Distance"
     >
-      perpendicularDistance
+      Set Perpendicular Distance
     </button>
   )
 }

src/components/Toolbar/RemoveConstrainingValues.tsx

@@ -70,9 +70,9 @@ export const RemoveConstrainingValues = () => {
         })
       }}
       disabled={!enableHorz}
-      title="yo dawg"
+      title="Remove Constraining Values"
     >
-      RemoveConstrainingValues
+      Remove Constraining Values
     </button>
   )
 }

src/components/Toolbar/SetAbsDistance.tsx

@@ -22,11 +22,16 @@ import { updateCursors } from '../../lang/util'
 
 const getModalInfo = create(SetAngleLengthModal as any)
 
-export const SetAbsDistance = ({
-  buttonType,
-}: {
-  buttonType: 'xAbs' | 'yAbs' | 'snapToYAxis' | 'snapToXAxis'
-}) => {
+type ButtonType = 'xAbs' | 'yAbs' | 'snapToYAxis' | 'snapToXAxis'
+
+const buttonLabels: Record<ButtonType, string> = {
+  xAbs: 'Set distance from X Axis',
+  yAbs: 'Set distance from Y Axis',
+  snapToYAxis: 'Snap To Y Axis',
+  snapToXAxis: 'Snap To X Axis',
+}
+
+export const SetAbsDistance = ({ buttonType }: { buttonType: ButtonType }) => {
   const { guiMode, selectionRanges, ast, programMemory, updateAst, setCursor } =
     useStore((s) => ({
       guiMode: s.guiMode,
@@ -132,8 +137,9 @@ export const SetAbsDistance = ({
         }
       }}
       disabled={!enableAngLen}
+      title={buttonLabels[buttonType]}
     >
-      {buttonType}
+      {buttonLabels[buttonType]}
     </button>
   )
 }

src/components/Toolbar/SetAngleBetween.tsx

@@ -147,8 +147,9 @@ export const SetAngleBetween = () => {
         }
       }}
       disabled={!enable}
+      title="Set Angle Between"
     >
-      angleBetween
+      Set Angle Between
     </button>
   )
 }

src/components/Toolbar/SetHorzVertDistance.tsx

@@ -21,17 +21,28 @@ import { GetInfoModal } from '../SetHorVertDistanceModal'
 import { createLiteral, createVariableDeclaration } from '../../lang/modifyAst'
 import { removeDoubleNegatives } from '../AvailableVarsHelpers'
 import { updateCursors } from '../../lang/util'
+import { ActionIcon } from 'components/ActionIcon'
+import { sketchButtonClassnames } from 'Toolbar'
 
 const getModalInfo = create(GetInfoModal as any)
 
+type ButtonType =
+  | 'setHorzDistance'
+  | 'setVertDistance'
+  | 'alignEndsHorizontally'
+  | 'alignEndsVertically'
+
+const buttonLabels: Record<ButtonType, string> = {
+  setHorzDistance: 'Set Horizontal Distance',
+  setVertDistance: 'Set Vertical Distance',
+  alignEndsHorizontally: 'Align Ends Horizontally',
+  alignEndsVertically: 'Align Ends Vertically',
+}
+
 export const SetHorzVertDistance = ({
   buttonType,
 }: {
-  buttonType:
-    | 'setHorzDistance'
-    | 'setVertDistance'
-    | 'alignEndsHorizontally'
-    | 'alignEndsVertically'
+  buttonType: ButtonType
 }) => {
   const { guiMode, selectionRanges, ast, programMemory, updateAst, setCursor } =
     useStore((s) => ({
@@ -169,8 +180,9 @@ export const SetHorzVertDistance = ({
         }
       }}
       disabled={!enable}
+      title={buttonLabels[buttonType]}
     >
-      {buttonType}
+      {buttonLabels[buttonType]}
     </button>
   )
 }

src/components/Toolbar/setAngleLength.tsx

@@ -23,10 +23,17 @@ import { updateCursors } from '../../lang/util'
 
 const getModalInfo = create(SetAngleLengthModal as any)
 
+type ButtonType = 'setAngle' | 'setLength'
+
+const buttonLabels: Record<ButtonType, string> = {
+  setAngle: 'Set Angle',
+  setLength: 'Set Length',
+}
+
 export const SetAngleLength = ({
   angleOrLength,
 }: {
-  angleOrLength: 'setAngle' | 'setLength'
+  angleOrLength: ButtonType
 }) => {
   const { guiMode, selectionRanges, ast, programMemory, updateAst, setCursor } =
     useStore((s) => ({
@@ -144,8 +151,9 @@ export const SetAngleLength = ({
         }
       }}
       disabled={!enableAngLen}
+      title={buttonLabels[angleOrLength]}
     >
-      {angleOrLength}
+      {buttonLabels[angleOrLength]}
     </button>
   )
 }