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/App/style.scss

@@ -10,74 +10,80 @@ Note: These styles are temporary. They will be replaced before going live.
   height: 100%;
   overflow: hidden;
   contain: strict;
+  display: flex;
+  justify-content: flex-end;
 
-  .leftLabel,
-  .rightLabel {
-    position: fixed;
-    bottom: 0;
-    padding: 5px 10px;
-    background: rgba(0,0,0,0.5);
-    color: #fff;
+  &.horizontal {
+    justify-content: space-between;
+    align-items: flex-end;
   }
 
-  .leftLabel { left: 0; }
-  .rightLabel { right: 0; }
-
-  .leftOptions,
-  .rightOptions {
-    position: fixed;
-    bottom: 40px;
+  &.vertical {
+    flex-direction: column;
   }
-
-  .leftOptions { left: 10px; }
-  .rightOptions { right: 10px; }
 }
 
 .welcome {
-  position: absolute;
-  display: inline-block;
-  left: 50%;
-  top: 50%;
-  padding: 20px;
-  transform: translate(-50%, -50%);
+  margin: auto;
+  text-align: center;
 
   h1 {
     font-weight: inherit;
     font-size: 150%;
     text-align: center;
   }
- 
+
   input {
     display: inline-block;
     width: 16em;
-    padding: 5px;
+    padding: 10px;
     margin: 0 auto;
     -webkit-appearance: none;
-    border: 1px solid #b68c86;
-    background: #f0d3cf;
-    box-shadow: inset 0 0 1px #fff;
+    border: 1px solid var(--button-fg);
+    background: rgba(var(--button-fg-color), 0.1);
     border-radius: 3px;
     cursor: pointer;
   }
 }
 
-:global { 
+:global {
   file-drop {
     overflow: hidden;
     touch-action: none;
     height:100%;
     width:100%;
 
-    &.drop-valid {
-      transition: opacity 200ms ease-in-out, background-color 200ms;
-      opacity: 0.5;
-      background-color:green;
+    &:after {
+      content: '';
+      position: absolute;
+      display: block;
+      left: 10px;
+      top: 10px;
+      right: 10px;
+      bottom: 10px;
+      border: 2px dashed #fff;
+      border-radius: 10px;
+      opacity: 0;
+      transform: scale(0.95);
+      transition: opacity 300ms ease, transform 300ms cubic-bezier(.6,2,.6,1), background-color 300ms step-end, border-color 300ms step-end;
+      pointer-events: none;
     }
 
-    &.drop-invalid {
-      transition: opacity 200ms ease-in-out, background-color 200ms;
-      opacity: 0.5;
-      background-color:red;
+    &.drop-valid:after,
+    &.drop-invalid:after {
+      opacity: 1;
+      transform: scale(1);
+      transition: opacity 300ms ease, transform 300ms cubic-bezier(.6,2,.6,1);
+    }
+
+    &.drop-valid:after {
+      background-color:rgba(88, 116, 88, 0.2);
+      border-color: rgba(65, 129, 65, 0.5);
+    }
+
+    &.drop-invalid:after {
+      background-color:rgba(119, 85, 85, 0.2);
+      border-color:rgba(129, 63, 63, 0.5);
     }
   }
-}
+}