Franknoirot/pretty buttons (#550)

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