Undo/Redo buttons, refactor menu toggles (#793)

* Make Undo & Redo and the menu buttons into actions; add undo/redo buttons

* Create variables for the ToolIcon colors

* Darken the menu buttons when they’re active

* Put the more intensive test in `perform`

* Fix & restyle hint viewer

* Add pinch zoom for macOS Safari

* Chrome/Firefox trackpad pinch zoom

* openedMenu → openMenu

* needsShapeEditor.ts → showSelectedShapeActions.ts

* Call showSelectedShapeActions

src/components/HintViewer.css

@@ -1,5 +1,4 @@
 .HintViewer {
-  background-color: rgba(255, 255, 255, 0.88);
   color: #868e96; /* OC: GRAY 6*/
   font-size: 0.8rem;
   left: 50%;
@@ -9,9 +8,16 @@
   transform: translateX(calc(-50% - 16px)); /* 16px is half of lock icon */
 }
 
+.HintViewer > span {
+  background-color: rgba(255, 255, 255, 0.88);
+  padding: 0.2rem 0.4rem;
+  border-radius: 3px;
+}
+
 @media (max-width: 600px), (max-height: 500px) and (max-width: 1000px) {
   .HintViewer {
     position: static;
+    transform: none;
     margin-top: 0.5rem;
     text-align: center;
   }

src/components/HintViewer.tsx

@@ -52,5 +52,9 @@ export const HintViewer = ({
     return null;
   }
 
-  return <div className="HintViewer">{hint}</div>;
+  return (
+    <div className="HintViewer">
+      <span>{hint}</span>
+    </div>
+  );
 };

src/components/ToolButton.tsx

@@ -16,6 +16,7 @@ type ToolButtonBaseProps = {
   keyBindingLabel?: string;
   showAriaLabel?: boolean;
   visible?: boolean;
+  selected?: boolean;
 };
 
 type ToolButtonProps =
@@ -40,7 +41,9 @@ export const ToolButton = React.forwardRef(function(
   if (props.type === "button") {
     return (
       <button
-        className={`ToolIcon_type_button ToolIcon ${sizeCn}`}
+        className={`ToolIcon_type_button ToolIcon ${sizeCn}${
+          props.selected ? " ToolIcon--selected" : ""
+        }`}
         title={props.title}
         aria-label={props["aria-label"]}
         type="button"

src/components/ToolIcon.scss

@@ -1,10 +1,17 @@
+:root {
+  --button-gray-1: #e9ecef;
+  --button-gray-2: #ced4da;
+  --button-gray-3: #adb5bd;
+  --button-blue: #a5d8ff;
+}
+
 .ToolIcon {
   display: inline-flex;
   align-items: center;
   position: relative;
   font-family: Cascadia;
   cursor: pointer;
-  background-color: #e9ecef;
+  background-color: var(--button-gray-1);
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -41,13 +48,19 @@
   font-size: inherit;
 
   &:hover {
-    background-color: #e9ecef;
+    background-color: var(--button-gray-1);
   }
   &:active {
-    background-color: #ced4da;
+    background-color: var(--button-gray-2);
   }
   &:focus {
-    box-shadow: 0 0 0 2px #a5d8ff;
+    box-shadow: 0 0 0 2px var(--button-blue);
+  }
+  &.ToolIcon--selected {
+    background-color: var(--button-gray-2);
+    &:active {
+      background-color: var(--button-gray-3);
+    }
   }
 }
 
@@ -57,17 +70,14 @@
   opacity: 0;
   pointer-events: none;
 
-  &:hover + .ToolIcon__icon {
-    background-color: #e9ecef;
-  }
   &:checked + .ToolIcon__icon {
-    background-color: #ced4da;
+    background-color: var(--button-gray-2);
   }
   &:focus + .ToolIcon__icon {
-    box-shadow: 0 0 0 2px #a5d8ff;
+    box-shadow: 0 0 0 2px var(--button-blue);
   }
   &:active + .ToolIcon__icon {
-    background-color: #adb5bd;
+    background-color: var(--button-gray-3);
   }
 }
 
@@ -105,7 +115,7 @@
   bottom: 2px;
   right: 3px;
   font-size: 0.5em;
-  color: #adb5bd; // OC GRAY 5
+  color: var(--button-gray-3); // OC GRAY 5
   font-family: var(--ui-font);
   user-select: none;
 }