Options UI (#135)

* Move gzipped size calculations into a worker and wrap it up in a `<GzipSize />` component that will also handle showing % of original size once that info is plumbed

* A couple tweaks for the app welcome (drop files) screen. We don't have mocks for this one, but this is at least a minor improvement.

* Prettier "pop" effect and styling for the drop zone/indicator.

* Styling for the quantization toggle to make it look like a disclosure triangle/button.

* Add controls bar (zoom in/out/to, background toggle). @todo: extract into its own component.

* When clicking/tapping the image area, give it focus.

* Utilities used by this PR

* Add a `two-up-handle` attribute to the handle for easier styling (classname gets mangled so it doesn't make for a good public API)

* Add a dummy comment to test netlify deploy

* Remove commented-out code.

* Fix styling of vertical split (which as it turns out is slightly different in the mocks anyway)

* Use a composited overlay for the dark background instead of animating background-color

* Move grayscale styling into `<two-up>` by default, then set colors via custom properties

* Remove commented-out svg fill

* Remove dummy comment

* Change `<GzipSize>` to be `<FileSize>`, add `compress` option that lets us show gzipped sizes later if we need. Defaults to `false`, and the gzip worker is only lazily instantiated the first time a compressed size calculation is requested.

* Dependency updates

* Remove color animations from dnd overlay

* Don't use a cyclical import for EncodedImage, instead just specify the types of the properties we Options actually uses.

* Pass source image through to FileSize component so it can compute delta

* Stylize size display with colors based on delta amount/direction

* Remove box-shadow animation.

* Simplify font stack

* Remove commented out code

* Remove gzip compression from size component

* Remove memoization bits

* Use specific flattend props instead of passing large context objects around.

* Remove unused packages.

* Remove unreachable String case in FileSize, and omit redundant File type

* Simplify calculateSize()

* Fix types for FileSize!

* Remove FileSize title

* Make delta variable consistent.

* Skip passing compareTo value for original image

* Remove manual focus

* Fix whitespace

* remove unused keyframes

* remove pointless flex-wrap property

* Remove unused resetZoom() method

* Remove pointless flex properties

* Use `on` prefix for event handling

* Remove pointless justify-self property

* Use an inline SVG for TwoUp's handle icon so it can be colored from outside the component..

* Move orientation state up from `<Output>` into `<App>` and share it with `<Options>`.

* Make the options panels responsive :)

* Show a plus sign for size increases `(+8%)`

* Use inline SVG for the zoom +/- icons, collect SVG icons into one file now that I've verified they get tree-shaken properly.

* Fix top/bottom options panels being reversed

* remove commented out code

* lockfile

* Revert quanitzation toggle styles so it's just a checkbox.

* Remove minimum delta for compare size

* Rename data prop to file.

* scale int -> float

* remove tabIndex

* Remove old icon files

* Add width to options panels

* Add vertical scrolling when options are taller than 80% of the screen height.

src/components/Output/style.scss

@@ -14,16 +14,127 @@ Note: These styles are temporary. They will be replaced before going live.
 
 .output {
   @extend %fill;
+  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none"><path fill="rgba(0,0,0,0.05)" d="M0 0h10v10H0zM10 10h10v10H10z"/></svg>') center repeat;
+
+  &:before {
+    content: '';
+    @extend %fill;
+    background: #000;
+    opacity: 0;
+    transition: opacity 500ms ease;
+  }
+  &.altBackground:before {
+    opacity: .6;
+  }
 
   > two-up {
     @extend %fill;
+    --accent-color: var(--button-fg);
 
     > pinch-zoom {
       @extend %fill;
+      outline: none;
     }
   }
 }
 
+.controls {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  left: 220px;
+  right: 220px;
+  bottom: 0;
+  padding: 9px;
+  overflow: hidden;
+  flex-wrap: wrap;
+  contain: content;
+
+  @media (max-width: 680px) {
+    top: 0;
+    bottom: auto;
+    left: 0;
+    right: 0;
+  }
+
+  > * {
+    z-index: 2;
+  }
+
+  .group {
+    display: flex;
+  }
+
+  .button,
+  .zoom {
+    display: flex;
+    align-items: center;
+    flex: 0;
+    box-sizing: border-box;
+    height: 48px;
+    padding: 0 16px;
+    margin: 4px;
+    background-color: #fff;
+    border: 1px solid rgba(0,0,0,0.2);
+    border-radius: 5px;
+    line-height: 1;
+    font-size: 110%;
+    white-space: nowrap;
+
+    &:focus {
+      box-shadow: 0 0 0 2px var(--button-fg);
+      outline: none;
+      z-index: 1;
+    }
+  }
+
+  .button {
+    text-transform: uppercase;
+    color: var(--button-fg);
+    cursor: pointer;
+    text-indent: 6px;
+  }
+
+  .button:hover {
+    background-color: #eee;
+  }
+
+  .zoom {
+    flex: 0 0 6em;
+    color: #625E80;
+    font: inherit;
+    cursor: text;
+    width: 6em;
+    text-align: center;
+    justify-content: center;
+
+    &:focus {
+      box-shadow: inset 0 1px 4px rgba(0,0,0,0.2), 0 0 0 2px var(--button-fg);
+    }
+
+    strong {
+      position: relative;
+      top: 1px;
+      margin: 0 3px 0 0;
+      color: #888;
+      font-weight: normal;
+      border-bottom: 1px dashed #999;
+    }
+  }
+
+  .group > :not(:first-child) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-left: 0;
+  }
+  .group > :not(:last-child) {
+    margin-right: 0;
+    border-right-width: 0;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+
 .outputCanvas {
   image-rendering: pixelated;
 }