From 0e6610c007e7f37acdcb6ff1755764176b48040f Mon Sep 17 00:00:00 2001
From: Jake Archibald <jaffathecake@gmail.com>
Date: Fri, 27 Nov 2020 16:03:23 +0000
Subject: [PATCH] Move back btn

---
 src/client/lazy-app/Compress/Output/index.tsx | 17 +--------------
 src/client/lazy-app/Compress/Output/style.css | 21 -------------------
 src/client/lazy-app/Compress/index.tsx        | 14 ++++++++++++-
 src/client/lazy-app/Compress/style.css        | 21 +++++++++++++++++++
 4 files changed, 35 insertions(+), 38 deletions(-)

diff --git a/src/client/lazy-app/Compress/Output/index.tsx b/src/client/lazy-app/Compress/Output/index.tsx
index 00661552..562445c3 100644
--- a/src/client/lazy-app/Compress/Output/index.tsx
+++ b/src/client/lazy-app/Compress/Output/index.tsx
@@ -27,7 +27,6 @@ interface Props {
   rightCompressed?: ImageData;
   leftImgContain: boolean;
   rightImgContain: boolean;
-  onBack: () => void;
   onPreprocessorChange: (newState: PreprocessorState) => void;
 }
 
@@ -254,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();
@@ -313,20 +312,6 @@ export default class Output extends Component<Props, State> {
           </pinch-zoom>
         </two-up>
 
-        <button class={style.back} onClick={onBack}>
-          <svg viewBox="0 0 61 53.3">
-            <title>Back</title>
-            <path
-              class={style.backBlob}
-              d="M0 25.6c-.5-7.1 4.1-14.5 10-19.1S23.4.1 32.2 0c8.8 0 19 1.6 24.4 8s5.6 17.8 1.7 27a29.7 29.7 0 01-20.5 18c-8.4 1.5-17.3-2.6-24.5-8S.5 32.6.1 25.6z"
-            />
-            <path
-              class={style.backX}
-              d="M41.6 17.1l-2-2.1-8.3 8.2-8.2-8.2-2 2 8.2 8.3-8.3 8.2 2.1 2 8.2-8.1 8.3 8.2 2-2-8.2-8.3z"
-            />
-          </svg>
-        </button>
-
         <div class={style.controls}>
           <div class={style.zoomControls}>
             <button class={style.button} onClick={this.zoomOut}>
diff --git a/src/client/lazy-app/Compress/Output/style.css b/src/client/lazy-app/Compress/Output/style.css
index eb1f4eb9..60ef9498 100644
--- a/src/client/lazy-app/Compress/Output/style.css
+++ b/src/client/lazy-app/Compress/Output/style.css
@@ -149,27 +149,6 @@
   border-bottom: 1px dashed #999;
 }
 
-.back {
-  composes: unbutton from global;
-  position: absolute;
-  top: var(--dist);
-  left: var(--dist);
-  --dist: 14px;
-
-  & > svg {
-    width: 58px;
-  }
-}
-
-.back-blob {
-  fill: var(--hot-pink);
-  opacity: 0.77;
-}
-
-.back-x {
-  fill: var(--white);
-}
-
 .buttons-no-wrap {
   display: flex;
   pointer-events: none;
diff --git a/src/client/lazy-app/Compress/index.tsx b/src/client/lazy-app/Compress/index.tsx
index 0b56d8fb..a08d7b6b 100644
--- a/src/client/lazy-app/Compress/index.tsx
+++ b/src/client/lazy-app/Compress/index.tsx
@@ -862,10 +862,22 @@ export default class Compress extends Component<Props, State> {
           rightCompressed={rightImageData}
           leftImgContain={leftImgContain}
           rightImgContain={rightImgContain}
-          onBack={onBack}
           preprocessorState={preprocessorState}
           onPreprocessorChange={this.onPreprocessorChange}
         />
+        <button class={style.back} onClick={onBack}>
+          <svg viewBox="0 0 61 53.3">
+            <title>Back</title>
+            <path
+              class={style.backBlob}
+              d="M0 25.6c-.5-7.1 4.1-14.5 10-19.1S23.4.1 32.2 0c8.8 0 19 1.6 24.4 8s5.6 17.8 1.7 27a29.7 29.7 0 01-20.5 18c-8.4 1.5-17.3-2.6-24.5-8S.5 32.6.1 25.6z"
+            />
+            <path
+              class={style.backX}
+              d="M41.6 17.1l-2-2.1-8.3 8.2-8.2-8.2-2 2 8.2 8.3-8.3 8.2 2.1 2 8.2-8.1 8.3 8.2 2-2-8.2-8.3z"
+            />
+          </svg>
+        </button>
         {mobileView ? (
           <div class={style.options}>
             <multi-panel class={style.multiPanel} open-one-only>
diff --git a/src/client/lazy-app/Compress/style.css b/src/client/lazy-app/Compress/style.css
index 545a91eb..620a53ce 100644
--- a/src/client/lazy-app/Compress/style.css
+++ b/src/client/lazy-app/Compress/style.css
@@ -73,3 +73,24 @@
 :focus .expand-icon {
   fill: #34b9eb;
 }
+
+.back {
+  composes: unbutton from global;
+  position: absolute;
+  top: var(--dist);
+  left: var(--dist);
+  --dist: 14px;
+
+  & > svg {
+    width: 58px;
+  }
+}
+
+.back-blob {
+  fill: var(--hot-pink);
+  opacity: 0.77;
+}
+
+.back-x {
+  fill: var(--white);
+}