Initial support for mobile devices (#787)

* Initial support for mobile devices

No editing yet, but UI looks nice and you can open the canvas menu

* Add support for editing shape color, etc

* Allow the mobile menus to cover the shape selector

* Hopefully fix test error

* Fix touch on canvas

* Fix safe area handling & remove unused Island

src/components/ColorPicker.css

@@ -98,7 +98,9 @@
   box-sizing: content-box;
   border-radius: 0px 4px 4px 0px;
   float: left;
+  padding: 1px;
   padding-left: 0.5em;
+  appearance: none;
 }
 
 .color-picker-label-swatch {

src/components/ExportDialog.tsx

@@ -17,6 +17,7 @@ import { KEYS } from "../keys";
 
 import { probablySupportsClipboardBlob } from "../clipboard";
 import { getSelectedElements, isSomeElementSelected } from "../scene";
+import useIsMobile from "../is-mobile";
 
 const scales = [1, 2, 3];
 const defaultScale = scales.includes(devicePixelRatio) ? devicePixelRatio : 1;
@@ -233,6 +234,7 @@ export function ExportDialog({
         icon={exportFile}
         type="button"
         aria-label={t("buttons.export")}
+        showAriaLabel={useIsMobile()}
         title={t("buttons.export")}
         ref={triggerButton}
       />

src/components/ToolButton.tsx

@@ -14,6 +14,7 @@ type ToolButtonBaseProps = {
   id?: string;
   size?: ToolIconSize;
   keyBindingLabel?: string;
+  showAriaLabel?: boolean;
 };
 
 type ToolButtonProps =
@@ -48,6 +49,9 @@ export const ToolButton = React.forwardRef(function(
         <div className="ToolIcon__icon" aria-hidden="true">
           {props.icon || props.label}
         </div>
+        {props.showAriaLabel && (
+          <div className="ToolIcon__label">{props["aria-label"]}</div>
+        )}
       </button>
     );
   }

src/components/ToolIcon.scss

@@ -1,13 +1,13 @@
 .ToolIcon {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
   position: relative;
   font-family: Cascadia;
   cursor: pointer;
+  background-color: #e9ecef;
 }
 
 .ToolIcon__icon {
-  background-color: #e9ecef;
-
   width: 2.5rem;
   height: 2.5rem;
 
@@ -23,6 +23,10 @@
   }
 }
 
+.ToolIcon__label {
+  font-family: var(--ui-font);
+}
+
 .ToolIcon_size_s .ToolIcon__icon {
   width: 1.4rem;
   height: 1.4rem;
@@ -35,13 +39,13 @@
   margin: 0;
   font-size: inherit;
 
-  &:hover .ToolIcon__icon {
+  &:hover {
     background-color: #e9ecef;
   }
-  &:active .ToolIcon__icon {
+  &:active {
     background-color: #ced4da;
   }
-  &:focus .ToolIcon__icon {
+  &:focus {
     box-shadow: 0 0 0 2px #a5d8ff;
   }
 }
@@ -70,19 +74,19 @@
   align-items: center;
   justify-content: center;
   margin-left: 0.1rem;
+  background-color: transparent;
 
   .ToolIcon__icon {
-    background-color: transparent;
     width: 2rem;
     height: 2em;
   }
-  &:hover .ToolIcon__icon {
+  &:hover {
     background-color: transparent;
   }
-  &:active .ToolIcon__icon {
+  &:active {
     background-color: transparent;
   }
-  &:focus .ToolIcon__icon {
+  &:focus {
     box-shadow: none;
   }
 }
@@ -93,6 +97,6 @@
   right: 3px;
   font-size: 0.5em;
   color: #adb5bd; // OC GRAY 5
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--ui-font);
   user-select: none;
 }