(Almost the) rest of the redesign (#880)

* Load demo img

* two-up styles

* Back button

* Button size tweak

* Move back btn

* Move options and back button into a single grid

* Simpler max height

* Responsive grid

* Feed index into options

* Option heading themes

* More option styles

* Changing checkbox position

* Theme range input & use transforms

* Range input underline theme

* Checkbox color

* Add toggle

* Reorder

* Arrow revealer

* Round two-up thumb

* Don't bundle CSS urls starting #

* Results in progress

* Fix Safari bugs

* Download blobs

* Loading spinner

* Hook up download button

* Different style for original image

* Mobile design for results

* Remove demo auto-loader

* Remove redundant colors

* Sticky headings

src/client/lazy-app/Compress/Output/custom-els/TwoUp/index.ts

@@ -73,9 +73,14 @@ export default class TwoUp extends HTMLElement {
   connectedCallback() {
     this._childrenChange();
 
-    this._handle.innerHTML = `<div class="${
-      styles.scrubber
-    }">${`<svg viewBox="0 0 27 20" fill="currentColor">${'<path d="M17 19.2l9.5-9.6L16.9 0zM9.6 0L0 9.6l9.6 9.6z"/>'}</svg>`}</div>`;
+    // prettier-ignore
+    this._handle.innerHTML =
+      `<div class="${styles.scrubber}">${
+        `<svg viewBox="0 0 27 20">${
+          `<path class="${styles.arrowLeft}" d="M9.6 0L0 9.6l9.6 9.6z"/>` +
+          `<path class="${styles.arrowRight}" d="M17 19.2l9.5-9.6L16.9 0z"/>`
+        }</svg>
+      `}</div>`;
 
     if (!this._everConnected) {
       this._resetPosition();

src/client/lazy-app/Compress/Output/custom-els/TwoUp/styles.css

@@ -2,12 +2,11 @@ two-up {
   display: grid;
   position: relative;
   --split-point: 0;
-  --accent-color: #777;
-  --track-color: var(--accent-color);
-  --thumb-background: #fff;
+  --track-color: rgb(0 0 0 / 0.6);
+  --thumb-background: var(--black);
   --thumb-color: var(--accent-color);
   --thumb-size: 62px;
-  --bar-size: 6px;
+  --bar-size: 9px;
   --bar-touch-size: 30px;
 }
 
@@ -37,8 +36,6 @@ two-up[legacy-clip-compat] > :not(.two-up-handle) {
   height: 100%;
   width: var(--bar-size);
   margin: 0 auto;
-  box-shadow: inset calc(var(--bar-size) / 2) 0 0 rgba(0, 0, 0, 0.1),
-    0 1px 4px rgba(0, 0, 0, 0.4);
   background: var(--track-color);
 }
 
@@ -47,14 +44,11 @@ two-up[legacy-clip-compat] > :not(.two-up-handle) {
   position: absolute;
   top: 50%;
   left: 50%;
-  transform-origin: 50% 50%;
   transform: translate(-50%, -50%);
   width: var(--thumb-size);
-  height: calc(var(--thumb-size) * 0.9);
+  height: var(--thumb-size);
   background: var(--thumb-background);
-  border: 1px solid rgba(0, 0, 0, 0.2);
   border-radius: var(--thumb-size);
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
   color: var(--thumb-color);
   box-sizing: border-box;
   padding: 0 calc(var(--thumb-size) * 0.24);
@@ -64,6 +58,14 @@ two-up[legacy-clip-compat] > :not(.two-up-handle) {
   flex: 1;
 }
 
+.arrow-left {
+  fill: var(--pink);
+}
+
+.arrow-right {
+  fill: var(--blue);
+}
+
 two-up[orientation='vertical'] .two-up-handle {
   width: auto;
   height: var(--bar-touch-size);

src/client/lazy-app/Compress/Output/index.tsx

@@ -10,7 +10,6 @@ import {
   ToggleBackgroundIcon,
   AddIcon,
   RemoveIcon,
-  BackIcon,
   ToggleBackgroundActiveIcon,
   RotateIcon,
 } from '../../icons';
@@ -28,7 +27,6 @@ interface Props {
   rightCompressed?: ImageData;
   leftImgContain: boolean;
   rightImgContain: boolean;
-  onBack: () => void;
   onPreprocessorChange: (newState: PreprocessorState) => void;
 }
 
@@ -255,7 +253,7 @@ export default class Output extends Component<Props, State> {
   };
 
   render(
-    { mobileView, leftImgContain, rightImgContain, source, onBack }: Props,
+    { mobileView, leftImgContain, rightImgContain, source }: Props,
     { scale, editingScale, altBackground }: State,
   ) {
     const leftDraw = this.leftDrawable();
@@ -314,12 +312,6 @@ export default class Output extends Component<Props, State> {
           </pinch-zoom>
         </two-up>
 
-        <div class={style.back}>
-          <button class={style.button} onClick={onBack}>
-            <BackIcon />
-          </button>
-        </div>
-
         <div class={style.controls}>
           <div class={style.zoomControls}>
             <button class={style.button} onClick={this.zoomOut}>

src/client/lazy-app/Compress/Output/style.css

@@ -1,5 +1,5 @@
 .output {
-  composes: abs-fill from global;
+  display: contents;
 
   &::before {
     content: '';
@@ -9,18 +9,17 @@
     right: 0;
     bottom: 0;
     background: #000;
-    opacity: 0;
+    opacity: 0.8;
     transition: opacity 500ms ease;
   }
 
   &.alt-background::before {
-    opacity: 0.6;
+    opacity: 0;
   }
 }
 
 .two-up {
   composes: abs-fill from global;
-  --accent-color: var(--button-fg);
 }
 
 .pinch-zoom {
@@ -41,16 +40,15 @@
 }
 
 .controls {
-  position: absolute;
   display: flex;
   justify-content: center;
-  top: 0;
-  left: 0;
-  right: 0;
-  padding: 9px 84px;
   overflow: hidden;
   flex-wrap: wrap;
   contain: content;
+  grid-area: header;
+  align-self: center;
+  padding: 9px 66px;
+  position: relative;
 
   /* Allow clicks to fall through to the pinch zoom area */
   pointer-events: none;
@@ -60,11 +58,9 @@
 
   @media (min-width: 860px) {
     padding: 9px;
-    top: auto;
-    left: 320px;
-    right: 320px;
-    bottom: 0;
     flex-wrap: wrap-reverse;
+    grid-area: viewportOpts;
+    align-self: end;
   }
 }
 
@@ -149,13 +145,6 @@
   border-bottom: 1px dashed #999;
 }
 
-.back {
-  position: absolute;
-  top: 0;
-  left: 0;
-  padding: 9px;
-}
-
 .buttons-no-wrap {
   display: flex;
   pointer-events: none;